Documentation Index Fetch the complete documentation index at: https://partners.usecharlie.ai/llms.txt
Use this file to discover all available pages before exploring further.
Charlie’s design system is precise, restrained, and data-forward. No decoration that doesn’t earn its place. Use these specs whenever you represent Charlie in proposals, decks, or client-facing materials.
Logo. Charlie’s mark is an abstract character — two arcs, a vertical stroke, two oval forms — rendered in white. It works on ink and accent backgrounds. Never place it on light or paper surfaces.
Lockup — dark background White mark on ink (#0a0f1a). Primary usage.
Lockup — accent background White mark on accent (#0a66ff). For brand moments.
Usage rules.
Maintain clear space equal to the mark width on all sides.
Never stretch, rotate, recolor, or add effects to the mark.
White on ink or accent only — no exceptions.
Color. A cool blue-gray neutral ramp with a single signal accent. Status colors are intentionally desaturated so they do not compete with the UI.
Neutrals. Token Hex Use --ink#0a0f1aPrimary text, headings --ink-2#1a2233Secondary text, body copy --ink-3#4a5468Tertiary text, labels, captions --ink-4#78819aPlaceholder, muted metadata --line#dde1eaHairline borders, dividers --line-2#c8cdd9Secondary borders --paper#f4f5f8Page background, card fills --paper-2#edeff4Inset backgrounds, secondary panels --white#ffffffBase surface
Accent and status. Token Hex Use --accent#0a66ffLive indicators, active states, chart highlights --ok#147a43Fulfilled, success states --warn#b46200Pending, warning states --danger#a82436Error, critical states
Rules. The accent is used once per surface — for signal, not decoration. No gradients, no tints, no photography, no illustrations. Backgrounds are flat neutrals only.Typography. 2 typefaces. No exceptions.
Inter Tight. Used for everything humans read: headings, body copy, UI labels, buttons.
Style Size Weight Tracking Leading Display clamp(48px, 7.5vw, 112px) 500 -0.035em 0.98 H1 clamp(36px, 4.5vw, 60px) 500 -0.028em 1.02 H2 clamp(26px, 2.6vw, 36px) 500 -0.02em 1.1 H3 20px 500 -0.01em 1.25 Body large 17px 400 — 1.5 Body 15px 400 — 1.5 Body small 14px 400 — 1.55
JetBrains Mono. Used for system chrome: eyebrows, stat tags, order IDs, timestamps, data labels, any code.
Style Size Tracking Transform Eyebrow 11px 0.08em Uppercase
Tabular numbers globally via font-feature-settings: "tnum". Numbers always align.
Spacing. Token Value Use --gutter32px Horizontal page margins --section-y120px Vertical section spacing --card-pad32px Internal card padding --max-width1360px Maximum content width
Borders and radius. Charlie uses no border radius. All surfaces are sharp — no rounded corners anywhere.
Token Value Use --hairline1px solid #dde1ea Default dividers, card edges --hairline-21px solid #c8cdd9 Secondary borders --heavy1px solid #0a0f1a Emphasis borders
Voice. Technical, precise, confident. Charlie writes for operators and engineers as peers — not as support tickets.
Do.
Claim a position in the first clause. “Route every order against the policy that wins.”
Use numerals always: 14.8M orders/month, 120ms, $3,800/mo.
Pair a claim with its counter-claim. “Priced on GMV. Not per seat.”
Use domain vocabulary without glossing: GMV, 3PL, SKU, SLA, ASN, EDI.
Sentence case for all headings. End every heading with a period.
Don’t.
Exclamation marks. Em-dashes for drama.
Title Case in headings.
Hedging: “maybe”, “sort of”, “flexible pricing tailored to your needs”.
Filler adjectives: “game-changing”, “powerful”, “innovative”.
Emoji or unicode decoration.
Motion. 3 easings. No parallax, no spring physics, no Lottie.
Name Easing Duration Use Instant linear120ms Toggles, hover, chip selection Entrance cubic-bezier(.2,.7,.2,1)500ms Scroll reveals, element mount Transition cubic-bezier(.7,0,.3,1)400ms Page and panel changes
Materials.
Need materials now? Contact the Charlie team and we’ll send you what you need.
.svg?fit=max&auto=format&n=nIAp9EcHOreSlAhs&q=85&s=ad84a971c5fe155521ace6733c548d70)