# Comic Halftone - Construction Instructions & AI Prompting Guide
> Version 1.0 - Theme 23 in the catalog - slug `comic-halftone`

---

## Table of Contents

1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [Font Law](#2-font-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Shadow & Elevation Rules](#5-shadow--elevation-rules)
6. [Component Construction Guides](#6-component-construction-guides)
7. [Interactive States](#7-interactive-states)
8. [Layout Rules](#8-layout-rules)
9. [Anti-Patterns](#9-anti-patterns)
10. [AI Prompting Guide](#10-ai-prompting-guide)
11. [Pre-Ship Checklist](#11-pre-ship-checklist)

---

## 1. Design Philosophy & Core Rules

Pop-art comic print: off-white paper, chunky ink borders, offset hard shadows, halftone dots and red-yellow-blue panel fills.

### The Rules
1. Ink black frames everything: 3px borders on every control and panel.
2. Red, yellow and blue are fills, never body text.
3. Hard offset shadows, never blur.
4. Bangers shouts the headings, Comic Neue carries the words.
5. Halftone dots belong on hero panels and badges, not behind paragraphs.

---

## 2. Font Law

Use only Bangers and Comic Neue. Fallback stacks end in `system-ui, sans-serif`.

- Display and headings: Bangers, per the type scale in the design-system doc.
- Body: Comic Neue.
- Labels, buttons and badges: Comic Neue.
- Never mix in a font from another system. If a glyph is missing, fall back, do not swap families.

---

## 3. Color Application Rules

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

- 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.
- Never type a raw hex or font name in a component. Read the token.

---

## 4. Border Radius Decision Framework

- `--ds-radius-badge` = `999px`
- `--ds-radius-sm` = `4px`
- `--ds-radius-md` = `4px`
- `--ds-radius-lg` = `4px`
- `--ds-radius-xl` = `8px`
- `--ds-radius-full` = `9999px`

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

---

## 5. Shadow & Elevation Rules

- `--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`

---

## 6. Component Construction Guides

- **Buttons:** Bangers at 1.05em on a 3px ink border with a 4px offset ink shadow. Active state slides the button onto its shadow.
- **Inputs:** Paper-white fields, 3px ink borders, focus ring is the blue fill at 40% alpha.
- **Cards:** White panel, 3px ink border, 6px offset ink shadow, square corners.
- **Badges:** Yellow or blue fill with a 2px ink border, square or fully round, uppercase.
- **Tables:** Header row is ink black with paper text; row borders 2px ink; square container.

---

## 7. Interactive States

- Hover: `--ds-color-primary-hover` fill plus `--ds-shadow-btn-hover`.
- Active: `--ds-btn-active-transform` with the active tone.
- Focus: always `--ds-focus-ring`, visible on every interactive element.
- Disabled: 50% opacity, no shadow, `not-allowed` cursor.

---

## 8. Layout Rules


- Max content width 1040px, 24px gutters.
- Stack to one column below 768px.
- Keep one primary action per section and align it to the same edge as the heading.

---

---

## 9. Anti-Patterns

- Blurred drop shadows. The print is flat and hard.
- Red or blue body text on paper. Fills only.
- Rounded card corners. Panels are cut square.
- More than one Bangers block per view. One shout per page.
- Gradients of any kind. Halftone gives the tone.
- Thin 1px borders. Everything is 3px ink.

---

## 10. AI Prompting Guide

Ask for the system by name and slug, then state the surfaces you need. The tokens do the rest.

> Build a product page in the Comic Halftone system: off-white paper background, ink-black 3px borders, red Bangers hero heading with halftone dots, yellow badge row, blue info panel, hard offset shadows, Comic Neue body text.

Always reference tokens (`--ds-*`) in generated code, never raw values. Keep overrides scoped under `[data-ds="comic-halftone"]`.

---

## 11. Pre-Ship Checklist

- [ ] Every colour, font, radius and shadow reads from a `--ds-*` token.
- [ ] Overrides are scoped under `[data-ds="comic-halftone"]` only.
- [ ] Fonts load via `DESIGN_SYSTEM_FONTS_URL`, not a CSS `@import`.
- [ ] Text contrast passes 4.5:1 (checked in section 3.3 of the design-system doc).
- [ ] Focus rings visible on every interactive element.
- [ ] Ink black frames everything: 3px borders on every control and panel.
- [ ] Red, yellow and blue are fills, never body text.
- [ ] Cards, tables and bento containers render without clipped corners.
- [ ] Build, lint, typecheck and `verify:seo` pass.