Brand Guidelines

Hamster is product delivery for AI natives. These guidelines keep our identity consistent — fast, direct, and engineered. This is a living document; today it covers the foundations: logo, colour, and typography.

Version 0.13.0 Updated June 2026 Source Hamster Design System (Figma)

Foundations

Logo

The Hamster identity is a four-part organic mark — four paths orbiting a central node — paired with the Agrandir wordmark. The mark may be used on its own once brand recognition is established. Give it room: keep clear space of at least the height of one mark dot on all sides.

Primary lockup — on dark shell

Primary lockup — on light / paper

Icon mark — app icon, favicon, avatar

Do

Keep the mark monochrome — ink on light, white on dark.
Maintain minimum clear space and a 24px minimum mark height.
Use the supplied SVG so the mark stays crisp at any size.

Don't

Recolour, add gradients, or apply shadows to the mark.
Stretch, rotate, or rearrange the four paths.
Place the lockup on a busy or low-contrast background.

Foundations

Colour

Hamster runs on a dark, high-contrast OKLCH palette — a terminal-like focus for AI-native builders. Neutrals carry the interface; accents are reserved for high-signal status. Colours are defined in OKLCH (with HSL for the core neutral shells) to match the production design tokens.

Core / Neutrals

Shell (neutral-990)

hsl(0 0% 8%)

Panel (neutral-980)

hsl(0 0% 9%)

Border (neutral-970)

hsl(0 0% 13%)

Muted ink

oklch(0.705 0.015 286.067)

Ink / Foreground

oklch(0.985 0 0)

Paper (light shell)

hsl(60 9.1% 97.8%)

Stone — warm greyscale (brand base)

Our greyscale is intentionally warm. In light mode the lightest stones read as soft off-white rather than pure white; the dark scale carries a subtle warm tint. This is the foundation for the Topo device while the brand stays greyscale. Sourced from the Hamster Studio default tokens.

Stone 50 (off-white)

hsl(60 9.1% 97.8%)

Stone 800

oklch(0.27 0.01 34)

Stone 850

oklch(0.245 0.01 45)

Stone 900

oklch(0.22 0.01 56)

Stone 925

oklch(0.185 0.01 53)

Stone 940

oklch(0.167 0.01 51)

Stone 950

oklch(0.15 0 49)

Status / Accent

Reserved for high-signal status, used sparingly against the greyscale base. These are the same colours as the status badges — one set, shared by tokens and badges (the product's @kit/ui variants).

Success · green

oklch(0.723 0.219 149.579)

Warning · orange

oklch(0.705 0.213 47.604)

Destructive · red

oklch(0.637 0.237 25.331)

Info · blue

oklch(0.623 0.214 259.815)

Violet · Electric Orchid

oklch(0.606 0.25 292.717)

Fuchsia

oklch(0.667 0.295 322.15)

Foundations

Typography

Two typefaces carry the brand. Agrandir sets display and headline type — bold, confident, with tighter tracking and font-stretch: 80% for founder energy. Everything functional uses the native system UI stack for speed and maximum legibility.

Agrandir

Display & headlines · weight 500 · font-stretch 80% · line-height 1.2

System UI

Titles, body & labels · -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif

Display · Agrandir · 500 · 36–56px · 1.2 · stretch 80%

Deliver the last mile

Headline · Agrandir · 500 · 24–36px · 1.2 · stretch 80%

Product delivery for AI natives

Title · System UI · 500 · 18px · 1.4

Get clear on exactly what to build

Body · System UI · 400 · 16px · 1.75

Hamster focuses on the inputs — customer, team, analytics, strategy — and on team alignment before building software, so the last 20% of delivery stops being the hard part.

Label · System UI · 500 · 14px · 1.25

Connect GitHub

Components

Status badges

Status is shown with a small badge — a coloured dot and a label on a tinted pill (15% fill, coloured text). Colours align with the product's badge variants (@kit/ui). The delivery workflow runs through them: Draft → Refining → Shipping → Shipped, with warning, destructive and info for state. Never rely on colour alone — the label always states the status.

Draft Refining Shipping Shipped Blocked Off track Indexing

Fuchsia — Refining — shaping the work before delivery.

Violet — Shipping / delivering. The Electric Orchid accent.

Success — shipped, done, on track, achieved.

Warning — blocked or at risk — needs attention.

Destructive — off track, missed, or a destructive action.

Info — system activity: indexing, syncing, in progress.

Neutral — draft, archived, idle. No colour signal.

Components

Cards, depth & outlines

Depth is built from stacked stone surfaces and a 1px hairline — not drop shadows. Each step up the elevation scale is a lighter surface on the same warm greyscale; a hairline border defines the edge and the --radius token (0.65rem) rounds it. Opacity is reserved for overlays and muted text.

00 · base

Shell

hsl(0 0% 8%)

01 · raised

Panel

hsl(0 0% 9%)

02 · raised

Panel-2

hsl(0 0% 13%)

outline

Hairline only

1px var(--hairline)

overlay

Ink @ 6%

color-mix · opacity

Surfaces — shell → panel → panel-2; lighter reads as closer.

Outlines — a single 1px hairline at --radius; no double borders.

Opacity — overlays and muted text only; tints via color-mix.

No shadows — depth reads from surface + hairline, staying flat and engineered.

Components

Loading states

Two patterns. A spinner for short, indeterminate waits; a skeleton for content about to arrive, mirroring its final layout. Both are greyscale — the accent spinner is reserved for connectivity actions. Motion stops under reduced-motion preferences.

Spinner — the Hamster mark in motion. Sizes sm · default · large, and muted.

Skeleton — shimmer placeholder matching the final layout