Brand Pad
Visual identity, color system, typography, and data visualization language for the Unlikely Professionals platform.
01 Color System
Ink & Ground
Four ink values on a cream ground. Never clinical white. The warmth of #fffff8 lets the ink settle into the page like letterpress on cotton stock.
| Token | Hex | Usage |
|---|---|---|
| Background | #fffff8 | Primary background |
| Warm | #fafaf2 | Secondary background |
| Parchment | #f5f0e6 | Deep background |
| Ink | #1a1a1a | Body text, headings, rules |
| Ink Light | #4a4a4a | Secondary text, labels |
| Ink Lighter | #7a7a7a | Tertiary text, metadata |
| Ink Faint | #b0b0b0 | Disabled, hints, placeholders |
Rules & Dividers
| Token | Hex | Usage |
|---|---|---|
| Rule | #e0ddd4 | Subtle dividers, table borders |
| Rule Strong | #c8c4b8 | Section headers, emphasis rules |
| Card | #f7f6f0 | Floating cards, panels |
| Panel | #f5f4ee | Sidebar cards, insets |
Brand Accents
| Token | Hex | Usage |
|---|---|---|
| Gold | #c9a227 | Brand highlight, certified |
| Accent | #8b0000 | Sparse emphasis, alerts |
| Green | #5a8a5a | Success, pass, paid |
| Teal | #4a9a7a | Ready for cert |
| Purple | #7a6a9a | Field complete |
| Slate Blue | #5a7a9a | UI elements, scheduled |
Pipeline Status Colors (8 Stages)
| Stage | Color |
|---|---|
| Intake | #a0896a |
| Scheduled | #6a8aaa |
| In Progress | #5a8a6a |
| Field Complete | #7a6a9a |
| Ready for Cert | #4a9a7a |
| Certified | #c9a227 |
| Invoiced | #5a7a5a |
| Closed | #4a4a4a |
Pipeline indicator component: completed stages fill with their status color. Current stage pulses with a ring. Future stages are muted. The label sits at the current dot.
Branch Identity
| Branch | Color | Code |
|---|---|---|
| Baltimore | #b8a038 | BAL |
| Manassas | #5a7a9a | MAN |
| Richmond | #b85450 | RIC |
| North Haven | #7a9a7a | NOR |
Chart Palette (TUFTE_COLORS)
Twelve muted earth tones, distinct but never loud. Used by the friday-ai chart service:
#c9a227 #5a7a9a #7a6a9a #4a9a7a #c0392b #6a8aaa #8a6a4a #5a8a6a #9a7a6a #4a5a6a #6a5a7a #3a6a5a
Functional States
| State | Usage |
|---|---|
| Paid | Green tint |
| Partial | Gold tint |
| Unpaid | Red tint |
| Pending | Gray tint |
| Matched | Teal tint |
| Active | Blue tint |
| Error | Accent red |
Functional badges use desaturated tints. Text color is a darkened variant of the background. Never saturated or neon.
02 Typography
Three typefaces, each with a clear role:
| Typeface | Role | Usage |
|---|---|---|
| Crimson Pro | Serif | Body text (300 weight, 14.5px, 1.65 line-height), headings (600), page titles (300, 27px), italic for quotes |
| Source Sans 3 | Sans-serif | Interface text (400, 13px), section labels (600, 10.5px, 2px letter-spacing), company mark |
| JetBrains Mono | Monospace | Data values, timestamps, code, project IDs, counts |
Hierarchy
- Page title: Crimson Pro 300, 27px
- Section heading: Crimson Pro 600, 17px
- Section label: Source Sans 3 600, 10.5px, uppercase, 2px letter-spacing
- Body: Crimson Pro 300, 14.5px
- UI text: Source Sans 3 400, 13px
- Data: JetBrains Mono 400, 12px
- Company mark: Source Sans 3 600, 10.5px, uppercase, 2.8px letter-spacing
Design Principles
See design-principles for the full Tufte-based design system. All components follow the six core principles: brutal simplicity, multivariate display, small multiples, sparklines, escaping flatland, and data-ink ratio.