Brand reference
noticed brand guidelines
A practical reference for identity, color, typography, controls, media, and voice.
Identity
Use the complete wordmark whenever space allows. The mark is for compact squares.
Light wordmark
SVG
Dark wordmark
SVG
Light mark
SVG
Dark mark
SVG
Keep the supplied paper and ink together. Do not recolor, stretch, rotate, outline, or add effects.
Color
Warm paper, quiet ink, and one spring accent for actions or state.
Light
Core semantic colors
Background
Primary canvas
--background#FAFAF9Foreground
Primary text and icons
--foreground#000000D9Card
Raised surfaces
--card#FFFFFFBrand accent
Primary actions and states
--brand#D1F492Dark
Core semantic colors
Background
Primary canvas
--background#0C0A09Foreground
Primary text and icons
--foreground#FAFAF9Card
Raised surfaces
--card#1C1917Brand accent
Primary actions and states
--brand#D1F492Brand / accent ramp
Spring stays consistent across light and dark themes. Use semantic aliases in product UI.
Spring 50
Hover wash
--brand-50#F2FEE1Spring 100
Soft fill
--brand-100#E1FAB7Spring 200
Base accent
--brand-200#D1F492Spring 700
Accent text on light
--brand-700#326234Spring 900
Text on accent
--brand-900#062911Spring wash
Selection and callout wash
--brand-wash#D1F49238Typography
Switzer is the working family for marketing and interface copy.
| 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 |
Responsive behavior
Regular type changes at one breakpoint. The hero is the only fluid exception.
| Use | Mobile / default | Desktop (768px+) | Behavior |
|---|---|---|---|
| Feature copy | 16px · type-base | 18px · type-md | Use for feature headings and supporting copy that step from compact mobile cards to wider layouts. |
| Marketing action | 14px · type-sm | 16px · type-base | Use for calls to action inside responsive marketing cards. |
| Hero | 42px minimum | 72px maximum | Fluid at 7vw. The hero is the only fluid type size. |
Hero headline
type-heroThe single landing-page headline. Keep it short and outcome-led.
A clear idea deserves room to breathe.
Section headline
type-xlA scannable headline that opens a standard marketing section.
Start with the point people need to remember.
Section statement
type-xlThe main thought in a marketing section and the landing narrative.
Make the important thing easy to find.
Feature heading
type-mdTitles for cards, steps, benefits, and other compact feature groups.
A compact heading for grouped information.
Supporting body
type-mdExplanations and prose that support a statement without competing with it.
Use this size for context that supports a headline without competing with it.
Regular body
type-baseLonger paragraphs and general marketing body copy.
Use regular body copy for longer explanations and general guidance.
Navigation and link
type-smMarketing navigation, footer links, and compact calls to action.
Overview · Principles · Resources
Eyebrow and label
type-smShort labels, small chips, and restrained section eyebrows.
Reference
Controls
Soft rectangles, one clear action, and very little decoration.
Image system
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.
Atmosphere
85%Text backgrounds, quiet UI surfaces, transitions, and simple editorial assets.
Brand Scenes
70%Website, social, and editorial imagery when human connection is the subject.
Real Life
40%Founder, team, and event photography when the moment matters more than detail.
Real Life Detail
sharp exceptionPortraits, speakers, product demonstrations, and documentary images where identity or information must stay clear.
Voice
Sound like a thoughtful friend who knows what matters and stops there.
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.”