# noticed marketing brand reference

This is the implementation reference for noticed marketing surfaces. The concise human brand kit is at [/brand](/brand). The exhaustive live product catalog remains at [/brand/system](/brand/system).

## Identity and logo

noticed turns your best work into warm introductions, so you can focus on building.

- Use the complete wordmark whenever space allows.
- Use the n mark for compact squares, favicons, and app icons.
- Clear space: Keep clear space equal to the height of the wordmark's n stem.
- Minimum wordmark: 96px wide on screen
- Minimum mark: 24px square on screen
- Do not recolor, stretch, rotate, outline, or add effects.
- Do not detach the artwork from its supplied paper color.
- Do not typeset a replacement wordmark in another font.

## Assets

- [Light wordmark](/brand/assets/noticed-wordmark-light.svg) downloads as `noticed-wordmark-light.svg`. Use on the fixed light paper color only.
- [Dark wordmark](/brand/assets/noticed-wordmark-dark.svg) downloads as `noticed-wordmark-dark.svg`. Use on the fixed dark paper color only.
- [Light mark](/brand/assets/noticed-mark-light.svg) downloads as `noticed-mark-light.svg`. Use when the wordmark cannot remain legible at the available size.
- [Dark mark](/brand/assets/noticed-mark-dark.svg) downloads as `noticed-mark-dark.svg`. Use when the wordmark cannot remain legible at the available size.

## Typography

Use Switzer through `font-sans / --font-sans` for all marketing and interface copy.

