Reference DNA

Structure

Map-dominant single canvas; panels dock around the geographic surface

Navigation

Thin toolbar + layer toggles; the map itself is primary navigation

Information hierarchy

Geographic → events → detail; severity ranks attention

Typography roles

Compact sans for UI chrome; mono for coordinates/counts; no display type inside the workspace

Surface hierarchy

One deep background, translucent docked panels one step raised; no card nesting

Color

Neutral dark base + strictly semantic status hues (alert red, watch amber, ok green)

Borders

Hairline panel edges; separation mostly by luminance

Motion

Functional only — data refresh pulses, marker transitions; nothing decorative

Interaction

Hover reveals detail, click pins; keyboard layer toggles

Mobile

Collapses to stacked feed + mini-map; density intentionally reduced

The flagship DATA INTELLIGENCE DNA. Semantic color discipline is the core lesson.

Structure

Marketing: generous typographic folds; Dashboard: table-first project index

Navigation

Slim topbar with scoped tabs per project; breadcrumb identity

Information hierarchy

Project → deployment → log detail

Typography roles

Geist restraint — one family, weight does hierarchy work; mono for URLs/hashes

Surface hierarchy

Near-monochrome surfaces, 1px borders; raised = slightly lighter, not shadowed

Color

Achromatic black/white discipline; blue only as link/action; semantic hues tiny

Borders

1px solid borders everywhere; borders ARE the structure

Motion

Near-none; instant state changes, subtle skeletons

Interaction

Cmd+K everything; hover reveals row actions; inline feedback

Mobile

Tables collapse to cards; nav to sheet

Typography-restraint benchmark. Proof that monochrome + 1px borders reads premium.

Structure

Master-detail: dense list views + contextual right detail; command-first

Navigation

Icon side-rail + workspace switcher; Cmd+K as primary verb surface

Information hierarchy

Team → project → issue → activity

Typography roles

Single compact sans; size steps tiny (12–15px UI); weight + color carry hierarchy

Surface hierarchy

Flat dark surfaces, selection = subtle luminance shift; zero card chrome in lists

Color

Desaturated dark neutrals; per-status accent dots; brand purple confined to marketing

Borders

Almost none in-app — spacing and luminance separate regions

Motion

120–200ms micro-transitions; list reorder springs; never blocking

Interaction

Keyboard-complete; every action has a shortcut; optimistic updates

Mobile

Purpose-built reduced views, not squeezed desktop

Keyboard-first density benchmark. Selection-as-luminance is the core trick.

Structure

Command palette IS the app; list → action panel loop

Navigation

Type-to-filter universal; breadcrumbed drill-in; esc unwinds

Information hierarchy

Query → results → actions → detail

Typography roles

System sans at few sizes; mono for values; icons carry item identity

Surface hierarchy

One floating translucent panel over desktop; internal rows flat

Color

Dark glass neutral; accent used only for selection and key hints

Borders

Panel edge only; rows separated by hover luminance

Motion

Instant (<100ms) filtering; subtle push transitions between panels

Interaction

Entirely keyboard; ⌘K conventions defined here; actions discoverable via ⌘K submenu

Mobile

n/a (desktop native) — lesson transfers to palette components

INTERACTION DNA donor for the DNA mixer default.

Structure

Three-pane docs (nav / prose / code); dashboard = analytics workspace

Navigation

Deep persistent left tree + inline anchors; search prominent

Information hierarchy

Concept → guide → API field

Typography roles

Refined sans for prose at readable measure; mono heavily for API surface

Surface hierarchy

White paper + soft-tinted code panel; restrained shadows

Color

Light neutral + one brand accent used sparingly; semantic badges

Borders

Soft hairlines; generous whitespace does most separation

Motion

Essentially none; focus on instant navigation

Interaction

Copy buttons, language switchers, deep links — utility interactions only

Mobile

Panes collapse in order (code last); TOC becomes dropdown

