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. This style translates journal-grade paper typography into web-native layouts, modeled on Distill.pub.

## Absolute Rules
- Background: pure white #FFFFFF; secondary surfaces only #F3F4F6
- Body text: font-serif, color #1F2933, column locked at max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 is reserved for links, numbered citations, and key emphasis only
- Chart orange #E4572E is reserved for data emphasis inside figures only
- Sidenotes: xl:absolute floating in the right margin as small gray sans text; inline light-gray blocks below xl
- Citations: superscript [1] in academic blue, resolved in a numbered references list at the page end
- Figures break the measure: max-w-4xl mx-auto, always followed by a hairline-topped figcaption starting with "Fig. N:"
- Byline block: authors / affiliations / date / DOI as a hairline-divided meta grid with uppercase tracked labels
- Tables: booktabs only - 2px top and bottom rules, 1px header rule, no vertical rules, no zebra striping
- Radius: rounded-md maximum; shadows: shadow-sm maximum

## Forbidden
- Gradients of any kind (bg-gradient-*)
- Heavy or colored shadows (shadow-lg, shadow-2xl)
- Radii beyond rounded-md
- Full-width body text (prose wider than 42rem)
- Sans-serif body copy (sans is only for UI labels and metadata)
- Decorative color fields, zebra tables, vertical table rules