[Download Switzer](https://www.fontshare.com/fonts/switzer)

| Size class | Font size | Line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| `type-sm` | 14px | 1.4 | 400 | 0.01em |
| `type-base` | 16px | 1.4 | 400 | 0.005em |
| `type-md` | 18px | 1.4 | 400 | 0 |
| `type-lg` | 22px | 1.3 | 400 | -0.005em |
| `type-xl` | 32px | 1.2 | 400 | -0.02em |
| `type-hero` | clamp(42px, 7vw, 72px) | 1 | 600 | -0.03em |

### Hero headline

- Class: `type-hero`
- Use: The single landing-page headline. Keep it short and outcome-led.

### Section headline

- Class: `type-xl`
- Use: A scannable headline that opens a standard marketing section.

### Section statement

- Class: `type-xl`
- Use: The main thought in a marketing section and the landing narrative.

### Feature heading

- Class: `type-md`
- Use: Titles for cards, steps, benefits, and other compact feature groups.

### Supporting body

- Class: `type-md`
- Use: Explanations and prose that support a statement without competing with it.

### Regular body

- Class: `type-base`
- Use: Longer paragraphs and general marketing body copy.

### Navigation and link

- Class: `type-sm`
- Use: Marketing navigation, footer links, and compact calls to action.

### Eyebrow and label

- Class: `type-sm`
- Use: Short labels, small chips, and restrained section eyebrows.

### Responsive pairings

Size classes are fixed recipes. Switch classes at breakpoints only through these approved component pairings.

- Feature copy: `type-base md:type-md`
  - Mobile/default: `16px` (`type-base`)
  - Desktop from `md / 768px`: `18px` (`type-md`)
  - Use for feature headings and supporting copy that step from compact mobile cards to wider layouts.
- Marketing action: `type-sm md:type-base`
  - Mobile/default: `14px` (`type-sm`)
  - Desktop from `md / 768px`: `16px` (`type-base`)
  - Use for calls to action inside responsive marketing cards.

### Fluid exception

- Hero: `type-hero`
- Value: `clamp(42px, 7vw, 72px)`
- Range: 42px minimum to 72px maximum; 7vw scales between them.
- The hero is the only fluid type size.

## Color

Use semantic roles in UI. The spring accent marks an action or state, never decoration.

- Light
  - Background: `--background` = `oklch(0.985 0.002 90)`
  - Foreground: `--foreground` = `oklch(0 0 0 / 0.85)`
  - Card: `--card` = `oklch(1 0 0)`
  - Accent: `--brand` = `oklch(0.92 0.13 125)`
- Dark
  - Background: `--background` = `oklch(0.147 0.004 49)`
  - Foreground: `--foreground` = `oklch(0.985 0.001 106)`
  - Card: `--card` = `oklch(0.216 0.006 56)`
  - Accent: `--brand` = `oklch(0.92 0.13 125)`

### Brand / accent ramp

- Spring 50: `--brand-50` = `oklch(0.98 0.04 125)`. Hover wash
- Spring 100: `--brand-100` = `oklch(0.95 0.09 125)`. Soft fill
- Spring 200: `--brand-200` = `oklch(0.92 0.13 125)`. Base accent
- Spring 700: `--brand-700` = `oklch(0.45 0.09 145)`. Accent text on light
- Spring 900: `--brand-900` = `oklch(0.25 0.06 150)`. Text on accent
- Spring wash: `--brand-wash` = `oklch(0.92 0.13 125 / 0.22)`. Selection and callout wash

## Layout

Build mobile first, align page chrome to max-w-7xl, keep prose narrow, and assign spacing to the section or component that owns it.

- Chrome classes: `mx-auto w-full max-w-7xl px-6 sm:px-8`
- Prose width: `max-w-3xl`

### Spacing

Use an 8px rhythm with six approved steps. Do not introduce one-off section margins when an approved recipe fits.

| Value | Use |
| --- | --- |
| 8px | Tightly related details, icons, and metadata. |
| 16px | Default stacks and card padding. |
| 24px | Headings to content and grouped controls. |
| 32px | Distinct component groups. |
| 64px | Standard section padding. |
| 96–128px | Hero, statements, and emphasis sections only. |

- Page gutter: `px-6 sm:px-8`
- Card padding: `p-4`
- Collection gap: `gap-2`
- Distinct component-group gap: `gap-8`
- Heading to content: `mt-6`
- Standard section: `py-16`
- Emphasis section: `py-24 md:py-32`

Exceptions:

- The hero may use 112px block padding to center its single message.
- The animated problem section may use additional block space required by its scroll reveal.

## Controls

- Primary: `<Button variant="default" size="xl">`. Use once per decision area for the action that moves you forward.
- Secondary: `<Button variant="outline" size="xl">`. Use for the alternative action in non-card marketing chrome.
- Private beta chip: `type-sm rounded-md border-hairline border-border bg-secondary px-2 py-1`. Use only to label current access status. It is not interactive.
- Shape: Soft rectangles with a clear primary and secondary hierarchy.

## Media

- Hero: A full-screen mood video or photograph may carry the hero beneath one theme-independent dark scrim.
- Scrim: `bg-media-scrim`
- Social: Use a dark background with a few lowercase words or a minimal diagram. No photography, people, emojis, gradients, or complex scenes.
- Blog: Photography is allowed for blog covers after the super-8 effect is baked into the committed image.
- Product: Product UI uses no imagery beyond avatars and functional icons.

## Voice and casing

Use normal sentence case in Switzer. noticed is always lowercase. Preserve proper noun and acronym casing, including GitHub, LinkedIn, and AI.

### Use plain English

Choose familiar words. Remove jargon and anything written to sound impressive.

- Good: “Your agent remembers who can help.”
- Avoid: “Leverage an intelligent relationship graph.”

### Be brief, but human

Say only what helps, then read it aloud. Warmth wins over clipped brevity.

- Good: “You focus on building. noticed keeps up with the people around it.”
- Avoid: “Build. Connect. Win.”

### Lead with the outcome

Start with what changes for the reader, not the mechanism behind it.

- Good: “Find the right person while the moment still matters.”
- Avoid: “Our graph runs semantic retrieval across your data.”

### Speak to you

Address one person as you. Never call them a user, customer, or member.

- Good: “Your network is already full of people who can help.”
- Avoid: “Users can discover relevant contacts.”

### Keep the brand basics

Write noticed in lowercase. Use no emojis or em dashes. Avoid hype and do not explain AI unless asked.

- Good: “noticed turns your best work into warm introductions.”
- Avoid: “noticed is an AI-powered game-changer.”

## Motion and reduced motion

- Default: `200ms` with `ease-out`.
- Editorial reveal: `marketing-reveal-motion`, 550ms, cubic-bezier(0.45, 0.05, 0.55, 0.95), 16px offset, 18% viewport inset, once.
- Interaction motion uses 150–200ms ease-out. Editorial reveals use the named slower token. No bounce, spring, or decorative movement.
- Scroll-reveal content enters once at an 18% viewport inset. The section surface stays opaque and content remains present and legible without animation.
- Honor prefers-reduced-motion. Remove transforms and collapse non-essential animation and transition duration.

## Accessibility

- Use semantic headings in order and preserve landmark navigation.
- Keep normal text at content-tertiary contrast or stronger.
- Keep keyboard focus visible with the ring token and a minimum 3:1 focus indicator.
- Give informative media useful alt text and mark decorative media with empty alt text.
- Do not encode meaning by color, motion, or hover state alone.

## Sources

- [Canonical specification](https://github.com/noticedso/noticed/blob/main/apps/noticed-agent/app/lib/brand/marketing-brand-spec.ts)
- [Shared CSS tokens](https://github.com/noticedso/noticed/blob/main/packages/tailwind-config/shared-styles.css)
- [Voice guide](https://github.com/noticedso/noticed/blob/main/docs/brand/voice.mdx)
- [Media direction](https://github.com/noticedso/noticed/blob/main/docs/brand/art-direction.md)
- [Button conventions](https://github.com/noticedso/noticed/blob/main/docs/brand/buttons.md)