Design that shouts and still passes AA.

Philosophy

Anti-corporate, raw, high-contrast, energetic, ironic. Every pixel does a job.

VISUAL METAPHOR

Print graphics: flat spot color and offset shadows like a cheap two-pass print.

Early Web 1.0: visible boxes and default-looking controls.

Pop-art collage: stickers, tilted labels, color blocking.

Functional starkness: decoration is always structural.

CORE PRINCIPLES

Honest structure. Show the box.
Flat color, hard edge. One fill, one stroke, one shadow.
Loud, but ordered. Everything snaps to 4px.
Black is the glue. Accents never touch.
One shout per view.
Accessibility is the feature.

Color & surfaces

Black and paper carry structure. Accents carry attention. Click any swatch to copy its hex.

Base

Accents

Layering rules

60 / 30 / 10. Paper and white, black structure, then accent.

One dominant accent per section, plus up to two spots.

Black separates. Two accent fills never touch.

Geometry, borders & shadows

Hard black strokes and opaque, zero-blur offsets. Light comes from the top left.

Shadow scale

2px tag

4px button

6px card

8px modal

12px hero

Borders and radius

2px thin

3px default

4px heavy

dashed off

Soft 8px

Pill

Formulas

.nb-box { border: 3px solid #000; border-radius: 0;
          box-shadow: 6px 6px 0 #000; }          /* blur: 0, always */

/* Tailwind */
class="border-3 border-black shadow-[6px_6px_0_#000]"

Typography & layout

Archivo Black for impact, Space Grotesk for reading, JetBrains Mono for labels.

display-2xl / Archivo Black / 0.9

Loud type

h2 / Archivo Black / 2.25rem

Section headline

h3 / Space Grotesk 700 / 1.5rem

Card title

body / Space Grotesk 500 / 1rem, max 65ch

Body copy stays at 16px or larger, with 1.6 line height and never below weight 400.

label / JetBrains Mono 700 / 0.875rem

BUTTON LABEL

LAYOUT RULES

Asymmetric grids: 12 columns split 7/5 or 8/4.

Thick dividers: 4px black rules between sections.

Controlled overlap: max 16px, rotate decor 1 to 3 degrees.

Gutters: 24px minimum, 16px on mobile.

decor only, aria-hidden

Components

Everything below is live. Hover, press and tab through it.

Buttons: default, hover lifts, active sinks

Cards

HEADER BAND01

Accent band, white body, cream footer.

Footer

COLORED BODY

Black text stays AAA on cyan.

ON BLUE

White text only on electric blue.

Form controls

MESSAGE

⚠ Enter a valid message

Subscribe to updates Dark mode: OFF

Badges, tags, tooltips

SUCCESSWARNINGINFONEW designselected

Motion & accessibility

Transitions are 80ms with stepped easing. Contrast is checked by construction.

Black on yellow≈16:1 AAA

Black on cyan≈14:1 AAA

Black on green≈12.5:1 AAA

Black on lilac≈9.5:1 AAA

Black on pink≈6:1 AA

Black on red≈5.6:1 AA

White on blue≈5.2:1 AA

Yellow on black≈16:1 AAA

Rules

Topic	Spec
Motion	`80ms` press, `100ms` max, `steps(1,end)`; animate only transform, box-shadow, background.
Focus	`outline: 4px solid #2F5BFF; outline-offset: 4px` (yellow on dark surfaces).
Targets	44px minimum, 8px between targets.
Never	White on yellow, cyan, green, lilac or orange; accent on accent; color-only status.
Preferences	Honor `prefers-reduced-motion`, `prefers-contrast` and forced-colors.

Tokens

Copy into CSS, Tailwind or Tokens Studio. The full spec is in the downloadable markdown file.

:root {
  --nb-black:#000; --nb-paper:#FFFBEB;
  --nb-yellow:#FFE500; --nb-cyan:#00E5FF;
  --nb-pink:#FF2E93; --nb-green:#00E676;
  --nb-blue:#2F5BFF;
  --border:3px solid #000;
  --shadow-sm:4px 4px 0 #000;
  --shadow-md:6px 6px 0 #000;
}

// tailwind.config.js
boxShadow: {
  'nb-sm':'4px 4px 0 0 #000',
  'nb-md':'6px 6px 0 0 #000',
  'nb-lg':'8px 8px 0 0 #000'
},
borderWidth: { 3:'3px' },
fontFamily: {
  display:['"Archivo Black"'],
  mono:['"JetBrains Mono"']
}

Download the full .md