Joel Shinness

Design System

Internal reference for Joel and AI coding agents. Components, tokens, and utilities for consistent development.

Machine-readable format: /design-system.json

Colors

All colors use OKLCH (Oklab Lightness Chroma Hue) color space for perceptually uniform color representation. Dark mode variants reduce lightness by 5% and chroma by 0.02 for consistent visual hierarchy.

Primary Accent Colors

Yellow

CSS Var: var(--color-yellow)
OKLCH: oklch(0.85 0.18 95)
Hex: #ffef6a

Dark Mode

OKLCH: oklch(0.80 0.16 95)
Hex: #f5e03b

Turquoise

CSS Var: var(--color-turquoise)
OKLCH: oklch(0.70 0.15 195)
Hex: #4dd4c0

Dark Mode

OKLCH: oklch(0.65 0.13 195)
Hex: #2dbfaa

Magenta

CSS Var: var(--color-magenta)
OKLCH: oklch(0.65 0.20 350)
Hex: #d946ef

Dark Mode

OKLCH: oklch(0.60 0.18 350)
Hex: #c026d3

Text Color Variants (WCAG Compliant)

Adjusted for sufficient contrast on light/dark backgrounds to meet accessibility standards.

Yellow Text

CSS Var: var(--color-yellow-text)
OKLCH: oklch(0.55 0.15 95)
Hex: #b3a617

Dark Mode

OKLCH: oklch(0.85 0.18 95)
Hex: #ffef6a

Turquoise Text

CSS Var: var(--color-turquoise-text)
OKLCH: oklch(0.45 0.12 195)
Hex: #0d8577

Dark Mode

OKLCH: oklch(0.70 0.15 195)
Hex: #4dd4c0

Neutral Colors

Background Light

CSS Var: var(--color-bg-light)
OKLCH: oklch(1.0 0 0)
Hex: #ffffff

Background Dark

CSS Var: var(--color-bg-dark)
OKLCH: oklch(0.15 0 0)
Hex: #1a1a1a

Text Light

CSS Var: var(--color-text-light)
OKLCH: oklch(0.2 0 0)
Hex: #2b2b2b

Text Dark

CSS Var: var(--color-text-dark)
OKLCH: oklch(0.95 0 0)
Hex: #f2f2f2

Text Muted Light

CSS Var: var(--color-text-muted-light)
OKLCH: oklch(0.5 0 0)
Hex: #808080

Text Muted Dark

CSS Var: var(--color-text-muted-dark)
OKLCH: oklch(0.7 0 0)
Hex: #b3b3b3

Usage Guidelines

Yellow

Primary CTA buttons, hero accents, important highlights. High energy and attention-grabbing.

Turquoise

Secondary actions, card shadows/glows, section accents. Calm and modern, supports hierarchy.

Magenta

Tertiary accents, hover states, decorative elements. Creative and energetic, use sparingly.

Dark Mode Transformation

All dark mode variants reduce lightness (L) by 5% and chroma (C) by 0.02. Shadows transform to glows using the same color values for futuristic dark mode feel.

Typography

Two-tier typography system using Bricolage Grotesque for headings and DM Sans for body text. All sizes follow a 1.25 ratio scale.

Font Families

Bricolage Grotesque

CSS Variable: var(--font-heading)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Weight Examples:

Weight 600 (Semibold) — H3, H4

Weight 700 (Bold) — H2

Weight 800 (Extrabold) — H1, Buttons, Labels

Usage: All headings (H1-H4), buttons, labels, section titles

DM Sans

CSS Variable: var(--font-body)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Weight Examples:

Weight 400 (Regular) — Body text, paragraphs

Weight 500 (Medium) — Emphasized text

Weight 600 (Semibold) — Strong emphasis

Usage: Body text, paragraphs, form inputs, navigation, captions

Type Scale

1.25 ratio scale for consistent vertical rhythm.

xs

0.75rem (12px)

The quick brown fox jumps over the lazy dog

sm

0.875rem (14px)

The quick brown fox jumps over the lazy dog

base

1rem (16px)

The quick brown fox jumps over the lazy dog

lg

1.125rem (18px)

The quick brown fox jumps over the lazy dog

