Unlikely Professionals

This document defines the complete visual vocabulary for the Mostly Unlikely platform, the unlikely.guide reference site, and all public-facing materials. Every color, typeface, component, and chart follows Edward Tufte's design principles filtered through our own visual language—warm, dense, flowing, honest.

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.

#ffffff — clinical

#fffff8 — ours

#fafaf2 — warm

#f5f0e6 — parchment

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

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

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

Intake#a0896a

Scheduled#6a8aaa

In Progress#5a8a6a

Field Cmp#7a6a9a

Ready Cert#4a9a7a

Certified#c9a227

Invoiced#5a7a5a

Closed#4a4a4a

Ready for Cert

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

Baltimore#b8a038JES Baltimore — BAL

Manassas#5a7a9aJES Manassas — MAN

Richmond#b85450JES Richmond — RIC

North Haven#7a9a7aGroundworks CT — NOR

Chart Palette — TUFTE_COLORS

Twelve muted earth tones. Distinct but never loud. Used by the Friday chart service for all rendered visualizations.

#c9a227

#5a7a9a

#7a6a9a

#4a9a7a

#c0392b

#6a8aaa

#8a6a4a

#5a8a6a

#9a7a6a

#4a5a6a

#6a5a7a

#3a6a5a

Functional States

Paid Partial Unpaid Pending Matched Active Error

Functional badges use desaturated tints. Text color is a darkened variant of the background. Borders match the family. Never saturated or neon.

02 Typography

Three typefaces, each with a clear role. Serif for reading, sans for interface, mono for data.

Crimson Pro 300
Body · 14.5px · 1.65

Structural engineering inspection for 123 Elm Street, Baltimore. Push pier installation with 6 piers to bedrock at 22–28 feet. Field complete, pending certification by John C. Valerio, PE.

Crimson Pro 400 Italic
Quotes · 15px

“Above all else, show the data.”

Crimson Pro 600
Headings · 17px

Certification Pipeline — Post-Production Review

Crimson Pro 300
Page title · 27px

Design Principles

Source Sans 3 600
Section label · 10.5px

Pipeline Status Colors — 8 Stages

Source Sans 3 600
Company mark · 10.5px

Unlikely Professionals

Source Sans 3 400
UI text · 13px

3 open RFIs · 12 projects scheduled · $45,200 pending reconciliation

JetBrains Mono 400
Data values · 12px

        BALT-9001 · $5,200.00 · 2026-03-24 · #c9a227
      

JetBrains Mono 300
Hex values · 9.5px

        66f7a2b1c3d4e5f6a7b8c9d0e1f2 · smartsuite_record_id
      

Rule: Crimson Pro for anything a human reads in paragraphs. Source Sans 3 for anything a human scans (labels, nav, badges). JetBrains Mono for anything a machine generated (IDs, amounts, dates, hex values).

03 Navigation

Dark sidebar, 200px wide. Group labels are color-coded by function. Active item is cream on ink.

Daily Work

Dashboard

Calendar

Projects

Monitoring

Cert Pipeline

Inbox

Taskforce Triage

Triage Intake

Tracker

Reconciliation

Payments

Beta Features

Visual Workflow

--nav-bg: #1a1a1a (ink)
--nav-text: #a0a0a0 (inactive)
--nav-text-active: #fffff8 (cream)
--nav-width: 200px

Group label colors signal function:
Gold #c9a227 — Taskforce Triage
Sienna #9a7a6a — Beta Features
Default #666 — Standard groups

04 Visual Language

Tufte gives us the rules. These choices make the work ours—drawn from visualizations we find stunning and want to emulate.

Minard, 1869

Six variables, no legend. The band is the army.

Pop/Rock Genealogy

Genres flow like strata. Labels embedded in the river.

Network Growth

Monochrome dots on cream. Density is the data.

University Sankey

Three views unified: scatter → summary → flow.

Computation Timeline

Bubbles sized by significance, connected by lineage.

Earth-Tone Streamgraph

Data flows like geological strata. No legend needed.

Disk Space Radial

Overview radial + small multiple breakdowns.

Layered Data Cosmos

Multiple chart types coexist. Color bleeding creates depth.

Data as Material

Data should have the visual weight of a physical substance. When data flows, merges, splits, and fades, the shape is the story.

Warm monochromatic strata. Streamgraphs, alluvial/Sankey, network graphs, connected bubble timelines—these give data a physical presence that bar charts cannot.

Density as Beauty

Information density is not clutter. Clutter is decoration without data. Density is data without decoration. Don’t simplify by removing data—simplify by removing everything that isn’t data.

Labels in the Data

Label text inside stream bands
Destination names at flow endpoints
Year labels along the left margin
Status label under the current pipeline dot
Values directly on data points

Don't

Separate legend box
Color key requiring cross-reference
Footnotes explaining what colors mean
Tooltip-only labeling
Alphabetical legends disconnected from data

05 Data Visualization

Six Tufte principles govern every chart, dashboard, and data display.

The Six Principles

01	Brutal Simplicity	Every element encodes data or gets removed
02	Multiple Variables	Encode 4–6 dimensions: position, color, size, shape, border
03	Small Multiples	Identical charts, different slices, same scale
04	Sparklines	Word-sized inline graphics, data-ink ratio = 1.0
05	Escaping Flatland	2D encoding strategies, never 3D charts
06	Data-Ink Ratio	Maximize data ink, erase everything else

Data-Ink Targets

0.25

Poor — heavy decoration

0.55

Typical — chart tool defaults

0.80

Target — dashboards

1.00

Sparklines — zero non-data ink

Sparklines — Live Examples

Revenue trend $142K

Cert cycle (days) 2.4d avg

RFI aging 7 open

No axes. No labels. No legend. The sparkline sits inline like a word. Context comes from the surrounding row. Data-ink ratio = 1.0.

Flow Forms

Alluvial flow. Bands widen and narrow as projects move through the pipeline. Labels sit inside the stream. Color encodes stage. Width encodes volume. No legend, no gridlines, no border.

06 Component Patterns

Masthead

Unlikely Professionals

Page Title Here

Subtitle in italic Crimson Pro

Company mark (Source Sans 3 600, 10.5px, 2.8px tracking, uppercase) → title (Crimson Pro 300, 24–32px) → subtitle (Crimson Pro 400 italic) → double rule (2.5px + 0.5px hairline, 4px gap).

Section Head

03 Section Title

Number (Source Sans 3 600, 10px, faint) + title (Source Sans 3 600, 11px, 2.2px tracking, uppercase) on a 0.5px rule. Consistent across all guide pages, design-principles.html, and this brand pad.

Calendar Event

123 Elm St

Darius · Push Piers

456 Oak Ave

Dustin · Wall Anchors

Branch color = 3px left stripe. Status color = background tint. Red dot = open RFI. Two dimensions encoded without any legend.

07 Pre-Ship Checklist

Before any UI, chart, or data display goes live

Data-ink ratio ≥ 0.7 (dashboards) or 1.0 (sparklines)
No chartjunk — no 3D, gradients, shadows, decorative gridlines
Small multiples used for branch/month/category comparisons
Sparklines used for trend data in table rows
3+ variables encoded via position, color, size, shape, border
No 3D charts — 2D encoding strategies only
Color encodes data, not decoration
Data labeled directly — no separate legend box when avoidable
TUFTE_COLORS palette used — no arbitrary colors
Backgrounds are cream (#fffff8), not clinical white
Temporal data uses flow forms where appropriate
Labels embedded in the data, not in a separate box
Density serves the data — every mark encodes something real
Warm organic palette — earth tones, monochromatic families

Brand Pad