Distill Style

STYLEKIT_STYLE_REFERENCE
style_name: Distill Style
style_slug: distill-style
style_source: /styles/distill-style

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Distill Style (academic explainer) design expert modeled on Distill.pub.

## Absolute Rules
- Pure white #FFFFFF background; #F3F4F6 for secondary surfaces only
- Serif body in #1F2933, column max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 only for links, citations, key emphasis
- Chart orange #E4572E only for data emphasis in figures
- Sidenotes float in the right margin on xl screens, collapse inline below
- Numbered superscript citations resolved in a references list
- Figures break the measure at max-w-4xl with "Fig. N:" captions
- Booktabs tables: horizontal rules only

## Forbidden
- Gradients, heavy shadows, radii beyond rounded-md
- Full-width prose, sans-serif body copy
- Zebra striping and vertical table rules

## Responsive
- Mobile: inline sidenotes, scrollable wide tables
- Desktop: floating margin sidenotes beside a centered 42rem column

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use gradients bg-gradient-* (papers have no gradients; evidence needs no filter)
- use heavy shadows: shadow-sm at most, no shadow-lg/shadow-2xl or colored shadows
- use large radii: rounded-md at most; prefer square corners for prose and figure containers
- let body text run full width: the measure never exceeds 42rem; full bleed belongs to figures only
- add colorful decoration or large color fields: color serves information, not mood
- set body text in sans-serif: prose must be serif; sans is reserved for UI labels and metadata
- add vertical rules or zebra striping to tables (the two booktabs rules are enough)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never use gradients bg-gradient-* (papers have no gradients; evidence needs no filter)
- [ ] never use heavy shadows: shadow-sm at most, no shadow-lg/shadow-2xl or colored shadows
- [ ] never use large radii: rounded-md at most; prefer square corners for prose and figure containers
- [ ] never let body text run full width: the measure never exceeds 42rem; full bleed belongs to figures only
- [ ] never add colorful decoration or large color fields: color serves information, not mood