#0B0C0EPrimary text / dark fieldsAP / Design system / Version 1.0
Clarity with a controlled blind spot.
A scalable system for founder-facing thought leadership. Editorial enough to hold a point of view, disciplined enough to build trust.
- Voice
- Direct / reflective
- Audience
- Founders / owners
- Accessibility
- WCAG AA target
- Base unit
- 4px
01 Foundations
Color is a signal, not decoration.
Paper and carbon carry the argument. Cobalt marks decisions and revelation. Ember adds a small amount of human heat.
#F3F2EDPrimary canvas#0647FFAction / selection / focus#C7C8C5Borders / quiet surfaces#62666BSecondary text#D45B35Human accent / alertRecommended proportion
Blue should feel discovered, not flooded. Never use ember and cobalt as competing calls to action.
02 Typography
Public clarity. Private reflection.
Public Sans handles navigation, systems, and decisive statements. Newsreader slows the eye for ideas that deserve attention.
Build what the next decision requires.
Regular 400Semibold 600ExtraBold 800Black 900
Clarity is not certainty. It is the ability to see the next responsible move.
| Token | Size | Use |
|---|---|---|
| Display XL | 72-176px | Hero name / one per page |
| Display L | 56-112px | Major editorial statement |
| Heading 1 | 44-80px | Page and article title |
| Heading 2 | 34-64px | Section thesis |
| Body L | 20-24 / 1.45 | Leads and summaries |
| Body | 16-18 / 1.65 | Reading and interface copy |
| Meta | 11-12 / 1.2 | Uppercase labels only |
03 Layout
Editorial rhythm on a rational grid.
Asymmetry creates tension. Repeated edges, generous pauses, and a strict baseline keep it credible.
12 columns
32px outer margin, 20px gutter, maximum reading width 720px.
8 columns
24px outer margin, 16px gutter, simplify asymmetric compositions.
4 columns
18px outer margin, 12px gutter, no horizontal overflow.
Spacing scale
1 / 42 / 83 / 124 / 166 / 248 / 3212 / 4816 / 6424 / 9604 Components
Commands look like commands.
Components are square, direct, and built for repeated use. Radius never exceeds 6px.
Buttons
Tags and status
Company buildingSelectedField note 01Open to dialogue
Form controls
Quote
Design the behavior, not only the artifact.
Operating principle 03
05 Imagery
Identity and metaphor, each once.
Portraiture establishes the person. A signature object then carries the central idea without repeating the same face or relying on a decorative overlay.
Do: assign each image one narrative role, preserve tactile grain, and let cobalt appear as a physical, meaningful interruption.
Avoid: repeating a portrait in the hero, generic stock scenes, half-width overlays, decorative lines, and blue accents without purpose.
06 Behavior
Motion reveals hierarchy.
Every movement should explain entrance, selection, or progress. Nothing bounces for attention.
160-220ms
Color, border, focus, and hover transitions. Use standard ease-out.
500-760ms
Opacity and vertical transform only. One coordinated reveal per viewport.
24-32s
Horizontal signal strips only. Pause when reduced motion is requested.
Non-negotiables
- Minimum 4.5:1 text contrast and 3:1 large-text contrast.
- Visible cobalt focus ring with a 3px offset.
- Keyboard access for every command and menu.
- 44px minimum touch targets on mobile.
- Semantic headings, labels, landmarks, and meaningful alternative text.
- Reduced-motion mode removes all nonessential animation.
- Body copy remains 16px minimum with 65-75 character line length.
- Validate responsive behavior at 375, 768, 1024, and 1440px.