LaTeX Paper

STYLEKIT_STYLE_REFERENCE
style_name: LaTeX Paper
style_slug: latex-paper
style_source: /styles/latex-paper

# 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 LaTeX Paper design expert. Everything is numbered, everything is citable.

## Core Palette
- Paper: #FFFFFF (page background, the only background)
- Ink: #111111 (all text, heavy rules, primary buttons)
- Hyperref blue: #0B5394 (links and cross-references ONLY; blue means clickable)
- Theorem fill: #F5F5F0 (theorem/definition/remark environments)
- Rule gray: #D4D4D0 (thin rules, input borders); muted text: #6B6B66

## Typography
- Serif everywhere: font-serif with tracking-tight on headings (Computer Modern feel)
- Document head is centered: title, then author line with superscript affiliations, then italic date
- Section headings carry hierarchical numbers: 1, 1.1, 1.2 — bold number and title on one line
- Body column: max-w-2xl or max-w-3xl, text-[15px] or text-base, leading-relaxed
- Code uses font-mono inside bg-[#F5F5F0]; math is simulated with italic serif

## Structural Environments
- Abstract: narrow centered block (max-w-xl mx-auto px-8) with centered bold "Abstract" heading
- Theorem box: bg-[#F5F5F0] or border-l-2 border-[#111111], bold label ("Theorem 1."), italic body
- Display equation: own centered line in italic serif, with (n) number flushed right
- Table: booktabs only — border-t-2 and border-b-2 in #111111, thin border-b under header, NO vertical rules, NO zebra rows; caption ABOVE the table ("Table 1: ...")
- Figure: content + centered caption BELOW ("Figure 1: ..."), caption in text-sm
- References: hanging indent (pl-8 -indent-8), [n] labels, cited inline as [1] in #0B5394
- Footnotes: superscript numbers in #0B5394 linking to a rule-separated footer block

## Interactions
- Links: text-[#0B5394] hover:underline underline-offset-2, no color change on hover
- Buttons: rounded-none; primary = solid #111111 that inverts to white on hover; secondary = thin border
- Focus: focus:border-[#111111], never rings or glows

## Absolutely Forbidden
- Vertical rules or zebra striping in tables
- Colorful buttons, gradients, brand colors beyond the five-color palette
- Sans-serif body text
- Rounded corners (always rounded-none)
- Shadows of any kind (shadow-*)
- Decorative graphics, emoji, illustrations — visuals appear only as numbered figures

## Responsive
- Mobile: single column, keep the centered document head, tables scroll horizontally (overflow-x-auto)
- Desktop: centered column max-w-3xl; wide screens keep margins generous like a printed page
- Font sizes shift subtly: text-3xl md:text-4xl for the title; body stays 15-16px

## Self-Check
1. Does every section, equation, figure, and table carry a number?
2. Is blue used ONLY for links and cross-references?
3. Are all corners square and all surfaces flat (no shadow)?
4. Do tables have horizontal rules only?
5. Does the page read like a printable PDF?

---

# LaTeX Paper Design System

> The typographic language of LaTeX academic papers, brought to the web: Computer Modern feel, centered title and abstract, hierarchically numbered sections, theorem environments, numbered equations, booktabs tables, and hanging-indent references. Built for research homepages, lecture notes, and scholarly portfolios.

## Design Philosophy

LaTeX Paper treats the typesetting system of academic papers as a visual language: everything is numbered, everything is citable. The sense of order itself is the visual grammar of scholarly credibility.

Core principles:
- Numbering is navigation: sections 1 / 1.1 / 1.2, equations (1) (2), Theorem 1, Figure 1, Table 1, references [1] — every element has a unique coordinate that readers can point to precisely
- Ritual is credibility: centered title, author line, date, and a narrow abstract block — this century-old opening ceremony lends content a peer-reviewed air
- Structure before decoration: no shadows, no rounded corners, no colorful buttons; the only emphasis tools are numbering, italics, rules of varying weight, and hyperref blue
- Ink black on paper white, blue for citations: #111111 carries the text, #FFFFFF is the page, #0B5394 marks only links and cross-references — wherever blue appears, it can be clicked
- Serif throughout, theorem environments instead of cards, booktabs tables with no vertical rules, hanging-indent references, and a page that reads like a printable PDF

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#D4D4D0]
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: focus:border-[#111111]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: (none)
Transition: transition-colors duration-200
Active: active:bg-[#F5F5F0]
```

### Typefaces
```
Heading: font-serif tracking-tight
Body: font-serif
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-[#FFFFFF]
Background secondary: bg-[#F5F5F0]
Background accent: bg-[#111111], bg-[#F5F5F0]
Text primary: text-[#111111]
Text secondary: text-[#6B6B66]
Text muted: text-[#6B6B66]
Button primary: bg-[#111111] text-[#FFFFFF] hover:bg-[#FFFFFF] hover:text-[#111111]
Button secondary: bg-transparent text-[#111111] border border-[#111111] hover:bg-[#F5F5F0]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `bg-gradient-to-r`
- `font-sans`

### Banned patterns
- matches `^rounded-(sm|md|lg|xl|2xl|3xl|full)`
- matches `^shadow-(sm|md|lg|xl|2xl)`
- matches `^bg-gradient-`
- matches `^divide-x`

### Why they are banned
- `rounded-lg`: Paper has no rounded corners; use rounded-none
- `shadow-md`: Paper is flat; hierarchy comes from rules and whitespace, never shadows
- `bg-gradient-to-r`: Only flat paper white, ink black, and theorem cream are allowed
- `font-sans`: LaTeX Paper is serif throughout; monospace only for code

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

---

## [REQUIRED]

### Every button must include
```
font-serif
rounded-none
transition-colors duration-200
```

### Every card must include
```
rounded-none
bg-[#F5F5F0]
border-l-2 border-[#111111]
```

### Every input must include
```
font-serif
rounded-none
border border-[#D4D4D0]
focus:outline-none focus:border-[#111111]
```

---

## [COMPARE] LaTeX Paper 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="font-serif rounded-none transition-colors duration-200 bg-[#111111] text-[#FFFFFF] hover:bg-[#FFFFFF] hover:text-[#111111]">
 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="rounded-none bg-[#F5F5F0] border-l-2 border-[#111111] px-6 py-5">
 <h3 class="font-serif 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="font-serif rounded-none border border-[#D4D4D0] focus:outline-none focus:border-[#111111]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] LaTeX Paper page skeletons

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

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

### Hero section
```html
<section class="bg-[#111111] text-[#111111] py-10 md:py-14 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif tracking-tight text-3xl md:text-4xl">
 {HEADLINE}
 </h1>
 <p class="font-serif text-[15px] md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="font-serif rounded-none transition-colors duration-200 bg-[#111111] text-[#FFFFFF] hover:bg-[#FFFFFF] hover:text-[#111111]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#FFFFFF] text-[#111111] py-10 md:py-14 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif tracking-tight text-xl md:text-2xl">{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="rounded-none bg-[#F5F5F0] border-l-2 border-[#111111] px-6 py-5">
 <h3 class="font-serif tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-serif text-[15px] md:text-base text-[#6B6B66]">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="font-serif rounded-none border border-[#D4D4D0] focus:outline-none focus:border-[#111111]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#F5F5F0] text-[#6B6B66] py-10 md:py-14 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <span class="font-serif tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-serif text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-serif text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] LaTeX Paper post-generation self check

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

### Token check
- [ ] Button includes: `font-serif rounded-none transition-colors duration-200`
- [ ] Card includes: `rounded-none bg-[#F5F5F0] border-l-2 border-[#111111]`
- [ ] Input includes: `font-serif rounded-none border border-[#D4D4D0] focus:outline-none focus:border-[#111111]`

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

### Style rule check
- [ ] Use serif fonts throughout with font-serif; add tracking-tight on headings for a Computer Modern feel
- [ ] Center the document head: title text-3xl md:text-4xl, author line text-sm, italic date, stacked vertically
- [ ] Set the abstract as a narrow indented block max-w-xl mx-auto px-8 with a centered bold small heading
- [ ] Number section headings hierarchically: 1 / 1.1 / 1.2, with a gap-3 between number and title
- [ ] Build theorem environments with light fill bg-[#F5F5F0] or a left rule border-l-2 border-[#111111]: bold label + italic body

### Style drift check
- [ ] Does not violate: Never draw vertical rules or zebra striping in tables — booktabs allows horizontal rules only
- [ ] Does not violate: Never use large colorful buttons or gradients — actions are solid ink, thin outlines, or hyperref-blue links
- [ ] Does not violate: Never set body text in sans-serif — it breaks the paper feel; use monospace only for code
- [ ] Does not violate: Never round corners — rounded-none everywhere, paper has no border radius
- [ ] Does not violate: Never use shadows (shadow-*) — paper is flat; hierarchy comes from rules and whitespace

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

---

## [EXAMPLES] Example prompts

### 1. 

、 BibTeX 

```
Use LaTeX Paper style to build a researcher's personal homepage:
1. Document head: centered name as title (font-serif text-4xl tracking-tight), affiliation line with superscript numbers, italic contact line with hyperref-blue email link
2. Abstract-style bio: narrow centered block (max-w-xl mx-auto px-8) with bold centered "About" heading
3. Section "1 Publications": hanging-indent list with [1] [2] [3] labels, italic venue names, and [PDF] [DOI] [BibTeX] links in text-[#0B5394]
4. Expandable BibTeX citation block per paper: font-mono text-xs inside bg-[#F5F5F0] rounded-none, toggled by the [BibTeX] link
5. Section "2 Projects": theorem-style boxes (bg-[#F5F5F0] border-l-2 border-[#111111]) with bold project names and italic one-line summaries
6. Section "3 Teaching": booktabs table (border-t-2 border-b-2 border-[#111111], thin rule under header, no vertical rules) listing courses, terms, roles
7. Footer: thin top rule, centered page number, italic "Last compiled: <date>" line
8. Palette: #FFFFFF paper, #111111 ink, #0B5394 links only, rounded-none, no shadows, serif throughout
```

### 2. 

、

```
Use LaTeX Paper style to create a lecture notes page:
1. Running head: thin bottom rule, italic course code left ("CS 401: Design Science"), hyperref-blue anchor links right
2. Centered head: lecture title, lecturer line, italic date
3. Numbered sections 1 / 1.1 / 1.2 with bold section headings in font-serif tracking-tight
4. Definition and Theorem environments: bg-[#F5F5F0] boxes with bold labels ("Definition 1.", "Theorem 2.") and italic bodies
5. Display equations centered in italic serif with (1) (2) tags flushed right
6. A worked example in a border border-[#D4D4D0] box captioned "Example 1"
7. Exercises section: ordered list with bold "Exercise n." prefixes and difficulty stated in italic
8. Footnotes with superscript hyperref-blue numbers and a rule-separated footnote block
9. Strictly serif, rounded-none, no shadows, blue only for links and cross-references
```

### 3. 

```
Use LaTeX Paper style to build a product whitepaper landing page:
1. Paper head: centered product-as-paper title, team members as authors with superscripts, italic version date
2. Abstract block summarizing the product in 4-5 lines, narrow and indented
3. Section "1 Motivation" with body text max-w-2xl leading-relaxed and inline citations [1] [2] in #0B5394
4. Section "2 Method": theorem box stating the core guarantee, followed by a centered display equation with (1) tag
5. Section "3 Evaluation": booktabs comparison table (Table 1 caption above, heavy top/bottom rules, no vertical rules) versus competitors
6. Figure 1: simple inline SVG line chart with centered "Figure 1: ..." caption below
7. Call-to-action as paper artifacts: solid-ink "Download PDF" button and thin-outline "View Source" button, both rounded-none
8. References section with hanging indents and a footer with centered page number
```

## Absolute Bans (Match and Refuse)

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

- draw vertical rules or zebra striping in tables — booktabs allows horizontal rules only
- use large colorful buttons or gradients — actions are solid ink, thin outlines, or hyperref-blue links
- set body text in sans-serif — it breaks the paper feel; use monospace only for code
- round corners — rounded-none everywhere, paper has no border radius
- use shadows (shadow-*) — paper is flat; hierarchy comes from rules and whitespace
- add decorative graphics, emoji, or illustrations — graphics may only appear as numbered, captioned figures

## 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 draw vertical rules or zebra striping in tables — booktabs allows horizontal rules only
- [ ] never use large colorful buttons or gradients — actions are solid ink, thin outlines, or hyperref-blue links
- [ ] never set body text in sans-serif — it breaks the paper feel; use monospace only for code
- [ ] never round corners — rounded-none everywhere, paper has no border radius
- [ ] never use shadows (shadow-*) — paper is flat; hierarchy comes from rules and whitespace