name: casebrief-design
version: alpha
description: >
  A dark, premium law-firm case-management dashboard styled as a physical filing
  cabinet. The page surface is near-black `#0F1116` with raised slate panels
  (`#181B22` / `#20242E`) hairlined in `#2A2E38`. A serif display face (Fraunces)
  carries headlines and big stat numerals; a JetBrains Mono face handles all
  metadata, dates, and ledger figures in tracked uppercase; Inter sets body copy.
  Two semantic "voltages" — oxblood red `#D06A5C` for critical/overdue and brass
  gold `#CDA64E` for approaching — punctuate an otherwise monochrome slate system.
  Signature moves: zero-radius rectangular folder panels with a brass left-edge
  spine, a 45° hatch texture, clip-path corner tabs, and GSAP/Lenis scroll wipes.
colors:
  # Brand / Accent (voltages)
  red: '#D06A5C'        # soft oxblood — critical deadlines, overdue, errors, active tab underline
  amber: '#CDA64E'      # brass / gold — approaching deadlines, folder spine, selection, today accent
  # Surface
  page: '#0F1116'       # body background (near-black)
  cream: '#181B22'      # raised card / panel surface (var --cream)
  cream-2: '#20242E'    # sub-header / more-raised surface (var --cream-2)
  folder-tab: '#1C2029' # folder card fill
  today-cell: '#26304A' # calendar "today" cell fill
  # Text / Ink
  navy: '#E6E8EC'       # primary light "ink" — headings, emphasis, chips (var --navy/--ink)
  walnut: '#8B909C'     # muted slate — metadata, labels, body-muted
  ink-dark: '#14161C'   # dark ink for text on amber/light fills
  # Hairlines
  line: '#2A2E38'       # all hairline borders (var --line)
  hover-line: '#3A404E' # folder-tab hover border
  # Tints (rgba overlays read from CSS)
  row-tint: 'rgba(255,255,255,.02)'   # odd ledger-row stripe / hatch base
  unpaid-tint: 'rgba(208,106,92,.10)' # unpaid ledger-row wash
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 0.95
  display-stat:
    fontFamily: "'Fraunces', serif"
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1
  heading-section:
    fontFamily: "'Fraunces', serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 0.95
  heading-card:
    fontFamily: "'Fraunces', serif"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1
  heading-sub:
    fontFamily: "'Fraunces', serif"
    fontSize: 22px
    fontWeight: 600
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 2px
    textTransform: uppercase
  mono-data:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 400
rounded:                  # near-zero geometry; pills only for dots & calendar event chips
  none: 0px
  full: 9999px
spacing:                  # base unit 4px; common steps below
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
components:
  panel:
    backgroundColor: '{colors.cream}'
    border: '1px solid {colors.line}'
    rounded: '{rounded.none}'
    elevation: 'shadow-firm (0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px -10px rgba(0,0,0,.6))'
  panel-header:
    backgroundColor: '{colors.cream-2}'
    textColor: '{colors.navy}'
    typography: '{typography.heading-card}'
    border: '1px solid {colors.line}'
  folder-card:
    backgroundColor: '{colors.folder-tab}'
    textColor: '{colors.navy}'
    border: '1px solid {colors.line}'
    rounded: '{rounded.none}'
    padding: '20px 20px 20px 24px'   # pl-6 pr-5 py-5; 4px brass spine on left edge
  flag-red:
    backgroundColor: '{colors.red}'
    textColor: '#FBEAE7'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '2px 8px'
  flag-amber:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.ink-dark}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '2px 8px'
  flag-low:
    backgroundColor: 'transparent'
    textColor: '{colors.walnut}'
    border: '1px solid {colors.walnut}'
    typography: '{typography.mono-label}'
  btn-ghost:
    backgroundColor: 'transparent'
    textColor: '{colors.navy}'
    border: '2px solid {colors.navy}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    hover: 'background {colors.navy}, text {colors.ink-dark}'
  avatar:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.full}'   # topbar avatar; correspondence avatars are square
  ledger-row:
    backgroundColor: '{colors.row-tint}'  # odd rows; unpaid rows use {colors.unpaid-tint}
    typography: '{typography.mono-data}'
    border-bottom: '1px solid rgba(230,232,236,.15)'
  calendar-event-pill:
    backgroundColor: '{colors.red}'   # red/amber by severity; routine = bordered walnut
    typography: '{typography.mono-label}'
    rounded: '{rounded.full}'
    padding: '4px 8px'
