name: null-bank-design
version: alpha
description: >
  A near-black "ink" (#0C0D0A) editorial fintech surface that flips to a warm
  "bone" paper (#ECEADC) for manifesto and stat sections. The voltage is an
  acid lime (#C6F03C), with a cyan (#4BD0C0) for struck-through "they charge"
  figures and a signal orange (#FF5A36) for live/alert accents. The signature
  moves are oversized Archivo Black display type at line-height .86, kinetic
  per-character mask reveals, dual-speed velocity marquees, a scroll-pinned
  word-mask fee table, and a full ink↔bone theme inversion under a pinned
  headline. Mono labels (Spline Sans Mono) carry tracked, uppercase legal/data
  metadata. Geometry is strictly rectangular — zero border-radius anywhere,
  hairline rgba borders and hard 4–6px offsets stand in for shadows.
colors:
  # Surface
  ink: '#0C0D0A'          # primary page surface (body, nav, hero, dark sections)
  bone: '#ECEADC'         # inverted paper surface (divider, s02, s04, s05 pin start)
  # Text
  on-ink: '#E9E7D8'       # body/heading text on ink
  on-bone: '#15160F'      # body/heading text on bone
  muted-lime: '#7C8A3E'   # muted label/metadata text on ink
  muted-ink: '#5d6240'    # muted label/metadata text on bone
  # Brand / Voltage
  lime: '#C6F03C'         # primary accent: links, CTAs, zero values, fills, selection
  cyan: '#4BD0C0'         # struck-through "they charge" figures
  signal: '#FF5A36'       # live chip, pulse, focus outline, CTA hover
  stat-cyan: '#2e9c8e'    # darker cyan for the cyan stat number on bone
  # Hairlines (rgba over surface)
  hairline-ink: 'rgba(233, 231, 216, .12)'  # nav/ticker/footer borders on ink
  hairline-bone: 'rgba(233,231,216,.16)'    # hero table row borders
typography:
  display:
    fontFamily: "'Archivo Black', 'Arial Black', sans-serif"
    fontSize: clamp(56px, 14vw, 200px)
    fontWeight: 400
    lineHeight: 0.84
    letterSpacing: -0.045em
    textTransform: uppercase
  body:
    fontFamily: "'Hanken Grotesk', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'Spline Sans Mono', ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.12em
    textTransform: uppercase
rounded:                  # brutalist: everything is square
  none: 0px
  full: 9999px            # only the 8px live-chip pulse dot
spacing:                  # rem-based, roughly an 8px base with clamp() fluid pads
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  nav-cta:
    backgroundColor: 'transparent'
    textColor: '{colors.lime}'
    border: '2px solid {colors.lime}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '.55rem .9rem'
  live-chip:
    backgroundColor: 'transparent'
    textColor: '{colors.signal}'
    border: '1px solid {colors.signal}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '.35rem .7rem'
  doc-tab:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '.45rem .9rem'
  signup-input:
    backgroundColor: 'transparent'
    textColor: '{colors.on-ink}'
    border: '3px solid {colors.on-ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '1.3rem 1.5rem'
  signup-button:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.ink}'
    border: '3px solid {colors.lime}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '1.1rem 2rem'
  fee-row:
    backgroundColor: 'transparent'
    textColor: '{colors.on-ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '.75rem 0'
motion:
  ease: 'cubic-bezier(.2,.8,.2,1) — global --ease easing for all transitions'
  hero-char-reveal: 'per-char translateY(105%)→0 + clip-path wipe, .8s, 32ms stagger'
  hero-scrub: 'scroll-scrubbed letter-spacing -.045em→.055em + translateY drift'
  ticker: 'tickerMove translateX(-50%) 42s linear infinite'
  divider-marquee: 'rAF velocity marquee, big .6px/frame + thin -1.1px/frame, scroll-velocity boosted'
  pulse: 'live dot scale 1→.7 + opacity 1→.35, 1.6s ease-in-out infinite'
  count-up: 'rAF count-up to data-count, 1100ms, cubic ease-out, 200ms stagger'
  s01-word-fill: 'pinned 300vh; words fill lime across scroll [0,0.62], rows reveal [0.62,0.96]'
  s04-tumble: 'headline lines translateY(105%)→0, .9s, text-shadow 6px 6px lime'
  s05-inversion: 'pinned 230vh; bone↔ink background + text color crossfade [0.25,0.75]'
icons:
  library: none — no icon library
  style: typographic glyphs only (● bullet dot, → arrow, § section, · separator)
  color: '{colors.lime}'

NULL/BANK

null-bank-design · alpha

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

Overview

NULL/BANK is a radical-transparency challenger-bank landing page rendered as an editorial, brutalist document. The default surface is near-black ink #0C0D0A with warm off-white text #E9E7D8; alternating sections invert to a bone paper #ECEADC with near-black ink text #15160F. The single voltage is an acid lime #C6F03C — it carries links, CTAs, "$0.00" zero values, the selection highlight, and the headline word-fill. Two supporting hues do specific jobs: cyan #4BD0C0 always strikes through the competitor "they charge" figures, and signal orange #FF5A36 marks live/alert state (the pulsing chip, the focus ring, the CTA hover). The type story is a hard contrast pairing: enormous Archivo Black display set uppercase at line-height .84–.86 with tight -.04em tracking, against Spline Sans Mono used everywhere for tracked, uppercase legal and data metadata, with Hanken Grotesk for the few running sentences. Geometry is uncompromisingly rectangular — there is no border-radius anywhere except the tiny pulse dot — and depth comes only from hairline rgba borders, 2–4px solid rules, and a single 6px offset text-shadow. The signature moves are kinetic: a per-character hero mask reveal, dual-speed velocity-boosted marquees, a scroll-pinned word-mask fee table with count-up stats, and a full ink↔bone theme inversion crossfade under a pinned headline.

Colors

Surface. The page runs on ink #0C0D0A (body, ticker, nav, hero, §01, §03, §05-after, footer). Alternating sections invert to bone #ECEADC (divider, §02 stat wall, §04 manifesto, §05 pin start state).

Text. On ink, headings and body use on-ink #E9E7D8; on bone they use on-bone #15160F. Muted metadata uses muted-lime #7C8A3E on ink and muted-ink #5d6240 on bone — these carry the tracked mono labels, eyebrows, fine print, and footer link lists.

Brand / Voltage. lime #C6F03C is the only brand color: nav CTA border/text, the wordmark dot, hover fills, .lime-link links, zero-value cells, the §01 word-fill, doc-tab background, signup button, progress bar, ::selection background, and :focus-state input border emphasis. cyan #4BD0C0 is reserved for the struck-through competitor charges in the hero table and fee table. signal #FF5A36 marks live/alert: the live-chip border/text, the pulse dot, the :focus-visible outline, and the signup button hover. A darker stat-cyan #2e9c8e is used only for the cyan stat number on the bone surface.

Hairlines. Dividing rules are translucent off-white over ink: rgba(233,231,216,.10–.16) for the hero frame, nav/ticker/footer borders, and table row rules; the divider band uses solid 4px ink borders.

Typography

Three Google Fonts, loaded via one css2 link: Archivo Black (display), Hanken Grotesk (400–800, body), and Spline Sans Mono (400–700, mono/data). All three are open-source Google Fonts, so no substitution is needed. Display is always uppercase, tightly tracked (-.04em to -.045em), and set at very tight line-heights (.84–.86). Mono is the workhorse for labels: 11–13px, uppercase, tracked .06em–.18em, with tabular-nums for figures.

Token	Size	Weight	Line-height	Tracking	Usage
display (hero)	clamp(56px,14vw,200px)	400	.84	-.045em	hero H1
display (section)	clamp(44px,9vw,150px)	400	.84	-.04em	§01/§02/§04 h2
display (stat num)	clamp(48px,8vw,84px)	400	1	-.03em	stat numbers
body	18px	400	1.6	0	running prose
hero-intro	clamp(15px,1.4vw,19px)	400	1.55	0	hero lede
mono label	11–13px	500–700	1.6	.06–.18em	labels, ticker, eyebrows, fine print
nav links / CTA	12px	500	—	.12em	nav

Layout

Spacing is rem-based on roughly an 8px feel, with fluid clamp() section padding (e.g. clamp(1.2rem,4vw,3rem) horizontal, clamp(4rem,10vw,9rem) vertical). The page is a vertical sequence of full-bleed sections with no central max-width container — content runs edge-to-edge inside the section padding (only the signup form caps at 60rem and prose at 46–68ch). Two sections are tall scroll-pinned compositions: §01 is 300vh with a sticky 100vh pin, §05 is 230vh with a sticky pin. Internal grids: hero-lower 5fr/4fr, §02 7fr/5fr, §04 two equal columns, footer repeat(4,1fr). The hero is a min-height:94vh flex column with a 1px inset frame border. Whitespace is generous and editorial, broken by the full-width divider marquee band between sections.

Elevation & Depth

There are no box-shadows. Depth is entirely flat and graphic: hairline rgba(233,231,216,.10–.16) borders, 2px–4px solid rules (table tops, stat separators, divider band), the 1px inset hero frame, and 3px input borders. The single dimensional flourish is the §04 headline text-shadow: 6px 6px 0 var(--lime) — a hard, offset lime drop. A fixed grain PNG overlay (mix-blend-mode: overlay; opacity .10) sits above everything at z-index 200.

Shapes

Brutalist and rectangular throughout — border-radius is 0 on every button, input, chip, tab, and card. The only rounded element is the 8px live-pulse dot (border-radius: 50%). Emphasis comes from sharp corners, thick borders, and strikethroughs rather than softening.

Components

• nav-cta ("Open Account →") — transparent, 2px solid lime, lime text, mono uppercase; hover fills lime with ink text. Square.
• live-chip ("0 Hidden Fees · Live") — transparent, 1px solid signal, signal text, with an animated pulse dot. Square.
• doc-tab ("§ 01 / What They Hide") — solid lime fill, ink text, mono uppercase bold. Square.
• signup-input (email) — transparent, 3px solid on-ink, mono uppercase; on focus border turns signal and bg lightens to rgba(233,231,216,.04).
• signup-button ("Claim Account →") — solid lime fill, ink text, Archivo Black; hover swaps to signal fill with bone text; active scale(.97).
• fee-row — mono grid row, name uppercase bold, where in muted-lime, they charge struck in cyan, we charge zero in lime; reveals on scroll.
• stat — bone surface, mono label + giant Archivo Black tabular number, count-up animated; top 2px on-bone rule between stats.
• s03-row (numbered product list) — lime mono number, Archivo Black name, mono detail; the featured row inverts to a full lime fill with ink text.
• lime-link / bone-link — underlined 2px, offset 3px; hover fills lime.

Motion

A single global easing cubic-bezier(.2,.8,.2,1) (--ease) governs transitions. The hero headline reveals per-character via translateY(105%)→0 + clip-path wipe on a 32ms stagger, then scroll-scrubs its letter-spacing and Y drift via a rAF loop. The divider runs dual velocity marquees (big .6px/frame forward, thin -1.1px/frame, both boosted by scroll velocity). Stat numbers count up over 1100ms with a cubic ease-out on a 200ms stagger. §01 is a pinned 300vh scene: headline words fill lime across [0,0.62] of progress, then fee rows reveal across [0.62,0.96], with a lime progress bar. §04 headline lines tumble up translateY(105%)→0 over .9s. §05 is a pinned 230vh theme inversion: the background and text crossfade bone↔ink across [0.25,0.75] via interpolated rgb() mixing. The live dot pulses 1.6s infinitely; the ticker scrolls 42s linear infinitely.

Iconography

No icon library. All "icons" are typographic glyphs: the ● bullet dot (lime, in the wordmark and ticker), → arrows on CTAs/links, § for section markers, and · separators in marquees and metadata. Color defaults to lime for the accent dot, otherwise inherits the surrounding text color.

Do's and Don'ts

• Do keep every corner square — radius is 0 system-wide except the pulse dot.
• Do reserve cyan strictly for struck-through "they charge" figures and lime for "$0.00 / we charge" values; the contrast is the whole argument.
• Do set all display type uppercase, tightly tracked, at line-height .84–.86.
• Do use Spline Sans Mono for every label, figure, and piece of metadata, tracked and uppercase, with tabular numerals.
• Do invert whole sections between ink and bone rather than tinting within one.
• Don't add box-shadows, gradients, or rounded corners — depth is hairlines, thick rules, and one hard offset text-shadow only.
• Don't introduce a fourth color or use signal orange for anything but live/alert/focus state.
• Don't soften the kinetic moves — the per-char reveal, velocity marquees, count-ups, and theme inversion are the identity.

Known Gaps

• Archivo Black is a single-weight face; its CSS font-weight is reported as 400 (the file has no usable bold axis) though it renders heavy.
• The mono token size (12px/weight 500) is the dominant label setting; actual uses range 11–13px and weight 500–700 per context.
• Velocity-marquee speeds, count-up easing, and inversion crossfade ranges are read from the rAF JavaScript, not declarative CSS, so exact on-screen pacing depends on scroll velocity at runtime.
• The grain texture is an external CDN PNG; only its blend (overlay), size (280px), and opacity (.10) are tokens here.