Design system

Plume

A quiet, paper-white early-Macintosh desktop that comes alive. The canvas stays calm — mono neutrals, crisp type, 1px hairlines — so the personality can be loud: one warm terracotta accent and a cast of pixel birds. Restraint in color and type; energy in character.

Foundations

Color

Neutrals cover ~90% of every screen. Terracotta is a single pop per section — a primary CTA, the active nav link, a key highlight, or a bird's beak and feet. Sage is reserved for success states only; it is not a second brand accent.

Paper

#F8F6F1

The page itself.

Surface

#FFFFFF

Cards, windows, raised things.

Sunk

#EFEBE2

Recessed wells, icon mats, code chips.

Ink

#1A1813

Primary text & pixel outlines.

Ink-2

#55514A

Body copy.

Ink-3

#8A857A

Muted labels, captions.

Hairline

#E2DDD2

Divider lines.

Border

#CFC8B8

1px component borders.

Accent · fill

#E0915E

Fills only — buttons, active states, beak/feet.

Accent · text

#A85731

Links & accent text (AA on paper).

On-accent

#2A1A10

Ink placed on a terracotta fill.

Success · sage

#8FAA8B

Success states only. Not a 2nd accent.

Phosphor · paper

#141210

Dark-mode page. Accent stays terracotta.

Phosphor · surface

#1E1B16

Dark-mode cards & windows.

Phosphor · ink

#F2ECDD

Dark-mode text.

Phosphor · accent

#E8A06F

Terracotta, with a faint glow.

Foundations

Type

Pixel display, clean body. The pixel fonts carry the personality; the body font carries the reading. Never set body copy in a pixel font. Scale: H1 44–52 / H2 28–32 / H3 18–20 / eyebrow 11 (tracked caps) / lede 19 / body 16·1.6 / small 13.

DisplayPixelify Sans

Every group chat, fluent.

Headings and display. A legible pixel face — characterful, not blocky.

Micro-labelsSilkscreen

Smart translation · v2 capabilities

Eyebrows, badges, pills, and the logo wordmark. Used small and tracked.

BodyKarla

PlumiBot reads the room for context, keeps replies clean, and lets everyone just talk — a calm, humanist grotesque that stays comfortable at paragraph length.

All running copy. Chosen for warmth and readability.

CodeJetBrains Mono

!digest 3h · !login · NT$0

Commands, code chips, and pixel numerals in stats.

Iconography

The pixel-bird cast

Instead of generic glyphs, each capability has its own bird — a small guide drawn on one shared front-facing template so the flock reads as a family. They share the ink outline; identity comes from color and one bold feature. The original carrier pigeon stays the sole brand logo; these are its guides. Every sprite is downloadable as a 256px transparent PNG.

Swallow

124 languages · global teams · pills

The barn swallow crosses continents — it carries the promise of global reach.

↓ plumi-swallow.png

Dove

clarity & context · couples & families

Olive sprig in its beak — for clarity, context, and the people who love across languages.

↓ plumi-dove.png

Canary

voice → text

The songbird, mid-note — voice notes transcribed and translated.

↓ plumi-canary.png

Owl

image OCR · learners & travelers

Spectacled and studious — it reads menus, signs and documents, and helps you learn.

↓ plumi-owl.png

Parrot

mini-games

Loud, colorful and playful — the face of Word Chain and Translation Duel.

↓ plumi-parrot.png

Magpie

stats & referrals · dashboard

A collector of shiny things — it keeps the tallies, leaderboards and referral counts.

↓ plumi-magpie.png

Plume

summaries · digests

The namesake feather — a quill for summaries and the on-demand digest. It is the brand's glyph.

↓ plumi-feather.png

Building blocks

Components

Sharp UI, rounded windows: 2px radius and 1px hairlines on everything except the signature Mac window, which rounds its top corners. Shadows are hard offsets with no blur; buttons depress to a flush 0,0 on click.

Buttons

Primary Ghost Small

Terracotta fill for the one primary action; ghost (hairline) for everything secondary.

Pills & badges

124 languages New Beta

Silkscreen/mono labels for quiet metadata; a bird can ride a pill for warmth.

Code chip

!digest 3h !login

Commands sit in a sunk chip in JetBrains Mono, copy-on-click on the live site.

window.app

The Mac window frames demos, screenshots and the live-translate box — striped title bar, pixel close/zoom squares, ~9px top radius.

Rules of thumb

Principles

One pop per section. If terracotta appears twice in a viewport, one of them is probably wrong.
Pixels for character, not for reading. Display and labels only; body is always Karla.
Sharp UI, rounded windows. 2px radius everywhere; the Mac window is the one soft frame.
Hard shadows, no blur. A 2px offset in warm black — the light is a desk lamp, not a spotlight.
The flock is a family. New icons reuse the shared bird template; identity is color + one feature.
The pigeon is the logo. The carrier pigeon is the brand mark; the cast are section guides, never logos.
Accessible by default. AA contrast (accent text is #A85731), visible focus rings, 44px taps, motion freezes under reduced-motion.
Terracotta in both modes. Phosphor dark mode swaps the neutrals; the accent stays terracotta.