motion:
  smooth-scroll: 'Lenis smooth scroll, duration 1.1'
  header-hide: 'Direction-reactive topbar — translateY(-110%) on scroll down past 80px, translateY(0) on scroll up; transition 0.45s cubic-bezier(.4,0,.2,1)'
  tab-hover: 'Motion hover color sweep to #CDA64E (0.3s), reverts to #E6E8EC'
  folder-reveal: 'GSAP stagger — folders fade+rise (y:30, 0.7s, power3.out, stagger 0.06)'
  panel-entrance: 'GSAP cabinet panels fade+rise (y:24, 0.6s, stagger 0.08)'
  matter-wipe: 'GSAP clip-path inset(0 100% 0 0) horizontal reveal on scroll, 1s power2.inOut'
  calendar-wipe: 'GSAP clip-path inset(0 0 100% 0) vertical reveal, 1.1s power2.inOut'
  ledger-cascade: 'GSAP rows fade+rise on scroll (y:20, 0.4s, stagger 0.05)'
  timeline-stagger: 'Motion inView li reveal (opacity 0->1, y 20->0, stagger 0.1, 0.5s easeOut)'
icons:
  library: Tabler (ti, webfont)
  style: outline (filled variants for critical alerts, e.g. ti-alert-triangle-filled)
  sizes: { sm: 16px, md: 18px, lg: 20px, xl: 28px }
  color: '{colors.walnut}'

CaseBrief

casebrief-design · alpha

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

Overview

CaseBrief is a dark, premium case-management dashboard for the fictional firm "Hartwell & Roe, Attorneys at Law," built to read like a physical steel filing cabinet rendered in software. The page sits on a near-black #0F1116 surface; every panel is a raised slate rectangle (#181B22) with a darker sub-header (#20242E), separated only by #2A2E38 hairlines — there is no rounding anywhere on structural surfaces. The type story is the signature move: a high-opsz serif (Fraunces) carries headlines and oversized stat numerals ("The Active Docket", 64px; 142.8h, 52px), while JetBrains Mono renders every label, date (in 2025·11·17 middot notation), matter code, and ledger figure in tracked uppercase, and Inter handles running body copy. Two semantic voltages cut through the monochrome slate: oxblood red #D06A5C for critical/overdue states and brass gold #CDA64E for approaching deadlines, selection highlight, and the brass spine running down the left edge of every folder card. Folders cascade in an offset three-column grid over a faint 45° hatch texture, and GSAP + Lenis drive clip-path scroll wipes, a direction-aware hiding header, and staggered entrances.

Colors

Brand / Accent. Two voltages only. red #D06A5C (soft oxblood) marks critical deadlines, overdue invoices, the active-tab underline, and high-risk flags; its companion light tint #FBEAE7 is the text color on red flag fills. amber #CDA64E (brass/gold) marks approaching deadlines, the 4px folder-card left spine, the ::selection highlight (paired with #14161C text), and the "today" accent on the calendar.

Surface. Body is page #0F1116 (near-black). cream #181B22 is the raised panel/card fill (the variable name is legacy from a light theme — the value is dark). cream-2 #20242E is the more-raised sub-header/strip surface used on panel headers, table heads, and footers. folder-tab #1C2029 fills the individual folder cards; today-cell #26304A fills the calendar's current-day cell.

Text / Ink. navy #E6E8EC is the primary light ink — headings, emphasis, numerals, chip fills (variables --navy and --ink share this value). walnut #8B909C is the muted slate used for all metadata, labels, captions, and secondary body. ink-dark #14161C is the dark text placed on amber/light fills.

Hairlines. line #2A2E38 draws every border via the .b2/.bt2/.bb2/ .br2/.bl2 helpers and hr.rule. hover-line #3A404E is the folder-card hover border.

Tints. row-tint rgba(255,255,255,.02) stripes odd ledger rows and bases the hatch pattern; unpaid-tint rgba(208,106,92,.10) washes unpaid ledger rows. Internal table borders use rgba(230,232,236,.15) (navy at 15%).

Typography

Three families, all loaded from Google Fonts in one @import: Fraunces (display serif, opsz 9–144, weights 400–700, set to opsz 96 for its high-contrast cut), Inter (body, 300–600), and JetBrains Mono (mono, 400–600, tabular-nums). No bespoke faces — all are open-source.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px	600	0.95	—	Page hero "The Active Docket"
display-stat	52px	600	1	—	Largest stat numeral (billable hours)
heading-section	48px	600	0.95	—	Section H2s (Matter, Calendar, Ledger)
heading-card	34px	600	1	—	Client / panel-header names
heading-sub	22px	600	—	—	Sub-panel titles, folder titles
body	15px	400	1.5	—	Intro paragraphs (Inter)
body-sm	13px	400	—	—	Correspondence text, table titles
mono-label	10px	400	—	0.2em uppercase	All eyebrow/metadata labels
mono-data	12px	400	—	-0.01em	Dates, codes, ledger figures

Mono labels frequently use wider tracking (0.2em–0.25em) and uppercase; serif headlines mix an italic emphasis (<em>) recolored to the red voltage.

Layout

Base unit 4px. The page is a single max-width: 1400px column, px-10 (40px) gutters, py-10 vertical rhythm. Composition top to bottom: a sticky topbar (serif wordmark + center nav + mono volume/folio + Tabler action icons), a hero section with an oversized serif title and a right-aligned mono "as of" dateline, a 5-column summary strip of stat cells, then the "filing cabinet" — a stack of full-width cabinet-panel articles (one expanded with an offset 3-column folder grid, four collapsed to just their 12-column header rows). Below, a Matter Detail laid out as a 10-column split (6/4: documents + correspondence on the left, deadline timeline + billable-hours ledger on the right), a 7-column calendar grid generated in JS, and a full-width billing ledger table with thead/tfoot. Whitespace is dense and ledger-like; structure is communicated by hairline grids and br2/bb2 cell dividers rather than gaps.

