name: covera-design
version: alpha
description: >
  Covera is a neo-brutalist insurance member portal built on a warm off-white
  paper surface (`#FBFBF9`) and near-black ink (`#101012`). Its signature move is
  a heavy 6px black grid: a 12-column bento of solid color blocks (deductible,
  coverage card, HSA, premium) fused by black gutters, plus a hairline-ruled
  claims ledger table. Three saturated "voltages" code meaning — cobalt blue
  (`#1E50B5`), sign-yellow (`#F2C014`), and alarm red (`#D8362A`). Type pairs a
  condensed uppercase Jost display with Inter body and an all-caps Space Mono for
  data, IDs, and labels. Everything is square-edged (radius 0) with thick black
  borders instead of shadows; blocks assemble from the screen edges on load.
colors:
  # Brand / Voltages
  blue: '#1E50B5'      # primary accent: coverage card fill, progress bar, PAID status, links/eyebrows
  yellow: '#F2C014'    # secondary accent: deductible block, rewards, PENDING status, member-ID chip
  red: '#D8362A'       # alarm accent: premium-due block, mental-health block, DENIED status
  # Surface
  paper: '#FBFBF9'     # page background and light bento/stat cells
  ink: '#101012'       # 6px grid borders, gutters, header rule, dark text, table head
  # Text
  text: '#101012'      # default body + heading color on light surfaces
  on-dark: '#FBFBF9'   # text on ink / blue / red surfaces
typography:
  display:
    fontFamily: "'Jost', sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1px
    textTransform: uppercase
  heading:
    fontFamily: "'Jost', sans-serif"
    fontSize: 22px
    fontWeight: 700
    letterSpacing: -0.5px
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
  data:
    fontFamily: "'Space Mono', monospace"
    fontSize: 22px
    fontWeight: 700
rounded:
  sm: 0px
  md: 0px
  lg: 0px
spacing:                # base unit 4px; gutters and grid rows are 6px / 96px
  xxs: 6px
  xs: 8px
  sm: 12px
  md: 20px
  lg: 28px
  xl: 32px
components:
  header:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '6px solid {colors.ink} (bottom only)'
    padding: '0 32px'
    height: '74px'
  idChip:
    backgroundColor: '{colors.yellow}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.sm}'
    padding: '8px 12px'
  bentoBlock:
    backgroundColor: '{colors.paper}'  # or blue / yellow / red per block
    textColor: '{colors.text}'
    rounded: '{rounded.sm}'
    padding: '20px–28px'
    gap: '6px (ink gutters)'
  progressBar:
    backgroundColor: '{colors.paper}'
    fill: '{colors.blue}'
    border: '3px solid {colors.ink}'
    height: '18px'
    rounded: '{rounded.sm}'
  ledgerTable:
    backgroundColor: '{colors.paper}'
    headBackground: '{colors.ink}'
    headText: '{colors.on-dark}'
    border: '6px solid {colors.ink}'
    rowDivider: '3px solid {colors.ink}'
    typography: '{typography.label}'
    cellPadding: '12px'
  statusBadge:
    backgroundColor: '{colors.blue}'  # blue PAID / yellow PENDING / red DENIED
    typography: '{typography.label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.sm}'
    padding: '4px 8px'
motion:
  blockAssembly: 'each .blk flies in from its data-edge (x/y ±120px) + opacity 0→1, 700ms outExpo, stagger 90ms'
  ledgerRows: 'rows fade + translateX -40→0, 500ms outQuad, stagger 70ms starting at 700ms'
  benefitBlocks: 'benefit cards fade + translateY 60→0, 600ms outExpo, stagger 80ms starting at 900ms'
icons:
  library: none
  style: 'no icon set; meaning carried by color blocks, mono labels, and the progress bar'

Covera

covera-design · alpha

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

Overview

