name: equity-lens-design
version: alpha
description: >
  A dark editorial people-analytics report styled as an Isotype/ISOTYPE
  pictogram broadsheet. The surface is a near-black plum-to-ink vertical gradient
  (#1A1620 → #130F18 → #0E0B12) lit by three soft radial glows (plum, ochre,
  moss) and overlaid with a faint screen-blend film grain. Everything is drawn in
  warm parchment ink (#ECE6DA) with three muted "voltage" data hues — plum
  #B07AB0, ochre #E0A868, moss #86A586. The signature move is the isotype
  pictogram: a custom masked person glyph repeated in grids to encode counts
  ("1 figure = 42 candidates"). Type is a three-face editorial system — Space
  Grotesk display, Archivo body, IBM Plex Mono for every number and label. The
  geometry is strictly rectilinear: zero border radius, full-width hairline rules,
  bordered table-like panels, and a giant gradient chapter numeral.
colors:
  # Surface
  surface-top: '#1A1620'       # body gradient stop (top)
  surface-mid: '#130F18'       # body gradient stop (mid)
  surface-bottom: '#0E0B12'    # body gradient stop (bottom)
  panel-fill: 'rgba(236,230,218,0.02)'  # stage-card / frame-soft faint panel wash
  header-fill: '#241E2B'       # table header rows, divider rules, hover-base bg
  # Brand / Data voltages
  plum: '#B07AB0'              # Group A data fill, active stage border/glow
  plum-bright: '#C79AC7'       # plum text accent, chapter glyph gradient start, spark stroke
  ochre: '#E0A868'            # Group B data fill, "Delayed" status, deltas
  moss: '#86A586'             # Group C data fill, "On track" status, Live dot
  moss-bright: '#9CBF9C'      # moss text accent
  # Text
  ink: '#ECE6DA'              # primary parchment text, hairlines, pictogram fill
  ink-on-light: '#16121C'     # text on light (active tab / status chips / ink fills)
  # Hairlines / muted
  ink-muted: 'rgba(236,230,218,0.6)'    # mono labels, captions
  ink-faint: 'rgba(236,230,218,0.18)'   # pictogram "fade" / empty-state figures
  hairline: '#ECE6DA'                    # solid full-strength border rules
  hairline-soft: 'rgba(236,230,218,0.2)' # softer interior dividers
  # Gradient
  chapter-gradient: 'linear-gradient(160deg, #C79AC7 0%, rgba(176,122,176,0.35) 38%, rgba(236,230,218,0.06) 100%)' # giant chapter numeral
  eyebrow-gradient: 'linear-gradient(90deg, #B07AB0 0%, #E0A868 38%, #86A586 70%, rgba(236,230,218,0.18) 100%)'    # 2px eyebrow rule
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.02em
  chapter-numeral:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 220px
    fontWeight: 500
    lineHeight: 0.82
    letterSpacing: -0.04em
  section-head:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 36px
    fontWeight: 500
    letterSpacing: -0.01em
  body:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  metric:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:                      # near-zero radius system; only the live/legend dots are round
  none: 0px
  dot: 99px
  full: 9999px
spacing:                      # base unit 4px; section rhythm in 8px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  section: 56px
components:
  utility-bar:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    borderBottom: '1px solid {colors.hairline}'
    typography: '{typography.mono-label}'
    padding: '12px 32px'
  metric-card:
    backgroundColor: '{colors.panel-fill}'
    border: '1px solid {colors.ink-faint}'
    typography: '{typography.metric}'
    padding: '18px 18px 16px'
    rounded: '{rounded.none}'
  stage-card:
    backgroundColor: '{colors.panel-fill}'
    border: '1px solid rgba(236,230,218,0.22)'
    rounded: '{rounded.none}'
    padding: '20px'
    activeBorder: '1px solid {colors.plum}'
    activeBackground: 'rgba(176,122,176,0.16)'
  tab-btn:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid rgba(236,230,218,0.3)'
    typography: '{typography.mono-label}'
    padding: '8px 16px'
    activeBackground: '{colors.ink}'
    activeText: '{colors.ink-on-light}'
  kicker-pill:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid rgba(236,230,218,0.32)'
    typography: '{typography.mono-label}'
    padding: '4px 10px'
    rounded: '{rounded.none}'
  status-chip:
    backgroundColor: '{colors.moss}'   # moss=On track, ochre=Delayed, ink=Complete
    textColor: '{colors.ink-on-light}'
    typography: '{typography.mono-label}'
    padding: '4px 10px'
    rounded: '{rounded.none}'
  table-header:
    backgroundColor: '{colors.header-fill}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    padding: '12px'
  data-table-row:
    backgroundColor: 'transparent'
    borderBottom: '1px solid {colors.hairline-soft}'
    hoverBackground: 'rgba(236,230,218,0.06)'
    typography: '{typography.body}'
  download-button:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.hairline}'
    typography: '{typography.mono-label}'
    padding: '10px 16px'
    hoverBackground: '{colors.header-fill}'
