Skip to main content
Charlie’s identity centers on a hand-drawn face mark — two closed eyes, a nose, two cheeks — rendered in a chalky, organic style on deep forest green. That warmth is the deliberate counterweight to a precise, operational product. Use these specs whenever you represent Charlie in proposals, decks, or client-facing materials.
Primary color is deep forest green #0F5C45. The typeface is Inter. The tone is precise, calm, and operational — Polaris-grade density with a warmer personality.
The mark is white on the brand green. It is the only illustrative element in the system — everything else stays clean and flat. Never recolor, stretch, rotate, or add effects, and always keep clear space equal to the mark’s width on every side.

Primary — white on green

White mark on #0F5C45. Primary usage on dark and brand surfaces.

Reversed — green on white

Green mark (#0F5C45) on white. For light backgrounds and documents.

Mono dark

Dark mark (#0D1F1A) on white. For single-color print and stamps.

Mono light

White mark on a neutral tile. For photography and dark imagery.

​
Color.

A five-step green primary scale and a six-step neutral ramp, with muted status colors that never compete with the UI. Flat, solid fills throughout — no gradients in the product, with one exception: the signature title gradient below.

​
Primary scale.

primary-400 (#0F5C45) is the action color. primary-500 (#072E23) anchors headings and the deepest surfaces.

​
Neutral scale.

​
Semantic tokens.

​
Status colors.

Muted, not saturated — background plus text, paired.

​
Signature title gradient.

Reserved for hero titles only — never body, never UI.

​
Typography.

Inter for everything humans read. DM Mono for code, order IDs, timestamps, and data labels. Tight letter-spacing at large sizes, slight positive tracking at small sizes. Maximum weight is 600 (Semibold) — no bold (700) anywhere in the system.

​
Spacing.

A 4px base unit — every value is a multiple. Dense but not cramped: table rows ~44px, sidebar items ~36px, inputs ~40px.

​
Borders and radius.

Default radius is 4px; 6px maximum for larger containers and modals; pill (9999px) only for status badges and toggles. Never exceed 8px on any element. Borders are 1px solid, never thicker — #C4CCC8 in light mode, #1A3D2B in dark mode.

​
Shadows and elevation.

Three levels only. Shadows use green-tinted black (rgba(13, 31, 26, …)), never pure black. No blur or glass effects.

​
Iconography.

Lucide icons, stroke-only at 1.5px weight — 24px default, 20px for nav, 16px inline. No filled icons, no emoji, no custom icon font.

​
Dark mode.

A full token inversion with green-tinted darks. Page background #0A1A15, surfaces #0F2318, borders #1A3D2B, primary text #F0FAF6, and the action color brightens to #2EAD85.

​
Voice.

Professional and calm. Charlie writes for operators as peers — direct, second person, sentence case everywhere.

Do

Sentence case for all UI text. Action-oriented buttons (verb + noun): “Create order”, “Route shipment”. Past participle for completed states (“Fulfilled”, “Routed”), present participle for in-progress (“Pending”, “Processing”). Numerals always.

Don't

Exclamation marks or urgency language. Title Case or ALL CAPS (except short badges like “DRAFT”). Emoji. Filler adjectives: “game-changing”, “powerful”, “innovative”. Bold weight above 600.

​
Materials.

Need assets or the full design system?

Contact the Charlie team and we’ll send you logos, tokens, and templates.