name: grailfloor-design
version: alpha
description: >
  Grailfloor is a neo-brutalist sneaker trading floor: a near-black ink
  (`#0D0D0D`) and bone paper (`#F2F2F0`) base electrified by a single acid-lime
  voltage (`#E8FF00`). Everything is built from heavy 2-3px ink rules, hard
  offset drop-shadows (`4px 4px 0 #0D0D0D`), and a relentless monospace data
  grid. Archivo runs ultra-bold and stretched (`scaleX(1.08)`) for display
  headers; JetBrains Mono with tabular numerals carries every price, ticker and
  table cell; Inter is the quiet body fallback. The signature moves are a live
  GSAP marquee ticker, a self-printing "tape" feed that flashes lime and physically
  shakes the floor on each sale, and buttons that press into the page on click.
colors:
  # Brand / Voltage
  voltage: '#E8FF00'        # acid-lime accent: live badges, balance, CTAs, ticker up-ticks, footer rule
  # Surface
  ink: '#0D0D0D'            # near-black: sidebar, footer, borders, dark fills, body text
  paper: '#F2F2F0'          # bone/off-white page surface and light text on ink
  paper-alt: '#e6e6e2'      # zebra-stripe row + tape header background
  image-bg: '#ffffff'       # white plate behind product photos
  # Text
  text-strong: '#0D0D0D'    # headings / bold prices on paper
  text-muted: '#555555'     # mono labels, secondary data on paper
  text-faint: '#888888'     # placeholder, footer subtext, down-tick arrows
  text-on-ink: '#F2F2F0'    # body text on ink surfaces
  # Hairlines / Borders
  border-ink: '#0D0D0D'     # primary 2-3px structural rules
  border-dark: '#333333'    # divider rules inside dark sidebar/footer
  # Mono helper greys
  grey-999: '#999999'       # "BALANCE" label in sidebar card
  grey-666: '#666666'       # footer column headers, fine print
  grey-444: '#444444'       # ticker "|" separators
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 48px           # footer wordmark text-5xl; hero h2 text-3xl
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.02em   # via .brutal-expand
    textTransform: uppercase
  display-action:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 18px           # button labels text-lg
    fontWeight: 800
    letterSpacing: 0.025em
    textTransform: uppercase
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 14px           # text-sm: nav, prices, table cells (tabular-nums)
    fontWeight: 400
  mono-bold:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 14px
    fontWeight: 700
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px           # text-[10px] tracked labels (CURRENT BID, TIME)
    fontWeight: 400
    letterSpacing: 0.1em     # tracking-widest
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 16px
    fontWeight: 400
rounded:                      # zero radius everywhere — brutalist
  none: 0
spacing:                      # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  '2xl': 32px
components:
  cta-bid:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.voltage}'
    typography: '{typography.display-action}'
    rounded: '{rounded.none}'
    padding: '16px'
    note: 'btn-press: hover lifts 1px + 6px shadow, active slams 4px in, shadow gone'
  cta-connect:
    backgroundColor: '{colors.voltage}'
    textColor: '{colors.ink}'
    typography: '{typography.display-action}'
    border: '3px solid {colors.paper}'
    rounded: '{rounded.none}'
    padding: '12px'
    note: 'shadow-hard 4px 4px 0 #0D0D0D'
  card:
    backgroundColor: '{colors.paper}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    note: 'shadow-hard; dark header strip with mono caption'
  live-badge:
    backgroundColor: '{colors.voltage}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-bold}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '4px 8px'
  filter-chip:
    backgroundColor: '{colors.voltage}'   # active; inactive transparent w/ hover ink fill
    textColor: '{colors.ink}'
    typography: '{typography.mono-bold}'
    rounded: '{rounded.none}'
    padding: '12px 16px'
  search-input:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    placeholderColor: '{colors.text-faint}'
    rounded: '{rounded.none}'
  nav-item:
    backgroundColor: '{colors.voltage}'   # active item; others transparent
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '12px 16px'
    note: 'inactive items hover to voltage text'
  tape-row:
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    note: 'zebra paper/paper-alt; up-ticks get 4px voltage left border; flashes voltage on insert'
motion:
  ticker: 'GSAP xPercent:-50, duration 28s, ease none, infinite — top live tape marquee'
  disclaimer: 'GSAP xPercent:-50, duration 22s, ease none, infinite — footer marquee'
  tape-feed: 'new row prepended every 3.5s, .flash voltage bg for 220ms then removed'
  floor-shake: 'GSAP fromTo x/y 1/-1, duration 0.04, repeat 5, yoyo — whole floor jolts on each sale'
  btn-press: 'transition:none; hover translate(-1px,-1px)+6px shadow; active translate(4px,4px)+no shadow'
  countdowns: 'setInterval 1s tick on featured + per-card ENDS timers'