## Layout & Spacing
- Section rhythm: py-12 md:py-16 between article blocks
- Prose column: max-w-[42rem]; figure column: max-w-4xl; page shell: max-w-5xl
- Hairlines (border-[#E5E7EB]) separate every metadata region

## Responsive
- Mobile: sidenotes collapse inline as bordered light-gray asides; figures go full-width with horizontal scroll for wide tables
- Desktop (xl+): sidenotes float into the right margin; the prose column stays centered

## Self-Check Verification
After generating code, verify:
1. Body text is serif, no wider than 42rem, with leading-[1.75]
2. Blue appears only on links/citations/emphasis; orange appears only on data
3. Every figure has a numbered figcaption; every citation number resolves in the references
4. No gradients, no shadows above shadow-sm, no radius above rounded-md
5. Tables have horizontal rules only
6. All interactive elements have visible hover and focus states

---

# Distill Style Design System

> An academic explainer aesthetic modeled on Distill.pub: a narrow serif column carries the argument, sidenotes carry the asides, and figures break the measure to carry the evidence. Built for science blogs, researcher homepages, and scholarly portfolios.

## Design Philosophy

Distill Style is "paper typography, translated to the web": three centuries of journal rigor rebuilt with web-native breathing room.

Core principles:
- Argument first: every visual decision serves legibility and credibility; decoration is noise
- The narrow measure is respect: body column locks at ~42rem (65-75 characters), the comfortable limit of one eye-sweep per line
- Three bandwidths of information: body text carries the argument, sidenotes carry asides and provenance, full-bleed figures carry the evidence
- Citations are links: the numbered superscript is the ancestor of the hyperlink; on the web they become one
- Color is semantic: ink gray states, academic blue points only to the clickable and the cited, chart orange highlights only data

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#E5E7EB]
Radius: rounded-md
```

### Shadow
```
sm: shadow-sm
md: shadow-sm
lg: shadow-sm
hover: hover:shadow-sm
focus: focus:shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-[#F3F4F6]
Transition: transition-colors duration-150
Active: active:bg-[#E5E7EB]
```

### Typefaces
```
Heading: font-serif font-semibold text-[#1F2933] tracking-tight
Body: font-serif text-[#1F2933] leading-[1.75]
Mono: font-mono text-[#6B7280] text-sm
```

### Type scale
```
Hero: text-3xl md:text-4xl lg:text-5xl
H1: text-3xl md:text-4xl
H2: text-2xl md:text-3xl
H3: text-lg md:text-xl
Body: text-base md:text-[1.0625rem]
Small: text-sm
```

### Spacing
```
Section: py-12 md:py-16
Container: px-4 md:px-6
Card: p-5 md:p-6
Gap sm: gap-2
Gap md: gap-4
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#F3F4F6]
Background accent: bg-[#2A7AE2], bg-[#E4572E], bg-[#F3F4F6], bg-[#1F2933]
Text primary: text-[#1F2933]
Text secondary: text-[#6B7280]
Text muted: text-[#9CA3AF]
Button primary: bg-[#1F2933] text-white
Button secondary: bg-white text-[#1F2933] border border-[#E5E7EB]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `bg-gradient-to-b`

### Banned patterns
- matches `^rounded-(?:lg|xl|2xl|3xl|full)$`
- matches `^shadow-(?:md|lg|xl|2xl|inner)$`
- matches `^bg-gradient`

### Why they are banned
- `rounded-xl`: Distill Style caps radii at rounded-md; paper layouts prefer square corners
- `rounded-full`: Distill Style avoids pill shapes; hierarchy comes from typography, not geometry
- `shadow-lg`: Distill Style separates regions with hairlines, not elevation
- `bg-gradient-to-r`: Academic surfaces are flat white or #F3F4F6; gradients are forbidden

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-md
text-sm font-medium
transition-colors duration-150
```

### Every card must include
```
bg-white
border border-[#E5E7EB]
rounded-md
```

### Every input must include
```
bg-white
border border-[#E5E7EB]
rounded-md
focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30
```

---

## [COMPARE] Distill Style wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-md text-sm font-medium transition-colors duration-150 bg-[#1F2933] text-white">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white border border-[#E5E7EB] rounded-md p-5 md:p-6">
  <h3 class="font-serif font-semibold text-[#1F2933] tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white border border-[#E5E7EB] rounded-md focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Distill Style page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-[#1F2933] border border-[#E5E7EB] px-4 md:px-6">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4">
    <a href="/" class="font-serif font-semibold text-[#1F2933] tracking-tight text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 font-serif text-[#1F2933] leading-[1.75] text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#2A7AE2] text-[#1F2933] py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-semibold text-[#1F2933] tracking-tight text-3xl md:text-4xl lg:text-5xl">
      {HEADLINE}
    </h1>
    <p class="font-serif text-[#1F2933] leading-[1.75] text-base md:text-[1.0625rem] max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-md text-sm font-medium transition-colors duration-150 bg-[#1F2933] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#1F2933] py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-semibold text-[#1F2933] tracking-tight text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border border-[#E5E7EB] rounded-md p-5 md:p-6">
        <h3 class="font-serif font-semibold text-[#1F2933] tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-serif text-[#1F2933] leading-[1.75] text-base md:text-[1.0625rem] text-[#9CA3AF]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border border-[#E5E7EB] rounded-md focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#F3F4F6] text-[#6B7280] py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-serif font-semibold text-[#1F2933] tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-serif text-[#1F2933] leading-[1.75] text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-semibold text-[#1F2933] tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-serif text-[#1F2933] leading-[1.75] text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Distill Style post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-md text-sm font-medium transition-colors duration-150`
- [ ] Card includes: `bg-white border border-[#E5E7EB] rounded-md`
- [ ] Input includes: `bg-white border border-[#E5E7EB] rounded-md focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`

### Style rule check
- [ ] Body text uses font-serif in a narrow column max-w-[42rem] mx-auto with leading-[1.75]
- [ ] Sidenotes float into the right margin on large screens (xl:absolute, text-xs text-[#6B7280]) and collapse inline as light-gray blocks bg-[#F3F4F6] on small screens
- [ ] Numbered citations use superscript <sup>[1]</sup> in academic blue text-[#2A7AE2], resolved in a references list
- [ ] Figures break the measure: max-w-4xl mx-auto centered, with figcaption in text-[13px] text-[#6B7280] starting with Fig. N:
- [ ] All separation uses hairlines: border-t border-[#E5E7EB], never thicker than 1px

### Style drift check
- [ ] Does not violate: Never use gradients bg-gradient-* (papers have no gradients; evidence needs no filter)
- [ ] Does not violate: Never use heavy shadows: shadow-sm at most, no shadow-lg/shadow-2xl or colored shadows
- [ ] Does not violate: Never use large radii: rounded-md at most; prefer square corners for prose and figure containers
- [ ] Does not violate: Never let body text run full width: the measure never exceeds 42rem; full bleed belongs to figures only
- [ ] Does not violate: Never add colorful decoration or large color fields: color serves information, not mood

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Distill Style

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