xl

1.25rem (20px)

The quick brown fox jumps over the lazy dog

2xl

1.5rem (24px)

The quick brown fox jumps over the lazy dog

3xl

1.875rem (30px)

The quick brown fox jumps over the lazy dog

4xl

2.25rem (36px)

The quick brown fox jumps over the lazy dog

Font Weight Tokens

--font-weight-h1: 800

Extrabold — H1 headings

--font-weight-h2: 700

Bold — H2 headings

--font-weight-h3: 600

Semibold — H3 headings

--font-weight-h4: 500

Medium — H4 headings

--font-weight-body: 400

Regular — Body text

Line Height Tokens

--leading-tight: 1.25

Headings, labels

--leading-normal: 1.5

Body text default

--leading-relaxed: 1.75

Long-form content

Components

Button

Neobrutalist buttons with 2-layer shadow effect. Supports three color variants and three sizes.

Color Variants

Size Variants

As Link

Link Button

Usage Example

Props

Prop Type Default Options
variant string 'yellow' 'yellow' | 'turquoise' | 'magenta'
size string 'md' 'sm' | 'md' | 'lg'
href string undefined Any valid URL (renders as <a> instead of <button>)
type string 'button' 'button' | 'submit' | 'reset'

Interactive States

  • Hover: Button lifts up (-2px), shadow grows by 2px
  • Active: Button presses down (+2px), shadow shrinks to 2px
  • Focus: Double ring technique (WCAG 2.4.13 compliant) - 2px gap + 4px ring
  • Disabled: Reduced opacity (not shown in demo, use disabled attribute)

Card

Container component with colored shadow. Supports three variants and optional stacked effect. Shadows transform to soft glows in dark mode.

Color Variants

Yellow

Primary accent shadow

Turquoise

Secondary accent shadow

Magenta

Tertiary accent shadow

Stacked Effect

Stacked Card

Multiple layers create depth effect

Stacked Card

Works with all color variants

Usage Example

Props

Prop Type Default Description
variant 'yellow' | 'turquoise' | 'magenta' 'yellow' Shadow/glow color
stacked boolean false Enable multi-layer stacked effect
class string '' Additional CSS classes

Dark Mode

In dark mode, offset shadows transform to soft glows (box-shadow: 0 0 20px) for a futuristic feel. Stacked cards remove the offset shadow in dark mode to maintain clean aesthetics.

Input

Form input with label, validation, and WCAG 2.4.13 compliant focus states. Supports three color variants for focus border.

Standard Input

Error State

Email is required

Name must be at least 2 characters

Focus Color Variants

Usage Example

Props

Prop Type Default Description
variant 'yellow' | 'turquoise' | 'magenta' 'yellow' Focus border color
label string undefined Input label text
error string undefined Error message (triggers error state)
id string auto-generated Input ID (auto-links label)
...rest HTMLInputAttributes - All standard input attributes (type, placeholder, required, etc.)

Accessibility Features

  • aria-invalid: Set to "true" when error prop is present
  • aria-describedby: Links to error message ID for screen readers
  • Focus ring: Double ring technique (2px gap + 4px ring) for WCAG 2.4.13 compliance
  • Auto-generated IDs: Ensures label-input association without manual ID management
  • Color-coded borders: Focus border changes to variant color for visual feedback

Badge

Metric display badge with value and optional description. Used for trust signals and key statistics. Features isometric shadow effect.

Color Variants

500+ per year

Yellow variant

50+ completed

Turquoise variant

98%

Magenta variant (no description)

Usage Example

Props

Prop Type Default Description
label string required Accessible label for screen readers (aria-label)
value string required The metric value (e.g., "500+", "98%")
description string undefined Optional subtext (e.g., "per year")
variant 'yellow' | 'turquoise' | 'magenta' 'yellow' Text color variant
class string '' Additional CSS classes

Accessibility

  • role="group": Groups value and description semantically
  • aria-label: Uses label prop for screen reader context
  • Isometric shadow: Uses iso-shadow utility class for neobrutalist aesthetic

CheckboxGroup

Accessible multi-select checkbox group with neobrutalist styling. Uses fieldset/legend for screen reader compatibility.

