noticed

# noticed brand visual identity

## overview
This file defines the visual identity for **noticed** (noticed.so), a personal networking agent. Use this as the source of truth when building any noticed interface, asset, or content.

**Keywords**: branding, visual identity, typography, colors, styling, noticed brand

## name
- always lowercase: `noticed` - never "Noticed" or "NOTICED"
- domain: noticed.so
- handle: @noticedso

## wordmark
- **typeface**: Instrument Serif (Google Fonts)
- **weight**: 400 (only available weight)
- **letter-spacing**: -0.04em (-4% in Figma)
- **style**: roman only - no italic in the wordmark
- **case**: always lowercase

```css
.wordmark {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
```

## icon / favicon
Instrument Serif lowercase "n" centered in a rounded square container.
- **shape**: rounded square, border-radius 22% of container width
- **on dark backgrounds**: light square `#f0ede8` + dark letter `#1a1816`
- **on light backgrounds**: dark square `#0a0a0a` + light letter `#f0ede8`
- optical sizing: 96px+: 85% - 64px: 87% - 32px: 90% - 16px: 95%

## colors
Warm neutrals only - never pure black (`#000`) or pure white (`#fff`). Dark mode is the default.

### Dark mode (default)
```css
:root {
  --bg: #0a0a0a; --bg-card: #111111; --border: #222222;
  --text-primary: #f0ede8; --text-secondary: #a09a94; --text-dim: #6b6560;
  --accent: #c4b5a0; --tag-bg: #1a1917; --tag-border: #2a2825;
  --btn-bg: #f0ede8; --btn-text: #0a0a0a;
}
```

### Light mode
```css
[data-theme="light"] {
  --bg: #f7f5f2; --bg-card: #efece8; --border: #d8d4ce;
  --text-primary: #1a1816; --text-secondary: #6b6560; --text-dim: #706b65;
  --accent: #746852; --tag-bg: #e8e4df; --tag-border: #d8d4ce;
  --btn-bg: #1a1816; --btn-text: #f7f5f2;
}
```

## typography
Four fonts, three roles. All Google Fonts.

| Role | Font | Where |
|------|------|-------|
| Display / wordmark | Instrument Serif | Logo, hero headlines |
| Body (editorial) | Newsreader | Subheads + body on landing page, manifesto, blog |
| Body (functional) + UI | Instrument Sans | Onboarding, docs, buttons, nav, forms |
| Mono | JetBrains Mono | Tags, labels, version numbers, code |

### CSS variables
```css
:root {
  --font-display: 'Instrument Serif', serif;
  --font-body-editorial: 'Newsreader', serif;
  --font-body-functional: 'Instrument Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
```

### Key rules
- Subheadline always matches the body font of its context.
- Instrument Serif only at display/headline size - never body text.
- Selective italic: one word per headline (max), emotional anchor. Same color as text.

### Spacing
| Element | Line height | Block gap | Notes |
|---------|-------------|-----------|-------|
| Headline | 1.15 | - | Display type |
| Manifesto / hero | 1.25 | 1.5em | 20px desktop / 16px mobile |
| Subheadline | 1.4 | - | 1-3 lines |
| Body (long-form) | 1.65 | 1em | Sustained reading |

## brand voice
- **say less.** one sentence beats two.
- **write how people talk.** no jargon.
- **always lowercase.** noticed never gets a capital N.
- **don't explain AI.** the product just works.
- **use "you," not "users."**
- **no emojis** except 👀 as brand symbol.
- **no em dashes.** avoid em dashes (—).

## UI components
```css
.btn-primary {
  font-family: var(--font-body-functional);
  font-size: 13px; padding: 9px 22px; border-radius: 6px;
  background: var(--btn-bg); color: var(--btn-text); font-weight: 600;
}
.btn-secondary {
  font-family: var(--font-body-functional);
  font-size: 13px; padding: 9px 22px; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--tag-border); font-weight: 500;
}
.tag {
  font-family: var(--font-mono);
  font-size: 12px; padding: 6px 14px; border-radius: 6px;
  background: var(--tag-bg); border: 1px solid var(--tag-border);
  color: var(--text-secondary);
}
.nav-item {
  font-family: var(--font-body-functional);
  font-size: 14px; color: var(--text-secondary); font-weight: 500;
}
```

## art direction
**Warm machines. Human proof in a synthetic world.**
Closer to an independent magazine or design studio than a tech startup. Tactile, confident, understated. Analog warmth meets digital precision. Quiet, not minimal. Approachable authority.