Lowercase "n" in Fraunces inside a square. Rounded uses the iOS-app-icon corner ratio (22.5% of side); the square (non-rounded) version is the one used for the favicon + browser/app icons.

Used as favicon, app icon, and avatar. Light + dark variants, rounded + square. Download is a single 1024×1024 asset — scale down as needed. The favicon ships the dark square mark (regenerate via scripts/generate-brand-icons.mjs).

Re-tune at /brand/tune.

Switzer for every product surface. Hierarchy comes from weight (400 / 500 / 600), not from changing typefaces.

These specimens render the live type tokens — size and line-height come from the token itself, so this page can never drift from the system.

Fraunces, regular, tracking -0.04em at large sizes.

Always lowercase. Sentence case for longer marketing copy; never title case or all caps.

Roman only; never italic. Emphasis comes from cadence and line breaks, not from leaning the letterforms.

Used only for the wordmark and marketing display moments. Never appears inside the product UI.

Warm monochrome on cream (light) and white-on-near-black (dark).

Muted variants use alpha — oklch(0 0 0 / N) in light, oklch(1 0 0 / N) in dark. Each row shows both modes so the symmetric pattern is visible at a glance.

Two surface levels: the background canvas, and the raised surface shared by card, popover, and sidebar — borders and shadows define hierarchy, bg contrast stays minimal.

spring. A warm yellow-green that sits between the canvas and the deep ink — the moment of new growth, of being noticed.

The hue (125°) is honest about what it is: not fern, not lime, not money green. It pairs with the stone canvas without competing, and stays distinctive against the warm grays that do most of the work.

5-stop ramp · semantic aliases swap by theme.

Brand-colored text is always text-brand-text — never text-brand. The chip fill (brand-200) is ~1.2:1 on light surfaces as text. Lint-enforced.

Marketing and app share the same discipline for everything except three things.

0.5px subpixel borders. 6px radius. One elevation level.

Shadows reserved for popovers and dialogs only.

Tokens: border-hairline all-sides, border-{t|r|b|l|x|y}-hairline directional. Never an arbitrary border-[…].

Two elevation tiers + one menu treatment. Neutral, no glow.

Tokens: shadow-raised / shadow-floating / shadow-popover, defined in packages/tailwind-config/shared-styles.css. The drops are identical in both modes; the popover hairline ring is themed per mode. The demos below render the live utilities.

Three variants plus a special count chip. Hierarchy goes outlined → subtle → categorical.

Categorical lives in its own palette (see Brand accent · categorical palette). Outlined + subtle share the same chip shape; only fill + text-weight differ. State-change moments that want emphasis (new, urgent, unread) use the count chip's recipe — brand-wash bg + brand-text — rather than a fourth neutral variant.

One convention, so a button's weight always means the same thing. Weight is fixed by role; width adapts to the label (with a shared min so a column of actions still aligns).

Filled default = the one action that moves you forward (Connect, Import, Request). surface = the grey secondary on any white card (Manage, Disconnect, Share, a done state). ghost = icon + row controls. Never put outline on a card — it's for non-card chrome. Full reference: docs/brand/buttons.md.

Phosphor, Regular weight only.

All icons render through <Icon>, which defaults to weight="regular".

150–200ms, ease-out.

No bounce, no spring.

Baked into the transition defaults (--default-transition-duration 200ms + ease-out) — a bare transition-* utility is already brand-correct. Declare a duration/easing only to intentionally diverge.

Photo treatment, illustration policy, and where each applies.

Marketing scope. Product UI uses no imagery beyond avatars and icons.

Who we're designing for.

Distinct from the landing page's investor / client / hire rows — those are marketing slots, not foundational personas.

Three voices the agent can take. Default donna.

Tone only — capabilities are identical. Voice rules below always win.

Source: packages/agent-core/src/persona-catalog.ts.

How the brand speaks. Applies to every agent reply, marketing line, and UI label.

Canonical source: docs/brand/voice.mdx. The principles below are a synced snapshot of its core rules.

Hover any rule for approve · edit · dismiss. Picks live in localStorage.

What to call things. What to avoid.

Lexicon = copy / voice level — the words the brand says (you not users, agent not assistant). Drives consistency across copy, product UI, and agent replies.

Glossary = technical / internal — definitions of company-specific concepts (signals, opportunities, relationships). Lives elsewhere; don't conflate.

The three-area shell + single-page detail view + persistent agent rail. Locked structural decisions for the noticed app.

The anatomy that used to live in design-layout.md. URL patterns + keyboard nav + terminology lock.

Documented to prevent re-litigation. Visual and layout decisions considered and dropped on the way to the current system.