Yellow Variant

Example options (yellow) (optional)

Turquoise Variant

Example options (turquoise) (optional)

Magenta Variant

Example options (magenta) (optional)

Usage Example

Props

Prop Type Default Description
name string required Form field name for checkbox values
legend string required Accessible group label (renders in fieldset legend)
options Array<{ value, label }> required Checkbox options to render
variant 'yellow' | 'turquoise' | 'magenta' 'yellow' Color variant for checked state
class string '' Additional CSS classes

Accessibility Features

  • fieldset/legend: Semantic HTML grouping for screen readers (WCAG H71)
  • Focus ring: Double ring technique (2px gap + 4px ring) for WCAG 2.4.13 compliance
  • Hover target: Entire label is interactive for larger touch target
  • Checkmark indicator: Pure CSS ::after pseudo-element for themability
  • Dark mode: Automatic color inversion for checkboxes and labels

Interactive States

  • Hover: Label background lightens (light mode) or darkens (dark mode)
  • Checked: Checkbox fills with variant color + 3px shadow + checkmark appears
  • Focus: Double ring technique preserves both focus ring and checkbox shadow

Utilities

Isometric utilities provide hard offset shadows in light mode that transform to soft glows in dark mode, 3D rotation effects, and explicit glow effects for neobrutalist aesthetics.

Shadow Utilities

Hard offset shadows in light mode, soft glows in dark mode. All shadows use currentColor to inherit text color.

Size Variants

iso-shadow-sm

3px offset

iso-shadow

5px offset (default)

iso-shadow-lg

8px offset

Classes

Class Light Mode Dark Mode
.iso-shadow-sm 3px 3px 0 currentColor 0 0 15px color-mix(20%)
.iso-shadow 5px 5px 0 currentColor 0 0 20px color-mix(40%)
.iso-shadow-lg 8px 8px 0 currentColor 0 0 30px color-mix(60%)

Dark Mode Transformation

The same element automatically transforms from a hard offset shadow to a soft glow based on theme. Toggle dark mode to see the transformation.

Light Mode: Hard Shadow

box-shadow: 5px 5px 0 currentColor

Dark Mode: Soft Glow

box-shadow: 0 0 20px color-mix(in oklch, currentColor 40%, transparent)

Why this matters: Maintains visual hierarchy while creating a futuristic dark mode feel. The glow preserves the accent color while adapting to the darker background.

Usage Example

<div class="border-3 border-turquoise iso-shadow text-turquoise">
  Shadow becomes glow in dark mode
</div>

Glow Utilities

Explicit glow effects that always glow, regardless of theme. Use when you want glow in light mode too.

Intensity Variants

iso-glow-subtle

15px, 20% opacity

iso-glow

20px, 40% opacity

iso-glow-strong

30px, 60% opacity

Use Cases

  • Accent elements that should glow in both light and dark mode
  • Hover states (see .iso-hover-glow below)
  • Decorative elements that need consistent glow across themes
  • CTAs or highlights that benefit from extra visual emphasis

Usage Example

<div class="iso-glow-strong text-magenta">
  Always glows
</div>

Rotation Utilities

3D isometric rotation transforms for creating depth effects. Use with .iso-container wrapper for proper 3D rendering.

Rotation Variants

30°

.iso-rotate-subtle

rotateX(30deg) rotateZ(30deg)

45°

.iso-rotate (standard)

rotateX(45deg) rotateZ(45deg)

60°X 45°Z

.iso-rotate-steep

rotateX(60deg) rotateZ(45deg)

Face Positioning Classes

For multi-face isometric elements (cubes, boxes). Use with .iso-container parent.

Class Transform
.iso-face-front translateZ(20px)
.iso-face-top rotateX(90deg) translateZ(20px)
.iso-face-side rotateY(90deg) translateZ(20px)

Hover Utilities

.iso-hover-lift

Lifts element -8px on hover with 200ms transition.

Hover me
.iso-hover-glow

Adds glow on hover with 200ms transition.

Hover me

Usage Example

<div class="iso-container">
  <div class="iso-rotate iso-shadow bg-yellow w-24 h-24">
    Isometric box
  </div>
</div>