Specification SYS-02 · Evidence OS · design system · v2
The system, documented as itself.
Evidence OS treats a portfolio as a working record: modular surfaces, sourced claims, logged decisions. v2 reduces the grammar on purpose: three signature devices carry the identity, one red-pen mark per case, and the stationery effects are retired. Structure first, texture second, and the texture stays in the margins.
SYS-02.A · Visual grammar — three devices sign the work
Each signature device owns one job. If a module needs a second device, the module is doing two jobs; split it.
Receipts = outcomes
Every quantitative claim, with source and scope attached.
Decision records = judgment
Alternative · why it won · what it cost. The crown jewel; never abbreviated.
Marginalia = caveats & reflection
Handwritten, red tick, 20px. Nothing essential ever lives in the margin.
Rule · RedPenCircle
At most one per case, always on the outcome panel’s key number, always with a small handwritten caveat. Two circles read as marketing.
Rule · horizontal lines
Rules mark structure, never rhythm: section tops, card frames, and table grids keep their hairlines. List items separate with whitespace alone; dotted leaders and dashed separators are retired (2026-07).
Rule · everything else
Stamps, pulls, route maps, and specimen frames support; they never sign. One per surface, at most.
SYS-02.B · Reading hierarchy
On any surface, content earns attention in this order. When two elements compete, the one higher in the chain wins the size, the position, and the contrast.
Story
prose · headers
›
Decision
records
›
Outcome
panels · receipts
›
Evidence
figs · sources
›
Caveat
marginalia
›
Metadata
refs · tags
SYS-02.C · Mono-caps usage limits
Mono caps may appear as
Kickers and section eyebrows.
Figure references and evidence sources.
Status labels: stamps, tags, chips.
Navigation and the theme toggle.
Nowhere else — specifically not
Body copy, deks, or pull quotes.
Headings of any level.
Whole sentences of any kind.
Anything a visitor must read to follow the story.
SYS-02.D · Type ramp
Display · Instrument Sans 700 · 48–58px · −0.025em · 1.1
Simple systems, receipts attached.
Heading · Instrument Sans 600 · 24–26px · −0.015em
Section heading, sentence case
Body · Inter 400 · 16px · 1.6
Body text carries the argument. It stays quiet, reads long, and never competes with the evidence it presents.
Quotes · Newsreader italic · 16–21px · 1.45–1.5
Quoted voices, pulled statements, and sourced corroboration read in Newsreader.
Note · Caveat · 20px · 1.32 · canonical handwritten
Margin notes speak in the author’s own hand, off to the side.
Label · IBM Plex Mono 500 · 10–12px · +0.09em · caps
Evidence receipt · fig. 1.1 · CS-01 · verified
SYS-02.E · Color tokens
paper
#F7F3EA · light bg
card
#FFFDF7 · raised surface
ink
#1C1A16 · primary text
ink-2
#5E574A · secondary text
moss
#33604A · verified metrics
amber
#B06E14 · decor (#8A5510 text)
stamp red
#A83A28 · stamps · fig refs
blueprint
#2C4E8A · routes · focus ring
dark paper
#151310 · dark bg
dark card
#1E1B17 · dark surface
dark ink
#EFE9DC · dark text
dark accents
#8CC7A6 · + E0A050 · E08472 · 93B0E3
Verified AA pairs (WCAG 2.1, normal text 4.5:1)
Pair
Theme
Ratio
Verdict
ink #1C1A16 / paper #F7F3EA
light
15.7:1
AAA
ink-2 #5E574A / paper #F7F3EA
light
6.4:1
AA
moss #33604A / paper #F7F3EA
light
6.5:1
AA
amber-ink #8A5510 / paper #F7F3EA
light
5.6:1
AA
stamp red #A83A28 / paper #F7F3EA
light
5.7:1
AA
blueprint #2C4E8A / paper #F7F3EA
light
7.4:1
AAA
text #EFE9DC / paper #151310
dark
15.4:1
AAA
ink-2 #B5AC9A / paper #151310
dark
8.2:1
AAA
moss #8CC7A6 / paper #151310
dark
9.6:1
AAA
amber #E0A050 / paper #151310
dark
8.2:1
AAA
red #E08472 / paper #151310
dark
6.8:1
AA
blue #93B0E3 / paper #151310
dark
8.5:1
AAA
SYS-02.F · Grid & spacing
Twelve columns, 1200px max width, 24px gutters at desktop. Bento modules sit on the grid with 1px hairlines and 2–4px radii. The reading column caps at 640px; marginalia takes a 220px gutter to its right.
Spacing scale: 8 · 14 · 24 · 36 · 64. Reuse these steps; gutters drop 24→16px on mobile and card padding drops one step, while section rhythm holds at 64px.
SYS-02.G · Component gallery
The full living specimen — every card, stamp, receipt, decision block, note register, work row, methodology drawer, and specimen frame, in every state — is maintained on the component-specimen page. Each component below documents one job:
Primitives
MarkNav
CM
BrandWordmark
Button
View case studies
→
NavLink
Chip
Evidence-first design
AskChip
StatusTag
Live
RailTab
01
Context
Stamp
Verified
NoteHand
Note to reader
Margin notes speak in the author's own hand, off to the side.
Rule
CornerTicks
The gates did the work.
RedPenCircle
40%
Content
SectionHead
ScopeFact
CardStat
BigNumber
MetricPill
Receipt
Corroboration
Assemblies
Header
CaseMeta
ScopeBlock
TLDRCard
DecisionBlock
DecisionLog
OutcomePanel
Ledger
ProjectCard
FeaturedCard
WorkRow
WorkRowCompact
LeadRow
SpecimenFrame
ContentsRail
MethodologyDrawer
Footer
SYS-02.H · Identity & icon set — locked 2026-07
Two marks, one tile, one reserved emblem. The primary lockup is the wordmark — “Cody Morrow” with a single red corner bracket (⌐, viewBox 24 · M3.5 3.5 H20.5 V20.5 · stroke 5.5 · rendered 0.68em) at its top-right; it owns nav and headers. P2 “shoulder anchor” — CM with a single red tick growing out of the M’s shoulder — is the icon mark everywhere under 24px.
Rule · which mark where
The wordmark lockup owns nav and headers; CM initials + tick (P2) are retained for small marks — favicon, social tiles, avatars, app icons. Never both marks on one surface.
Rule · the tile
When the context demands an opaque or app-shaped mark, use the tile: P2 reversed (cream + lifted red) on the ink square, rx 10, 5-unit padding. Never light master on ink or dark master on paper.
Geometry · P2, exact
Canvas 48×48 · CM Instrument Sans 700 · size 20.75 · tracking 0.2 · tick path M37.9 9.13 H44.9 V16.13, stroke 3.5 · light #1C1A16 + #A83A28 · dark #EFE9DC + #C96A57.
SYS-02.I · Card system (r3) — schema, variants, hover
One meta schema opens every card and row: REF · PROJECT · ORG · YEARS — TYPE. The ref token is red on every card. Titles are ink, sentence case, no periods.
Rule · V1 / V2 micro-variants
V1 (ref inline in the meta row) is standard for product and design cases. V2 (ref in a dashed left column) is reserved for leadership and practice-building cases — today, Measuring Design Impact only.
Rule · org naming
Org is always the company name alone: Verily, never Verily · Alphabet. A parent company may appear once in body copy, never in a kicker or title.
Rule · hover, all card types
Background tints to the hover fill; the title underlines in red (1.5px, 4px offset) while the CTA arrow nudges 3px right. Freestanding cards add a light shadow lift; rows take the fill only. 180ms, no border shift, no scale. :focus-visible adds the 2px blue outline.
Rule · numbering
One scheme everywhere a project appears: CS-00 through CS-05, identical on home cards, index rows, and case pages.
SYS-02.J · Mobile behavior
Two breakpoints do most of the work: 960px collapses layout, 640px drops density. Mobile is editorial reduction, not just stacking. Per component:
Component
What changes
Header nav
640px
Long labels swap to short; Home link hides on case views; wordmark subtitle hides. Targets stay 44px.
Contents rail
960px
Desktop rail becomes a sticky single-row tab bar; active tab tracks scroll.
Featured cards
860px
The trio stacks to one column; the CourseBook screenshot keeps its aspect ratio; V2 ref column persists at 56px.
How-I-lead rows
960px
Three columns become two: index stays left, behavior and proof stack right.
Work-index rows
700px
The right column (org · stat · link) drops under the one-liner and runs horizontal; red ref cells stay.
Scope block
960 / 640px
Five cells fold to two columns, then one. Color-coded labels stay.
Decision blocks
960px
Three cells stack; per-cell caps labels carry the structure.
Receipts & Ledger
640px
Card padding 26/28 → 20/16; labels 12 → 11px. Grouping and centered leader unchanged.
Route diagram
960px
The horizontal path hides; waypoints stack vertically joined by a dashed connector.
Margin notes
960px
The margin column folds into the reading column; notes keep their handwritten rotation, indented.
Mobile type ramp (390px)
display · 33px
case title · 32px
section head · 26px
case section · 24px
body · 16px
note · 20px
labels · 10–11.5px
SYS-02.K · Motion
Quiet, brief, always earning its place. Hover states 160ms (the unified card hover runs 180ms); standard transitions 200ms; marginalia fade-ins 280ms with an 8px rise, triggered once when a view opens. Easing is cubic-bezier(0.2, 0.6, 0.2, 1) everywhere. Cases carry a needle-thin 2px progress bar under the header. Under prefers-reduced-motion, everything nonessential is disabled and marginalia renders visible.
hover · 160ms
card hover · 180ms
standard · 200ms
marginalia · 280ms
ease · .2 .6 .2 1
SYS-02.L · Voice & microcopy
First person, calm, precise, annotated. Claims carry sources; caveats sit next to headlines, not in footnotes. Outcome language is attribution-honest: “beta partners completed tasks 20% faster,” never “my design reduced.” No hype, no vague scale words, real numbers only.
Metric caveat
“Measured with beta partners, not extrapolated.”
Missing data
“Not instrumented — ask me about the measurement setup.”
NDA boundary · reserved
“Confidential — no product UI here. I walk through the work live.” (No live use in v2.)
SYS-02.M · Do / don’t
Do
Pin a receipt, with scope, to every quantitative claim.
Ship a methodology drawer with every outcome panel.
Label influence versus execution in every case.
Keep texture in the margins; keep the reading column clean.
Don’t
Decorate with data you can’t source.
Restate a thesis a third time.
Use a second RedPenCircle anywhere in a case.
Fake age: no grunge, no coffee stains, no distressed type.
CMS note: cases, decision records, and metric pills map to Framer collections; the methodology drawer rides the case template as six plain-text fields.