Elevation & Depth

One shadow token, .shadow-firm: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px -10px rgba(0,0,0,.6) — a soft top inset highlight plus a deep, tight drop shadow that lifts panels off the near-black page. Beyond that, depth comes from hairlines (#2A2E38), the darker cream-2 sub-headers, the 45° .hatch texture in expanded panel bodies, and the brass folder-tab::before left spine. Timeline dots add focus via ring-4 colored rings. No blur/glass effects.

Shapes

Resolutely rectangular. Structural surfaces (panels, folders, flags, buttons, table cells, calendar cells) carry 0 radius — the brutalist/ledger geometry is core to the cabinet metaphor. rounded-full (9999px) appears only on small status dots, the topbar circular avatar, timeline dots, and the calendar event pills. A clip-path notch (.tab-corner, polygon cutting a 24px corner) is authored for folder-tab shapes.

Components

• panel (cabinet-panel) — #181B22 fill, 1px #2A2E38 border, 0 radius, shadow-firm. Header row on #20242E.
• panel-header — 12-column grid; File №, client name (serif 34px), active matters, next deadline (red/amber/walnut by urgency), folder icon.
• folder-card (folder folder-tab) — #1C2029 fill, 1px #2A2E38 border, 4px amber left spine, padding 20px 20px 20px 24px; hover border #3A404E.
• flag-red — #D06A5C fill, #FBEAE7 text, mono 10px uppercase, 2px 8px. Labels: "High", "High Risk", "Overdue · 13d".
• flag-amber — #CDA64E fill, #14161C text. Labels: "Med", "Due · 6d".
• flag-low — transparent, 1px #8B909C border, walnut text. Label: "Pending".
• btn-ghost — transparent with 2px #E6E8EC border, mono uppercase; on hover inverts to navy fill + dark text. Label: "Open Matter Detail →".
• avatar — 36px square (correspondence) or 32px round (topbar), navy fill, cream initials in mono. Colored navy/walnut/red by sender.
• ledger-row — striped odd rows (rgba(255,255,255,.02)), unpaid rows washed oxblood; navy@15% bottom borders.
• calendar-event-pill — red/amber filled or walnut-bordered, mono 9px uppercase, rounded-full, truncated.

Motion

Lenis smooth scroll (duration 1.1) plus GSAP ScrollTrigger and Motion One. The topbar is direction-reactive: it slides out (translateY(-110%)) on scroll down past 80px and returns on scroll up, transition 0.45s cubic-bezier(.4,0,.2,1). Tab links sweep to brass #CDA64E on hover (Motion, 0.3s). Entrances: folders stagger-rise (y:30, 0.7s, power3.out, stagger 0.06), cabinet panels rise (stagger 0.08), ledger rows cascade (stagger 0.05), timeline <li>s reveal in view. Two clip-path wipes — the matter detail wipes in horizontally (inset(0 100% 0 0), 1s) and the calendar wipes in vertically (inset(0 0 100% 0), 1.1s). .urgent-pulse class exists but its keyframes are empty (no active pulse animation).

Iconography

Tabler Icons via the ti webfont CDN. Outline style by default at #8B909C (walnut), with filled variants reserved for critical alerts (ti-alert-triangle-filled in red). Sizes: 16px/18px inline with text, 20px in sub-headers, 28px for folder open/closed glyphs. UI icons: ti-search, ti-bell, ti-folder/ti-folder-open, ti-file-text, ti-mail, ti-clock, ti-chevron-left/right, ti-currency-dollar, ti-alert-triangle.

Do's and Don'ts

• Do keep all structural surfaces at 0 radius — the cabinet metaphor depends on hard rectangles separated by hairlines.
• Do restrict color to the slate scale plus the two voltages; red = critical/ overdue, amber = approaching/brass accent. Don't add a third accent.
• Do set dates and numeric metadata in JetBrains Mono with · separators and use Fraunces for headlines and big numerals.
• Do keep the brass left spine on folder cards and cream-2 on every header.
• Don't introduce drop shadows other than shadow-firm, or add glass/blur.
• Don't use Inter for headlines or serif for ledger figures — keep the serif/mono/sans roles strict.
• Don't soften the dense, hairline-grid ledger layout with large gaps or pills.

Known Gaps

• .urgent-pulse is referenced on critical flags but its @keyframes/rule is empty in the source, so no actual pulse motion is implemented (documented as inactive).
• The --navy variable name is legacy from a prior light theme; its real value is the light ink #E6E8EC. Names like --cream likewise describe dark values.
• Spacing scale is inferred from the Tailwind utility classes actually used (p-5, px-6, gap-5, etc.) on a 4px base, not from an explicit token set.