noticed
Sign inRequest access

Implementation reference

noticed brand for agents

Exact rules for implementing noticed marketing surfaces without guessing. For visual orientation, use the human brand kit. For every live product specimen, use the design system catalog.

Human brand kitMarkdown referenceLive design system

Identity and assets

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
Light wordmark/brand/assets/noticed-wordmark-light.svgDark wordmark/brand/assets/noticed-wordmark-dark.svgLight mark/brand/assets/noticed-mark-light.svgDark mark/brand/assets/noticed-mark-dark.svg

Typography

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

Download Switzer
Size classFont sizeLine heightWeightTracking
type-sm14px1.44000.01em
type-base16px1.44000.005em
type-md18px1.44000
type-lg22px1.3400-0.005em
type-xl32px1.2400-0.02em
type-heroclamp(42px, 7vw, 72px)1600-0.03em

Responsive pairings

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

Feature copy

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.

type-base md:type-md

Marketing action

Mobile/default: 14px (type-sm). Desktop from md / 768px: 16px (type-base). Use for calls to action inside responsive marketing cards.

type-sm md:type-base

Hero fluid exception

42px minimum, 7vw preferred, 72px maximum. The hero is the only fluid type size.

clamp(42px, 7vw, 72px)

Hero headline

The single landing-page headline. Keep it short and outcome-led.

type-hero

Section headline

A scannable headline that opens a standard marketing section.

type-xl

Section statement

The main thought in a marketing section and the landing narrative.

type-xl

Feature heading

Titles for cards, steps, benefits, and other compact feature groups.

type-md

Supporting body

Explanations and prose that support a statement without competing with it.

type-md

Regular body

Longer paragraphs and general marketing body copy.

type-base

Navigation and link

Marketing navigation, footer links, and compact calls to action.

type-sm

Eyebrow and label

Short labels, small chips, and restrained section eyebrows.

type-sm

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.

mx-auto w-full max-w-7xl px-6 sm:px-8max-w-3xl

Spacing

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

ValueUse
8pxTightly related details, icons, and metadata.
16pxDefault stacks and card padding.
24pxHeadings to content and grouped controls.
32pxDistinct component groups.
64pxStandard section padding.
96–128pxHero, statements, and emphasis sections only.

Page gutter

px-6 sm:px-8

Card padding

p-4

Heading to content

mt-6

Standard section

py-16

Emphasis section

py-24 md:py-32
  • 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

Soft rectangles with a clear primary and secondary hierarchy.

<Button variant="default" size="xl">

Use once per decision area for the action that moves you forward.

<Button variant="outline" size="xl">

Use for the alternative action in non-card marketing chrome.

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.

Media direction

  • A full-screen mood video or photograph may carry the hero beneath one theme-independent dark scrim.
  • Scrim: bg-media-scrim
  • Use a dark background with a few lowercase words or a minimal diagram. No photography, people, emojis, gradients, or complex scenes.
  • Photography is allowed for blog covers after the super-8 effect is baked into the committed image.
  • 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 and live specimens

This page and the Markdown endpoint render the canonical typed specification. Do not maintain a separate implementation checklist.

Inspect every live token, component, and block in /brand/systemspectokensvoicemediabuttons