Covera is a neo-brutalist insurance member portal: warm paper (#FBFBF9) under near-black ink (#101012), assembled as a heavy-bordered grid. The hallmark is a 6px black skeleton — a 12-column bento (grid-auto-rows:96px;gap:6px) of solid color tiles where the black gap and border read as mortar between bricks. Three saturated voltages do all the signaling: cobalt #1E50B5 for active coverage and PAID claims, sign-yellow #F2C014 for deductible/rewards and PENDING, alarm red #D8362A for premium-due and DENIED. Type is a deliberate three-way split: condensed uppercase Jost for display (34px, letter-spacing:-1px, line-height:1), Inter for the few sentences of body copy (12–13px), and all-caps Space Mono for every datum, ID, label, and dollar figure. There are no rounded corners and no shadows anywhere — depth is entirely structural, expressed through thick ink borders and dividers. On load the blocks fly in from the page edges to "assemble" the layout.

Colors

Voltages (brand). blue #1E50B5 is the primary accent — it fills the Covera Gold PPO coverage card, the deductible progress fill, PAID status badges, and the mono eyebrow text in section headers. yellow #F2C014 is the secondary accent — the large Annual Deductible block, the Rewards Points tile, PENDING badges, and the yellow member-ID chip in the header. red #D8362A is the alarm accent — the Premium Due block, the Mental Health benefit block, and DENIED badges. Surface. paper #FBFBF9 is the page background and the fill of all light bento/stat cells and the ledger table; ink #101012 is the structural color — the 6px grid border and gutters, the header's bottom rule, table head background, and default dark text. Text. text #101012 on light surfaces; on-dark #FBFBF9 reversed on ink, blue, and red fills. There are no separate muted/border greys — hairlines are pure ink at varying thickness (2px / 3px / 6px).

Typography

Three Google-Fonts faces, imported together: Jost (500/700) for display and headings, Inter (400/500/600) for body copy, Space Mono (400/700) for all data/labels. Jost is always uppercase with tight negative tracking and line-height:1; Space Mono is uppercase with wide tracking for labels. All are open-source already, so no substitutes are needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	30–40px	700	1	-1px	Block titles, logo, big dollar figures
heading	22px	700	—	-0.5px	Section headings (Claims Ledger)
body	12–13px	400–500	1.4	—	Explanatory sentences
label	10–11px	400	—	0.1–0.15em	Mono eyebrows, table heads, badges, units
data	14–40px	700	1	—	Dollar amounts, counts, member IDs

Layout

Base unit 4px, but the signature rhythm is the 6px grid gutter and the 96px bento row height. The page is a single full-width column (px-8 py-8, no max-width cap) with three stacked regions: (1) the bento composition — a 12-column grid of spanning blocks (span 6/4/3/2 × row span 3/2/1) fused by 6px ink gutters and a 6px ink frame; (2) the Claims Ledger — a full-width bordered table; (3) the Benefits strip — a 4-column grid of equal min-height:150px color tiles, again on a 6px ink frame. At ≤720px the bento collapses to 2 columns (left block spans full width), benefits drop to 2 columns, and the ledger scrolls horizontally (min-width:520px). Whitespace is dense and gridded — blocks touch through black mortar rather than floating.

Elevation & Depth

No box-shadow, no backdrop-filter, no glow anywhere. Depth is 100% structural: thick ink borders (6px frames, 3px dividers/inner borders, 2px badge borders) and black gutters between blocks. The dark blue/red/ink fills sit "below" the paper cells purely through contrast, not shadow.

Shapes

Uniformly square — radius 0 on every element (no rounded-* classes, no border-radius). The aesthetic depends on hard right angles; chips, badges, progress bars, and tiles are all sharp rectangles.

Components

• Header — paper bg, 6px ink bottom rule, 74px tall, px-8; logo in bold uppercase Jost 30px + cobalt mono "member portal" eyebrow.
• ID chip — bordered group (3px ink): yellow mono "ID 4471-A" cell + paper name cell, sharp corners.
• Bento block — solid fill (paper/blue/yellow/red), no border of its own (frame
  • gutters supply the lines), p-5–p-7, flex column space-between.
• Progress bar — 18px tall, 3px ink border, paper track, cobalt #1E50B5 fill at 68%.
• Status badge — uppercase Space Mono 10px, 2px ink border, fill = blue (PAID) / yellow (PENDING) / red (DENIED), px-2 py-1.
• Ledger table — 6px ink frame, ink header row with paper text, 3px ink row tops, 2px ink column dividers; mono cells, right-aligned bold amounts.
• Benefit tile — min-height:150px, p-6, Jost 20px uppercase title + Inter 12px detail, color-coded fill.

Motion

Powered by anime.js v4 (esm.sh import). On load three staggered sequences run: bento blocks assemble from their data-edge (left/right/top/bottom → translate ±120px) with opacity 0→1, 700ms outExpo, 90ms stagger; ledger rows slide in from the left (translateX -40→0, 500ms outQuad, 70ms stagger, 700ms start); benefit tiles rise (translateY 60→0, 600ms outExpo, 80ms stagger, 900ms start). No hover or continuous animation — motion is a one-time entrance.

Iconography

No icon library. The design carries meaning entirely through color-coded blocks, uppercase mono labels, the deductible progress bar, and status badges — there are no glyphs, SVGs, or icon fonts.

Do's and Don'ts

• Do keep every corner square (radius 0) and express structure with thick ink borders and 6px gutters, never shadows.
• Do reserve the three voltages for their meanings: blue = active/paid, yellow = deductible/rewards/pending, red = due/denied/alert.
• Do set all IDs, amounts, units, and labels in uppercase Space Mono, and all titles in uppercase Jost with tight tracking.
• Don't introduce rounded corners, drop shadows, glass, or gradients — they break the brutalist contract.
• Don't add a fourth accent or use the voltages decoratively; color is semantic.
• Don't thin the borders or remove the black mortar between blocks.

Known Gaps

• Spacing scale is inferred from the p-5/p-6/p-7 padding and 6px/96px grid values; no formal token scale exists in the HTML.
• display and data typography tokens span a range (30–40px / 14–40px) because several inline sizes share the same face/weight; the token records a representative size.