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 is an applied research team that builds products and AI models. Our first product helps builders get customers through people they already know.

  • 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-editorial18px1.64000
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

Editorial body

Long-form blog and article prose. Keep the 18px size and 1.6 reading rhythm; do not use for compact marketing copy.

type-editorial

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

noticed handles digital relationship work so people can focus on real relationships.

A bright, placeless analog world seen like a fading human memory. Technology stays out of frame so the result of the product feels tangible: more attention, presence, and time with other people.

Most AI brands show the machinery. noticed shows what the machinery gives back: attention, presence, and time with other people. The imperfect analog treatment makes that promise feel human instead of technical.

Fixed layers

Atmosphere: 85%

Text backgrounds, quiet UI surfaces, transitions, and simple editorial assets. Nothing is identifiable. Derive it from an approved Brand Scene so the palette and world stay consistent.

/brand/images/atmosphere/masters/08-converging-paths--medium.png

Brand Scenes: 70%

Website, social, and editorial imagery when human connection is the subject. Show the presence of 3–7 adults. Faces, clothes, hands, objects, landmarks, and literal scenery stay unreadable.

/brand/images/brand-scenes/masters/03-crossing-paths--medium.png

Real Life: 40%

Founder, team, and event photography when the moment matters more than detail. Keep the source truthful and apply the fixed code treatment. Never regenerate a real photograph.

/brand/images/real-life/examples/real-life-40.jpg

Real Life Detail: sharp exception

Portraits, speakers, product demonstrations, and documentary images where identity or information must stay clear. Keep detail sharp. Add bright spatial color-light, fine grain, gentle halation, and a light leak.

/brand/images/real-life/examples/real-life-detail.jpg

Image palette

  • Sky: #9BC9D3. Bright air and open space
  • Leaf: #7EAA67. Organic movement
  • Cream: #EEE4C9. Warm light and breathing room
  • Deep teal: #185057. Depth without a dark cast
  • Coral: #F1784C. Spatial light leak or afterimage
  • Use one bare image or video from the noticed image system. Give copy its own calm field instead of adding a heavy dark scrim.
  • Product UI uses no imagery beyond avatars and functional icons.
  • Use the Content Lead noticed-image-studio skill for new Brand Scenes, Atmosphere derivation, standard crops, and real-photo treatments.

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: “Our first product helps builders get customers through people they already know.”

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/systemspectokens