icons:
  library: inline unicode glyphs (no icon font)
  style: text marks
  glyphs: ['●', '▲', '▼', '›', '|']
  color: '{colors.voltage} for up/live, {colors.ink} or {colors.text-faint} for down'

Grailfloor

grailfloor-design · alpha

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

Overview

Grailfloor is a neo-brutalist "deadstock derivatives exchange" — a sneaker trading floor rendered as a live financial terminal. The whole interface sits on bone paper (#F2F2F0) over a near-black ink (#0D0D0D), and a single acid-lime voltage (#E8FF00) does all the shouting: live badges, the account balance, the primary CTAs, every up-tick arrow, and the hairline that crowns the sidebar and footer. There is no rounding anywhere — every panel is a hard rectangle drawn with 2-3px ink rules and sat on a flat offset drop-shadow (shadow-hard: 4px 4px 0 #0D0D0D). Type does the heavy lifting: Archivo is set at weight 900, uppercased, and physically stretched with transform: scaleX(1.08) (.brutal-expand) for the GRAILFLOOR wordmark and lot titles; JetBrains Mono with tabular numerals carries every price, ticker, table cell and label; Inter is the near-invisible body fallback. The signature moves are kinetic: a GSAP marquee "LIVE TAPE" ticker scrolls across the top, a right-rail "THE TAPE" feed prints a new randomized sale every 3.5s — flashing lime and jolting the entire floor with a gsap shake — and buttons literally press into the page (lifting on hover, slamming 4px down on click as the shadow collapses).

Colors

Brand / Voltage. A single accent: voltage #E8FF00 (acid lime). It is used sparingly but loudly — the "LIVE TAPE" label chip, ● LIVE badges, the $14,820.50 balance, the active nav/filter, primary CTA text on ink, up-tick arrows in the ticker and grid, the chart's leading marker line, the tape's up-tick left borders, and the top rules of the sidebar/footer.

Surface. ink #0D0D0D is the structural dark — sidebar, footer, all borders, the market-grid backdrop (showing through 2px gaps), dark button fills, and body text on paper. paper #F2F2F0 is the page surface and the light text on ink. paper-alt #e6e6e2 zebra-stripes alternating tape rows and tints the tape's column header. Product photos sit on a #ffffff plate.

Text. text-strong #0D0D0D for headings and bold prices; text-muted #555 for mono labels and secondary data (SKU:, LAST, times); text-faint #888 for placeholders, footer subtext and down-tick arrows; text-on-ink #F2F2F0 for copy on dark panels. Sidebar fine print steps down through #999, #666, and the ticker separators use #444.

Hairlines. border-ink #0D0D0D draws every primary 2-3px rule. Inside the dark sidebar and footer, dividers soften to border-dark #333.

Typography

Three families, all loaded from one Google Fonts @import: Archivo (600-900), Inter (400-700), and JetBrains Mono (400/500/700). Archivo is the display/brutalist face — extreme weight (900/800), uppercase, negative tracking, and a horizontal stretch via .brutal-expand (letter-spacing:-0.02em; transform:scaleX(1.08)). JetBrains Mono is the workhorse, set with font-variant-numeric: tabular-nums so prices and timers align in columns. Inter is only the page-level body fallback (.font-inter on the root) and is rarely seen directly.

Token	Size	Weight	Line-height	Tracking	Usage
display	48px (3xl–5xl)	900	1	-0.02em + scaleX(1.08)	Wordmark, hero/footer headings
display-action	18px (sm–lg)	800	—	wide	Button labels (uppercase)
mono	14px	400	—	—	Nav, prices, table cells
mono-bold	14px	700	—	—	Bold prices, badges
mono-label	10px	400	—	widest (~0.1em)	Tracked uppercase labels
body	16px	400	normal	—	Inter root fallback

Layout

Base unit 4px (Tailwind scale); page padding and gaps run on 5 (p-5, space-y-5, gap-5 = 20px). The composition is a fixed two-pane app shell: a 210px sticky full-height ink sidebar (wordmark, mono nav, balance card, CONNECT button, fine print) beside a fluid main column. The main column stacks a featured-lot card (300px 1fr image/detail split with embedded SVG price chart and bid history), a filter/search toolbar, then a 1fr 280px split of a three-column market grid and a sticky "THE TAPE" right rail. A 44px live ticker bar caps the top; a four-column footer with a giant wordmark and a lime disclaimer marquee anchors the bottom. Everything collapses to single column at max-md. Whitespace is tight and gridded — the design reads as dense panels butted against each other by shared ink rules, not floating cards.

Elevation & Depth

No soft shadows, no blur, no glass. Depth comes from two devices: heavy ink borders (2px and 3px) and hard offset shadows — .shadow-hard (4px 4px 0 0 #0D0D0D) on primary panels and .shadow-hard-sm (3px 3px 0 0 #0D0D0D) on the toolbar. The dark market-grid backdrop shows through 2px gaps between cells to read as inset lines. Buttons animate their own shadow: hover grows it to 6px 6px 0, active collapses it to 0 0 0 as the element translates down — a tactile "press."

Shapes

Zero radius, everywhere. rounded.none = 0. Every surface — cards, buttons, badges, inputs, chips, the balance box — is a hard-cornered rectangle. The only curves in the design are the single <circle> price marker in the SVG chart and the ● glyphs in live badges. Sharpness is the brand.

Components

• CTA (Place Bid) — ink fill #0D0D0D, voltage text #E8FF00, Archivo 800 uppercase, no radius, btn-press interaction; label e.g. Place Bid · $1,260.
• CTA (Connect) — voltage fill, ink text, 3px paper border, shadow-hard, label CONNECT.
• Card / Panel — paper fill, 3px ink border, shadow-hard, with a dark header strip carrying a mono caption (FEATURED POSITION // LOT #001).
• Live badge — voltage fill, ink text, 2px ink border, mono-bold, ● LIVE / ● LIVE BID.
• Filter chips — mono buttons divided by 2px rules; active = voltage fill, inactive hover to ink fill / paper text; ALL JORDAN YEEZY DUNK NB.
• Search input — transparent, mono, #888 placeholder SEARCH SKU / MODEL..., no border (sits inside the toolbar's rule grid).
• Nav item — active row voltage-filled with ›; others hover to voltage text; MARKET / DROPS / ORDER BOOK / PORTFOLIO / SELL.
• Tape row — mono 11px, zebra paper/paper-alt, up-ticks get a 4px voltage left border, flashes voltage on insert; columns TIME MODEL SZ PRICE.
• Stat cells — bordered mono mini-grids (BID / ASK, CURRENT BID) with 10px tracked labels over bold prices.

Motion

Heavily kinetic and GSAP-driven. Two infinite marquees: the top ticker (xPercent:-50, 28s, linear) and the footer disclaimer (22s, linear). The right-rail "THE TAPE" prepends a new randomized sale row every 3.5s, flashes it voltage for 220ms, and triggers shake() — a GSAP fromTo jolt of the whole #floor (x/y ±1px, 0.04s, repeat 5, yoyo) so the page physically twitches on each trade. Countdown timers tick every second on the featured lot and each card. Buttons use transition:none with transform/shadow swaps on hover/active for a hard mechanical press (no easing).

Iconography

No icon font or SVG icon library. All "icons" are inline unicode glyphs set in the type: ● (live dot), ▲/▼ (price up/down), › (active nav chevron), and | (ticker separators). Up/live glyphs take the voltage color; down glyphs use ink or #888. The only true vector is the hand-built <polyline> + marker price chart in the featured lot.

Do's and Don'ts

• Do keep every corner sharp (radius 0) and draw structure with 2-3px ink rules and shadow-hard offset shadows.
• Do reserve #E8FF00 for live/up/primary signals — it loses meaning if overused.
• Do set all numbers in JetBrains Mono with tabular-nums so columns align.
• Do stretch Archivo display type with .brutal-expand and keep it uppercase.
• Don't add rounded corners, blur, gradients, or soft shadows.
• Don't introduce a second accent color or use Inter for anything but the quiet body fallback.
• Don't soften the motion — the marquees, flash, and floor-shake are linear and abrupt by design.

Known Gaps

• .brutal-expand stretch (scaleX(1.08)) and letterSpacing:-0.02em are read directly from the class but rendered widths will vary by font metrics.
• Display fontSize spans a responsive range (text-3xl hero → text-5xl footer); 48px is the representative token value.
• Tracking values for tracking-wide/widest are Tailwind defaults (~0.025em / ~0.1em), approximated where labeled.
• Marquee scroll distances depend on runtime content width; durations are exact from the GSAP calls but visual speed is content-dependent.