Modern-minimal genre anchor (Hallmark's 'Stripe school'). Pure #fff allowed here.

Structure

Dark technical marketing: dense feature sections with data visualizations between typographic folds

Navigation

Slim topbar; anchor sections

Information hierarchy

Claim → capability → evidence (charts/code)

Typography roles

Modern sans hierarchy + mono for metrics; hierarchical weights over sizes

Surface hierarchy

Blacks/deep grays layered by luminance; abstract gradient fields kept behind content

Color

Dark neutral + neon blue/white accents at small footprint

Borders

Hairlines on data panels; gradients never on text

Motion

Restrained reveals; charts animate on entry

Interaction

Standard marketing + docs links; density itself signals competence

Mobile

Sections stack; charts simplify

How to be dark + dense without slop: gradients stay ambient, accents stay small.

Structure

Single 3D canvas world; shelf → book → page as spatial drill-in

Navigation

Direct manipulation (orbit/pan/zoom); no chrome nav at all

Information hierarchy

Collection → volume → spread

Typography roles

Typography lives ON the objects (spines, covers) as material, not UI

Surface hierarchy

Physical material hierarchy — cloth, paper, board — instead of cards

Color

Per-book color systems; scene-level neutral stage

Borders

None — physical edges of objects replace UI borders

Motion

Deterministic camera transitions; page-turn as procedural geometry

Interaction

Hover-inspect, click-open; accessible HTML controls layered over WebGL

Mobile

Touch orbit; reduced texture cost

NO LICENSE — study only. Lesson: material craft replaces UI chrome.

Structure

Character-centric stage: avatar canvas dominant, chat/controls docked

Navigation

Minimal chrome; modes switch the stage, not the page

Information hierarchy

Character presence → conversation → settings

Typography roles

Rounded anime-game UI type; oversized friendly labels

Surface hierarchy

Soft translucent panels over animated character background

Color

Anime pastel accents on dark or soft stage; character palette leads

Borders

Soft rounded panel edges; no hairlines

Motion

Live2D/VRM idle motion is the product; UI motion stays subordinate

Interaction

Voice-first + chat; playful hover states

Mobile

PWA; stage preserved, controls collapse

MIT. Character-as-hierarchy-root is the transferable idea.

Structure

Editor workspace: timeline bottom, preview center, chat rail — conversation drives edits

Navigation

Project-scoped workspace; tools contextual to selection

Information hierarchy

Media → timeline → clip → chat instruction

Typography roles

Compact UI sans; timecode mono

Surface hierarchy

Dark editor surfaces; preview is the brightest region

Color

Dark neutral + functional track colors

Borders

Hairline track dividers; panel splitters draggable

Motion

Scrub/preview motion is content; UI transitions minimal

Interaction

Chat-as-command plus direct manipulation fallback

Mobile

Not primary; review-only reductions

User runs private fork. Chat-rail + canvas is a reusable IA pattern.

Structure

Ambient presence: tiny persistent voice UI, expands only when engaged

Navigation

Almost none — presence, then contextual expansion

Information hierarchy

Listening state → transcript → action confirmation

Typography roles

Single friendly sans; state text large and short

Surface hierarchy

Floating pill/orb above OS; one expanded panel max

Color

Warm accent on neutral; state encoded in the orb

Borders

None — the orb's silhouette is the only edge

Motion

State-encoding motion (listening pulse, thinking shimmer) — motion IS the status system

Interaction

Voice primary, click secondary; interruptible always

Mobile

n/a native — pattern transfers to voice widgets

Motion-as-status is the DNA to steal (conceptually) for AI-state indicators.

Structure

Single artifact generator: input → hero card output → share loop

Navigation

One page, one loop

Information hierarchy

Identity → rating → attribute breakdown

Typography roles

Display numerals dominate; condensed stat labels

Surface hierarchy

The card is the only raised object; page is stage

Color

FIFA-card gold/team palettes; saturated but codified

Borders

The card frame is the only border; heavy and deliberate

Motion

Card flip/shine reveals; celebratory but brief

Interaction

Generate, flip, share; instant gratification loop

Mobile

Card-first, perfectly portrait

Codified-saturation lesson: loud color works when it follows a known artifact grammar.

Structure

Conversation-first split: thread list + active conversation

Navigation

Thread list is nav; search above

Information hierarchy

Contact → thread → message → attachment

Typography roles

Message text optimized for scanning; meta in muted small

Surface hierarchy

Bubbles vs flat log — restraint in bubble chrome

Color

Neutral base, sender-accent minimal

Borders

Hairline thread separators; bubbles carry no border

Motion

Arrival slide/fade only

Interaction

Composer-centric; enter-to-send discipline

Mobile

Single-pane stack with back navigation

Structure

Pro-tool marketing: clean folds, product screenshots doing the proof work

Navigation

Slim topbar, docs-forward

Information hierarchy

Claim → screenshot proof → integration path

Typography roles

Clean sans hierarchy, ample whitespace

Surface hierarchy

Light minimal; screenshots framed with hairlines (no fake chrome)

Color

Neutral + single accent

Borders

Hairline frames on screenshots only

Motion

Testimonial carousel only

Interaction

Standard marketing

Mobile

Stacked folds