Brand quick-reference

Metrica’s one-page brand cheat sheet. Grab a color, font, or the logo here — but treat it as a quick reference, not the master.

Palette (light mode)

Token	Hex	Use
`sea-ink`	`#173a40`	Primary ink — body text, logo backdrop, dark surfaces
`sea-ink-soft`	`#416166`	Muted ink — secondary text, captions
`lagoon`	`#4fb8b2`	Primary accent — CTAs, logo iris ring, highlights
`lagoon-deep`	`#328f97`	Accent on white — links, inline code, readable teal
`palm`	`#2f6a4a`	Secondary accent — logo center, kickers, success
`sand`	`#e7f0e8`	Soft neutral surface / tint
`foam`	`#f3faf5`	Lightest surface / page wash

Dark-mode overrides live in the .dark { … } block of the app stylesheets (frontend/src/styles.css, landing/src/styles.css). Keep those in sync with tokens.json.

Fonts

Role	Family	Weights
Display / headings	Fraunces	500, 700
Body / UI	Manrope	400–800
Mono / codes	ui-monospace stack	—

Loaded via Google Fonts @import in the app stylesheets. Fallbacks: Fraunces → Georgia → serif; Manrope → system-ui → sans-serif.

Logo — the aperture mark

The mark is a stylized camera aperture — a lagoon iris ring around a palm center on a sea-ink backdrop — echoing the product’s core idea (seeing through the cameras you already own).

SVG master: docs/design/logo/metrica-mark.svg. Edit this; export everything else from it.
PNG (transparent) for raster surfaces: email, favicon, social/OG, app icons. Never JPG (lossy, no transparency).
The React <Logo> component (landing/src/components/Logo.tsx) mirrors the master — update both together.
A maskable variant (logo/metrica-icon-maskable.svg) drives PWA/app icons.
theme_color #173a40 (sea-ink), background #f3faf5 (foam).

Positioning and messaging: Positioning
Competitive landscape: Competitors
Full design narrative and rules: docs/design/README.md and docs/design/DESIGN.md in the repo.