motion:
  table-row-hover: 'background → rgba(236,230,218,0.06) on hover (CSS default transition)'
  link-hover: 'dotted/solid underline on hover, underline-offset 4px'
  note: 'Static report — no @keyframes, no JS animation, no GSAP. The only dynamic JS is document.write loops that stamp out the pictogram grids.'
icons:
  library: Tabler Icons (webfont, ti-*)
  style: outline
  sizes: { sm: 16px, base: 16px, lg: 18px }
  color: '{colors.ink}'
  note: 'ti-asterisk (significance, in ochre), ti-alert-circle (N<30 excluded), ti-file-text (source link), ti-info-circle, ti-download. Plus a bespoke masked SVG person pictogram (.pic) used for all isotype data, not from any library.'

Equity Lens

equity-lens-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Equity Lens is a dark editorial people-analytics broadsheet — a DEI/diversity pipeline report dressed as an Isotype (ISOTYPE) pictogram document. The page floats on a near-black plum-to-ink vertical gradient (#1A1620 → #130F18 → #0E0B12) washed by three barely-there radial glows — plum top-right, ochre top-left, moss at the bottom — and finished with a fixed SVG feTurbulence grain overlaid at opacity:0.07 with mix-blend-mode:screen. All ink is warm parchment #ECE6DA. The signature move is the isotype pictogram: a custom mask-image person glyph (.pic) stamped out by document.write loops into dense grids that encode real counts — "1 figure = 42 candidates", funnel stages drawn as walls of figures, demographic stacks, cohort-survival rows. Three muted data voltages carry the categories everywhere: plum #B07AB0 (Group A), ochre #E0A868 (Group B), moss #86A586 (Group C), with faded rgba(236,230,218,0.18) figures for the "not-advanced" / undisclosed remainder. Typography is a confident three-face editorial system: Space Grotesk for display and section heads, Archivo for body, and IBM Plex Mono with tabular numerals for every metric, label, and table cell. The geometry is strictly rectilinear — zero border radius anywhere except small status dots, a 1360px max-width column, full-strength #ECE6DA hairlines boxing every panel, and an enormous gradient-filled chapter numeral ("01") at 220px anchoring the hero.

Colors

Surface. The body is a four-layer background: three radial-gradient glows (plum rgba(176,122,176,0.20), ochre rgba(224,168,104,0.13), moss rgba(134,165,134,0.08)) over a linear-gradient(180deg, #1A1620, #130F18, #0E0B12). Panels use a near-invisible rgba(236,230,218,0.02) wash (panel-fill); table headers, interior solid dividers, and button hover states use the deep plum-gray #241E2B (header-fill).

Brand / data voltages. Three muted hues encode categories throughout: plum #B07AB0 (Group A fills, active stage), ochre #E0A868 (Group B fills, delayed status, deltas needing attention), moss #86A586 (Group C fills, on-track status, the Live dot). Brighter text-only variants plum-bright #C79AC7 and moss-bright #9CBF9C are used where the muted fills would be too dim as type.

Text. Primary text, all hairlines, and the pictogram fill are parchment ink #ECE6DA. On light fills (active tab, status chips, the parchment ink bars) text flips to near-black ink-on-light #16121C. Muted labels are rgba(236,230,218,0.6); the faded/empty pictogram figures and softest borders are rgba(236,230,218,0.18).

Hairlines. Full-strength rules are solid #ECE6DA (the broadsheet's defining move); interior dividers drop to rgba(236,230,218,0.2) or 0.3.

Gradient. The chapter numeral is clipped over linear-gradient(160deg, #C79AC7, rgba(176,122,176,0.35), rgba(236,230,218,0.06)); the eyebrow rule is a 2px linear-gradient(90deg, plum, ochre, moss, rgba(236,230,218,0.18)).

Typography

Three Google Fonts faces, all loaded via one @import: Space Grotesk (display + headings, h1/h2), Archivo (body default, font-feature-settings: 'ss01'), and IBM Plex Mono (.mono, font-variant-numeric: tabular-nums) for every number, label, caption, and table cell. All open-source; no substitutions needed. Uppercase + wide tracking (0.18em–0.22em) on mono labels is the editorial signature.

Token	Size	Weight	Line-height	Tracking	Usage
chapter-numeral	220px	500	0.82	-0.04em	Giant gradient hero numeral "01"
display	64px	500	0.98	-0.02em	Hero headline (Space Grotesk)
section-head	30–36px	500	tight	-0.01em	§ section H2s
metric	34px / 72px	500	1	—	Mono KPI / cohort numbers
body	14px	400	1.6	—	Paragraphs, table cells (Archivo)
mono-label	10–11px	400	—	0.18–0.22em	Uppercase mono kickers, captions, headers

Layout

Base unit 4px; section vertical rhythm in 8px multiples (py-12, py-14 ≈ 48–56px). A single max-w-[1360px] centered column with px-8 gutters runs the whole page. Structure is a sequence of full-bleed sections separated by solid #ECE6DA hairlines (one section uses a heavier border-t-[3px]): utility bar → hero (12-col grid: 2-col chapter glyph, 7-col headline, 3-col reading-key) → 5-up metric strip → horizontal pipeline funnel of stage-cards joined by attrition arrows → demographic split panel (4-col summary + 8-col pictogram stacks) → compensation bar table → promotion cohort grid → interventions table → footer. CSS Grid drives the pictogram grids (repeat(N, 1fr), 2–3px gaps) and the explicit-column tables (grid-cols-[220px_1fr_120px_100px_60px]). Whitespace is dense and document-like — this reads as a printed statistical report, not a roomy marketing page.

Elevation & Depth

Essentially flat by design. There are no drop shadows on cards; depth comes entirely from solid/translucent hairline borders and the layered background glows + film grain. The only box-shadow is a 1px parchment glow under the .deep-rule (0 1px 0 rgba(236,230,218,0.18)). The active stage-card "lifts" purely via a plum border and a rgba(176,122,176,0.16) fill — no shadow. The grain layer (body::before, fixed, screen blend) and radial glows are the entire depth story.

Shapes

Brutally rectilinear. Border radius is 0 everywhere — cards, chips, buttons, tabs, pills, table cells, status badges. The only round things are tiny status/legend dots (border-radius: 99px, rounded-full, ~8px). Even the pictogram person glyph and the CSS-triangle attrition arrows are sharp. Sharpness is the brand: it sells the "statistical document" register.

Components

• Utility bar — transparent, full-width, border-b solid #ECE6DA; masthead pictogram lockup + mono metadata (Period / Org / Live dot), 12px 32px padding.
• Kicker pill — bordered (rgba(236,230,218,0.32)), no fill, mono 10px uppercase 0.18em, 4px 10px; voltage variants recolor border+text (plum, moss).
• Metric card — faint rgba(...,0.018) fill, 1px 0.18-alpha border, mono 34px value, sparkline SVG (plum stroke 1.4, plum-fill area), dot + label.
• Stage card — 1px 0.22-alpha border, transparent-ish fill, big mono count + pictogram grid; .active → plum border + rgba(176,122,176,0.16) fill.
• Tab button — bordered, transparent; .active flips to solid #ECE6DA fill with #16121C text. Labels: "Gender / Ethnicity / Age band / Disability".
• Status chip — solid voltage fill with #16121C text, mono 10px uppercase: moss "On track", ochre "Delayed", ink "Complete".
• Data tables — #241E2B header row, explicit grid columns, 0.2-alpha row dividers, hover:bg-[#ECE6DA]/[0.06]; bar cells are colored <div>s by width %; .hatch 45° stripe marks excluded N<30 samples.
• Pictogram (.pic) — masked SVG person, 10×18 default (pic-lg 14×24, pic-sm 7×13), recolorable (pic-plum/ochre/moss/fade); the core data primitive.
• Download button — bordered #ECE6DA, transparent, mono uppercase, hover:bg-[#241E2B]; label "Download Source Data (CSV · 412 KB)".

Motion

This is a static report. There are no @keyframes, no transition declarations authored, and no GSAP/JS animation. The only interactive states are CSS hover: background tints on table rows (rgba(236,230,218,0.06)) and underline hovers on footer links. The only JavaScript is inline document.write(Array(N).fill(...).join('')) loops that stamp out the pictogram grids at load time.

Iconography

Tabler Icons via webfont (ti-*), outline style, ~16px (text-base), parchment color: ti-asterisk (statistical significance, rendered in ochre), ti-alert-circle (N<30 excluded), ti-file-text (source links), ti-info-circle, ti-download. Decorative/data marks are not from Tabler: the bespoke masked SVG person glyph (.pic), the CSS-triangle attrition arrow, the inline sparkline/underline SVGs, and unicode marks (▲ ▼ ▸ ✱ ✓ ≈ ▮).

Do's and Don'ts

• Do keep the surface dark plum-to-ink with the three radial glows and the screen-blend grain — the warmth comes from that layering, not from lighter panels.
• Do draw counts as pictogram grids; reserve plum/ochre/moss strictly for the three groups and fade the remainder to rgba(236,230,218,0.18).
• Do set every number and label in IBM Plex Mono with tabular numerals and wide uppercase tracking; headings in Space Grotesk, body in Archivo.
• Do box everything in solid #ECE6DA hairlines and keep border-radius: 0.
• Don't introduce rounded corners, drop shadows, or glassy blur — depth is hairlines + glow + grain only.
• Don't add new accent colors or use the muted voltages as type where the bright variants (#C79AC7, #9CBF9C) are intended.
• Don't add motion/animation; the document register depends on stillness.

Known Gaps

• Section heads vary (text-3xl/text-4xl ≈ 30/36px); the table uses one section-head token at 36px as the representative value.
• body size is the rendered default (no explicit base font-size); 14px is taken from the dominant text-sm body copy.
• Radial-glow and feTurbulence grain values are read verbatim from the inline CSS; their visual blend is described, not re-derived.
• Spacing tokens are inferred from observed Tailwind utilities (4px base); the template has no formal spacing scale declaration.