# Comic Halftone - Complete Design System
> Version 1.0 - Theme 23 in the catalog - slug `comic-halftone`

---

## Table of Contents

1. [System Overview](#1-system-overview)
2. [CSS Custom Properties - Master Token Sheet](#2-css-custom-properties--master-token-sheet)
3. [Color Palette](#3-color-palette)
4. [Typography System](#4-typography-system)
5. [Spacing System](#5-spacing-system)
6. [Border Radius System](#6-border-radius-system)
7. [Shadow & Elevation System](#7-shadow--elevation-system)
8. [Component Specifications](#8-component-specifications)
9. [Layout & Grid System](#9-layout--grid-system)
10. [Animation & Transition Tokens](#10-animation--transition-tokens)
11. [Z-Index System](#11-z-index-system)
12. [Breakpoints](#12-breakpoints)
13. [Icon System](#13-icon-system)
14. [State Definitions](#14-state-definitions)

---

## 1. System Overview

**Design Language:** Comic Halftone
**Mode:** Light
**Typefaces:** Bangers + Comic Neue
**Personality:** Pop-art comic print: off-white paper, chunky ink borders, offset hard shadows, halftone dots and red-yellow-blue panel fills.
**Best Suited For:** Comic and pop-art brands, kids products, playful marketing, event posters, merch stores

**Core Principles:**
- Ink black frames everything: 3px borders on every control and panel.
- Red, yellow and blue are fills, never body text.
- Hard offset shadows, never blur.
- Bangers shouts the headings, Comic Neue carries the words.

---

## 2. CSS Custom Properties - Master Token Sheet

All tokens are scoped under `[data-ds="comic-halftone"]`. Nothing is defined at `:root`. The same sheet ships as `tokens.css` in this system's folder.

```css
/*
 * Comic Halftone - scoped design-system tokens (Theme 23 in catalog).
 * Ben-Day dots and action panels. Bangers + Comic Neue.
 */

[data-ds="comic-halftone"] {
  --ds-color-bg-base: #fffbe8;
  --ds-color-bg-surface: #ffffff;
  --ds-color-bg-sunken: #f5eed2;
  --ds-color-bg-secondary: #f5eed2;
  --ds-color-bg-overlay: rgba(17,17,17,0.5);

  --ds-color-primary: #e63946;
  --ds-color-primary-hover: #d32836;
  --ds-color-primary-active: #b81f2c;
  --ds-color-primary-fg: #ffffff;

  --ds-color-text-primary: #111111;
  --ds-color-text-secondary: #38342a;
  --ds-color-text-tertiary: #4a4536;
  --ds-color-text-muted: #5c5340;
  --ds-color-text-disabled: #9a917c;
  --ds-color-text-inverse: #ffffff;

  --ds-color-border-light: #111111;
  --ds-color-border-medium: #111111;
  --ds-color-border-strong: #111111;

  --ds-color-success: #1b7441;
  --ds-color-success-bg: #d7f2e0;
  --ds-color-warning: #8a5700;
  --ds-color-warning-bg: #fff0cc;
  --ds-color-error: #c0262d;
  --ds-color-error-bg: #fde3e4;
  --ds-color-info: #1d5fbf;
  --ds-color-info-bg: #dce9fb;

  --ds-font-display: "Bangers", "Comic Neue", system-ui, sans-serif;
  --ds-font-body: "Comic Neue", system-ui, sans-serif;
  --ds-font-label: "Comic Neue", system-ui, sans-serif;
  --ds-label-transform: none;
  --ds-label-tracking: 0.01em;
  --ds-label-weight: 700;
  --ds-heading-tracking: 0.04em;
  --ds-heading-weight: 400;

  --ds-radius-badge: 999px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 4px;
  --ds-radius-lg: 4px;
  --ds-radius-xl: 8px;
  --ds-radius-full: 9999px;

  --ds-border-width: 3px;

  --ds-shadow-card: 7px 7px 0 #111111;
  --ds-shadow-dropdown: 5px 5px 0 #111111;
  --ds-shadow-modal: 9px 9px 0 #111111;
  --ds-shadow-focus: 4px 4px 0 #3a86ff;
  --ds-shadow-btn-hover: 5px 5px 0 #111111;

  --ds-btn-text-transform: none;
  --ds-btn-letter-spacing: 0.06em;
  --ds-btn-font-weight: 700;
  --ds-btn-active-transform: translate(4px, 4px);
  --ds-btn-secondary-bg: #ffd23f;
  --ds-btn-secondary-text: #111111;
  --ds-btn-secondary-border: #111111;
  --ds-btn-secondary-hover-bg: #f5c61f;
  --ds-btn-outline-text: #111111;
  --ds-btn-outline-border: #111111;
  --ds-btn-outline-hover-bg: #f5eed2;
  --ds-btn-outline-hover-text: #111111;

  --ds-table-header-bg: #ffd23f;
  --ds-table-header-text: #111111;
  --ds-table-header-border-bottom: 3px solid #111111;
  --ds-table-container-radius: 4px;
  --ds-table-container-border: 3px solid #111111;

  --ds-focus-ring: 4px 4px 0 #3a86ff;

  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-duration-fast: 0ms;
  --ds-duration-base: 120ms;
  --ds-duration-slow: 200ms;
}

/* Buttons speak Bangers, tilted at most -2deg; pressed buttons lose their shadow. */
[data-ds="comic-halftone"] .ds-btn { font-family: var(--ds-font-display); font-size: 1.05em; box-shadow: 4px 4px 0 #111111; }
[data-ds="comic-halftone"] .ds-btn:active:not(:disabled) { box-shadow: 0 0 0 #111111; }
[data-ds="comic-halftone"] .ds-bento-title { transform: rotate(-1.5deg); transform-origin: left bottom; }
/* Dots stay in the background, never behind body text: pattern lives on the showcase backdrop only. */
[data-ds="comic-halftone"] .ds-bento-scope { background-image: radial-gradient(circle, #f2e3b3 1.2px, transparent 1.3px); background-size: 14px 14px; background-color: var(--ds-color-bg-base); }
```

---

## 3. Color Palette

### 3.1 Core Colors

|Role|Token|Value|Usage|
|---|---|---|---|
|bg-base|`--ds-color-bg-base`|`#fffbe8`|Page paper|
|bg-surface|`--ds-color-bg-surface`|`#ffffff`|Cards and panels|
|bg-sunken|`--ds-color-bg-sunken`|`#f5eed2`|Inputs, wells|
|primary|`--ds-color-primary`|`#e63946`|Main action red|
|secondary-bg|`--ds-btn-secondary-bg`|`#ffd23f`|Secondary action|
|text-primary|`--ds-color-text-primary`|`#111111`|Ink text|
|text-secondary|`--ds-color-text-secondary`|`#38342a`|Supporting ink|

### 3.2 Semantic Colors

|State|Token|Ink|Background|
|---|---|---|---|
|success|`--ds-color-success`|`#1b7441`|`#d7f2e0`|
|warning|`--ds-color-warning`|`#8a5700`|`#fff0cc`|
|error|`--ds-color-error`|`#c0262d`|`#fde3e4`|
|info|`--ds-color-info`|`#1d5fbf`|`#dce9fb`|

### 3.3 Contrast Checks

- Body text `#111111` on `#fffdf0` paper: 17.9:1.
- Button text `#fffdf0` on primary red `#d92b2b`: 5.2:1.
- Yellow `#ffd42a` and blue `#2b7fd9` are panel fills and badges, never paragraph text on paper.

---

## 4. Typography System

### 4.1 Font Families

|Role|Family|Usage|
|---|---|---|
|Display|Bangers|Headings, hero titles, buttons|
|Body|Comic Neue|Body copy, form fields|
|Label|Comic Neue|Buttons, badges, labels|

### 4.2 Type Scale


| Token | Size | Weight | Tracking | Use |
|---|---|---|---|---|
| Display | 48-64px | 400 | 0 | Hero title |
| H1 | 36px | 400 | 0 | Page title |
| H2 | 28px | 400 | 0 | Section title |
| H3 | 20px | 400 | 0 | Card title |
| Body | 16px | 400 | 0 | Paragraphs |
| Label | 13px | 700 | 0.01em | Buttons, badges |

Lilita One ships in a single weight (400). Its drawn strokes are already heavy - never synthesise a bolder weight.

### 4.3 Google Fonts Import Block

Fonts load through the shared `DESIGN_SYSTEM_FONTS_URL` in `app/design-systems/fonts.ts`. Never `@import` a remote font URL from CSS; the production bundler drops it.

---

## 5. Spacing System


Base unit: 4px. Use only these steps.

| Token | Value |
|---|---|
| space-1 | 4px |
| space-2 | 8px |
| space-3 | 12px |
| space-4 | 16px |
| space-6 | 24px |
| space-8 | 32px |
| space-12 | 48px |
| space-16 | 64px |

Component padding: card 22px, button 11px 22px (md), input 11px 14px, badge 3px 12px.

---

---

## 6. Border Radius System

|Token|Value|
|---|---|
|badge|`999px`|
|sm|`4px`|
|md|`4px`|
|lg|`4px`|
|xl|`8px`|
|full|`9999px`|

Square corners keep the printed-panel look; only badges round fully.

---

## 7. Shadow & Elevation System

|Token|Value|
|---|---|
|card|`7px 7px 0 #111111`|
|dropdown|`5px 5px 0 #111111`|
|modal|`9px 9px 0 #111111`|
|focus|`4px 4px 0 #3a86ff`|
|btn-hover|`5px 5px 0 #111111`|

---

## 8. Component Specifications

### 8.1 Buttons

Bangers at 1.05em on a 3px ink border with a 4px offset ink shadow. Active state slides the button onto its shadow.

### 8.2 Form Inputs

Paper-white fields, 3px ink borders, focus ring is the blue fill at 40% alpha.

### 8.3 Labels

Comic Neue bold, sentence case, ink black.

### 8.4 Card / Surface

White panel, 3px ink border, 6px offset ink shadow, square corners.

### 8.5 Badge

Yellow or blue fill with a 2px ink border, square or fully round, uppercase.

### 8.6 Checkbox, Radio and Switch

Checkboxes and radios get a 3px ink box; the check is a red Bangers-style X stroke.

### 8.7 Table

Header row is ink black with paper text; row borders 2px ink; square container.

### 8.8 Dropdown Panel

White panel, 3px ink border, 5px offset ink shadow.

---

## 9. Layout & Grid System


| Container | Max width |
|---|---|
| Narrow (forms, articles) | 640px |
| Default | 1040px |
| Wide (dashboards) | 1280px |

12-column grid, 24px gutters on desktop, 16px on mobile.

---

---

## 10. Animation & Transition Tokens


| Token | Value |
|---|---|
| Easing | `cubic-bezier(0.4, 0, 0.2, 1)` |
| Fast | 0ms |
| Base | 120ms |
| Slow | 200ms |

Animate colour, transform, opacity and shadow only. Never animate layout properties.

---

---

## 11. Z-Index System


| Layer | Value |
|---|---|
| Base | 0 |
| Sticky header | 10 |
| Dropdown | 20 |
| Modal backdrop | 40 |
| Modal | 50 |
| Toast | 60 |

---

---

## 12. Breakpoints


| Name | Min width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |

Page padding: 16px below md, 24px at md, 32px at lg and up.

---

---

## 13. Icon System

Icons use 2.5px strokes with fully square caps; no rounded terminals. Sizes follow the shared scale: 16px inline, 20px in buttons, 24px standalone.

---

## 14. State Definitions

- Hover uses the `--ds-color-primary-hover` and `--ds-shadow-btn-hover` tokens.
- Active applies `--ds-btn-active-transform` and the `--ds-color-primary-active` tone.
- Focus always renders `--ds-focus-ring`; never remove it without a visible replacement.
- Disabled drops to 50% opacity with `not-allowed` cursor and no shadow.