CLASSICAL-REMIX
Classical Remix
White editorial ground, grainy classical figure illustrations, serif italic emphasis, thin orbit lines. Renaissance meets modern SaaS.
Difficulty:★★★★☆
Mood:Scholarly · Refined · Timeless · White Editorial · Ornate
Editorial & Serif
Visual DNA
A warm white (#FAFAF8) editorial ground hosts grainy classical figure illustrations — robed scholars, anatomical drawings, celestial maps, herbarium specimens. Serif italic emphasis words create editorial rhythm within clean sans body text. Thin orbit lines continue behind text columns like astronomical diagrams, connecting elements as if the page were a scientific instrument. A blue pill CTA and trust logo row complete the composition. The aesthetic is deliberately anachronistic — Renaissance scholarship rendered for a modern SaaS product. The classical illustrations signal depth, craft, and permanence. The serif italic emphasis whispers where the sans body speaks. The orbit lines imply that everything on the page is connected, measured, and part of a larger system. This is what a university would look like if it were a website.
Design Principles
CLASSICAL AS AUTHORITY
Historical illustrations — robed scholars, anatomical drawings, celestial maps, herbarium specimens — signal depth, craft, and permanence. These aren't decorative; they're argument. The page says: "We are connected to a tradition of knowledge that predates the internet." The classical figures provide the visual weight that modern SaaS pages usually achieve with gradients and 3D renders — but with more dignity.
What it prevents: The default of using generic 3D illustrations or stock photography to fill visual space. Classical illustrations carry meaning (scholarship, tradition, craft) that stock visuals cannot.
---
WHITE GROUND, SERIF VOICE
The warm white (#FAFAF8) ground is confident — it doesn't need color to create atmosphere. The serif display font (Cormorant Garamond, Playfair Display) speaks with editorial authority. The italic emphasis within headlines creates rhythm — a single italicized phrase that changes the cadence of the line. "Wisdom, *systematized*" reads differently than "Wisdom, systematized." The italic is a vocal inflection in text form.
What it prevents: The default of sans-serif headlines on white backgrounds that make every page look like a generic SaaS landing page. The serif voice immediately signals "editorial" not "marketing."
---
ORBITAL COMPOSITION
Thin orbit lines (0.5px stroke) continue behind text columns like astronomical diagrams. They connect elements — a headline to an illustration, a CTA to a trust logo — implying that everything on the page is part of a larger system. The orbit lines are the page's connective tissue, visible only at the edge of perception. They turn the layout from a grid of separate elements into a scientific diagram.
What it prevents: The default of disconnected sections stacked vertically. The orbit lines create visual continuity that makes the page feel designed, not assembled.
---
ITALIC AS PUNCTUATION
One italic serif phrase per headline. Not two, not three — one. The italic creates a moment of emphasis within an otherwise regular-weight line. It's the editorial equivalent of a raised eyebrow or a knowing pause. "Wisdom, *systematized*" — the italic on "systematized" tells you that's the word that matters. Overusing italic destroys this effect; it becomes decorative rather than meaningful.
What it prevents: The default of bolding keywords or using color for emphasis. Italic is more refined — it changes the voice, not the volume.
---
TRUST AS STRUCTURE
A trust logo row — "Trusted by researchers at" followed by university or institution logos — is a structural element, not an afterthought. It appears below the hero, before the features, as a bridge between the value proposition and the product details. The institutions named carry the same classical authority as the illustrations. Harvard, Oxford, MIT — these are brands that have been building knowledge for centuries.
What it prevents: The default of hiding trust signals at the bottom of the page or omitting them entirely. In this style, trust is part of the composition.
Typography System
# Typography System
## Display Typeface
| Property | Specification |
|----------|--------------|
| **Register** | Classical serif — editorial, scholarly, refined |
| **Examples** | Cormorant Garamond (400/600/italic), Playfair Display (400/700/italic), EB Garamond (400/600/italic), Fraunces (400/600/italic) |
| **Weight** | 400-600 (regular to semibold — never bold; serifs carry weight through stroke contrast, not weight) |
| **Tracking** | -0.01em to 0.01em (tight to neutral — editorial, not loose) |
| **Size** | `clamp(2rem, 4vw, 3.5rem)` — confident, not monumental |
| **Transform** | Sentence case (never uppercase — serifs are designed for lowercase) |
**Why these fonts:** Cormorant Garamond has the elegant high-contrast strokes of Renaissance typefaces. Playfair Display is slightly more dramatic. Both carry italic variants that are essential for the emphasis technique. The serifs signal "editorial" and "scholarly" — the opposite of a SaaS sans-serif.
---
## Italic Emphasis
| Property | Specification |
|----------|--------------|
| **Font** | Same family as display, italic variant |
| **Usage** | ONE phrase per headline, surgically placed |
| **Weight** | 400 italic (lighter than the surrounding regular/semibold) |
| **Purpose** | Vocal inflection — changes the cadence of the line |
**Example:** "Wisdom, *systematized*" — the italic on "systematized" creates a pause and emphasis that regular weight cannot. The italic is the editorial equivalent of a raised eyebrow.
**Rule:** One italic phrase per headline. Never two. Never italicize a full sentence. The italic is a scalpel, not a paintbrush.
---
## Body Typeface
| Property | Specification |
|----------|--------------|
| **Register** | Clean humanist sans — readable, modern, invisible |
| **Examples** | Inter (400/500), Söhne (if licensed), Plus Jakarta Sans (400/500) |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.01em (normal) |
| **Size** | 15-16px (slightly larger than technical styles — this is editorial, readable) |
| **Line Height** | 1.7-1.8 (generous — editorial pages breathe) |
**Why sans body with serif display:** The contrast between serif display and sans body creates the "Renaissance meets modern" tension. The serif speaks the headline; the sans speaks the body. This is the opposite of most SaaS pages (sans display + sans body) and signals editorial intent.
---
## Micro / Label Type
| Property | Specification |
|----------|--------------|
| **Register** | Monospace or small caps sans |
| **Examples** | JetBrains Mono (400), Inter (500 uppercase) |
| **Weight** | 400-500 |
| **Tracking** | 0.1em-0.15em (wide, technical) |
| **Size** | 11-12px (small but readable) |
| **Transform** | UPPERCASE |
**Usage:** Section labels, trust row labels ("TRUSTED BY RESEARCHERS AT"), metadata, captions. These small labels provide structure without competing with the serif display.
---
## Type Scale
**Ratio:** 1.5x (golden ratio — editorial, not technical)
```
Display: clamp(2rem, 4vw, 3.5rem) — 1.5x
Headline: clamp(1.33rem, 2.67vw, 2.33rem) — 1.5x
Subhead: clamp(1rem, 2vw, 1.5rem) — 1.5x
Body: 15-16px — baseline
Micro: 11-12px — 0.75x
```
---
## Font Pairing Logic
**Display + Body:** Serif display + sans body. This is the signature pairing. The serif provides editorial authority; the sans provides modern readability. The contrast IS the style.
**Display + Italic:** Same serif family, regular + italic. The italic is not a different font — it's the same family in a different voice. This creates the emphasis technique.
**Never mix:** Don't use more than 2 typeface families. Serif display + sans body is sufficient. The italic is a variant, not a third family.Color Architecture
# Color Architecture ## Ground ```css --color-ground: #FAFAF8; /* Warm white — never pure #FFF */ --color-ground-elevated: #F5F4F0; /* Slightly warmer for cards/panels */ ``` **Why warm white:** Pure white (#FFFFFF) is too clinical, too digital. The warm white (#FAFAF8) mimics high-quality paper stock — the kind used in art books and museum catalogs. The slight warmth (a touch of yellow/gray) makes the page feel printed, not displayed. --- ## Ink ```css --color-ink-primary: #1A1A1A; /* Near-black — warm, not cold */ --color-ink-secondary: #4A4A4A; /* Muted gray for secondary content */ --color-ink-muted: #888888; /* For micro labels and metadata */ ``` **Why #1A1A1A:** Slightly warmer than pure black. On warm white ground, pure black would feel harsh. The near-black maintains editorial contrast while preserving the "printed on fine paper" quality. --- ## Accent ```css --color-accent: #2563EB; /* Blue pill CTA — the signature accent */ --color-accent-alt: #8B6914; /* Antique gold — alternative */ --color-accent-ink: #1E3A5F; /* Deep navy ink — for emphasis */ ``` **Rule:** ONE accent maximum. The accent appears ONLY on: - Primary CTA button (filled pill shape) - Active navigation state - One key data point or link per section - Hover state on interactive elements **Why blue pill:** The blue CTA (#2563EB) is the one modern element in an otherwise classical palette. It's the bridge between Renaissance scholarship and modern SaaS. The pill shape (fully rounded) contrasts with the sharp serifs — it's the only rounded element on the page. **Alternative — antique gold:** For brands that want to lean fully classical, #8B6914 (antique gold) replaces the blue. This creates a more museum-like, less SaaS-like feel. --- ## Semantic Colors ```css --color-success: #4A6741; /* Muted forest green */ --color-error: #8B3A3A; /* Muted brick red */ --color-warning: #8B6914; /* Antique gold/amber */ ``` **All semantic colors are muted** to maintain the editorial feel. They communicate meaning through position and context, not saturation. --- ## The Color Rule > **Color is rare and meaningful.** One accent maximum. The accent appears ONLY on CTA, active state, or one emphasized element. Everything else is warm white ground + dark ink. --- ## Gradient Policy **No gradients on backgrounds or surfaces.** The style is built on flat paper surfaces. If depth is needed, it comes from: - Paper grain texture (SVG noise overlay, very subtle) - Hairline borders (1px solid, light gray) - Layered panels (slightly warmer white for elevation) - Orbit lines (0.5px stroke, accent at low opacity) --- ## Color Don'ts | ❌ Don't | ✅ Do Instead | |----------|--------------| | Pure white (#FFFFFF) ground | Warm white #FAFAF8 | | Pure black (#000000) ink | Near-black #1A1A1A | | Multiple accent colors | ONE accent (blue pill or antique gold) | | Gradient backgrounds | Flat warm white or orbit line patterns | | Neon or saturated accents | Muted blue (#2563EB) or antique gold (#8B6914) | | Dark mode | This is a light, editorial style | | Purple or pink accents | Blue or gold only |
Motion Principles
# Motion Principles
## Philosophy
Motion in Classical Remix is **gentle and deliberate**. Illustrations fade in like they're being revealed on a page. Orbit lines draw on like a scientific diagram being constructed. Nothing bounces, nothing springs, nothing rushes. The motion has the patience of a scholar turning a page — unhurried, considered, precise.
---
## Entrance Animations
| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Classical illustrations | Opacity fade-in + slight scale (0.98 → 1) | 1000ms | `ease-out` | 200ms |
| Orbit lines | SVG stroke draw-in (stroke-dasharray) | 1500ms | `ease-in-out` | 300ms |
| Display headline | Opacity + translateY(12px) → 0 | 800ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 100ms |
| Body text | Opacity fade-in | 600ms | `ease-out` | 400ms |
| Trust logo row | Opacity fade-in (staggered) | 500ms per logo | `ease-out` | 600ms + i*100ms |
| CTA pill | Opacity + slight scale (0.95 → 1) | 600ms | `ease-out` | 700ms |
**Key easing:** `cubic-bezier(0.22, 1, 0.36, 1)` — smooth deceleration for text. `ease-out` for illustrations. No bounce, no spring.
---
## Scroll Behavior
| Effect | Specification |
|--------|--------------|
| Parallax on illustrations | Subtle — 5-10% of scroll distance (very gentle) |
| Orbit line draw-in | On scroll-into-view, stroke-dasharray animation (once) |
| Text reveals | Opacity fade-in on scroll-into-view (600ms) |
| Section transitions | Crossfade with 200ms overlap |
**Scroll-linked effects are gentle.** The style doesn't need dramatic scroll choreography — the classical illustrations and serif type carry the experience.
---
## Interaction States
| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Ink color → accent color (300ms) | — |
| CTA pill | Slight scale (1.02) + shadow (300ms) | Scale 0.98 (tactile press) |
| Classical illustrations | Slight brightness increase (1.0 → 1.02) | — |
| Trust logos | Opacity 0.6 → 1.0 (200ms) | — |
| Links in body | Underline appears (200ms) | — |
| Orbit lines | No hover state — they're decorative | — |
**Hover states are gentle.** Only interactive elements respond. Illustrations and orbit lines are static — they're page elements, not UI.
---
## Reduced Motion
When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant opacity changes
- No parallax
- No orbit line draw-in (lines appear fully drawn)
- Hover states use instant changes (no transition)
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
---
## What NOT to Animate
| ❌ Never animate | Why |
|-----------------|-----|
| Bounce or spring easing | Too playful — this is scholarly, not bouncy |
| Color transitions on text | Breaks the editorial register |
| Rotation or skew | Too dynamic for classical illustrations |
| Aggressive scale transforms | Illustrations should feel stable, not reactive |
| Marquee text | Too modern/digital for this style |
| Every element fading in | Motion must be purposeful — illustrations and orbit lines only |Layout Grammar
# Layout Grammar ## Grid System **Asymmetric split with generous margins.** Content lives in an asymmetric split — text on the left (50-60%), classical illustration on the right (40-50%). The split is not rigid; orbit lines connect the two sides, implying they're part of the same system. Body text is constrained to a max-width of 680px for readability. ``` ┌──────────────────────┬──────────────────┐ │ │ │ │ Headline │ [Classical │ │ Body text │ illustration │ │ CTA pill │ with grain] │ │ │ │ │ ← orbit lines continue behind → │ │ │ │ └──────────────────────┴──────────────────┘ ``` --- ## Hero Section | Property | Specification | |----------|--------------| | Height | `min-h-[90dvh]` (nearly full viewport — editorial pages have generous heroes) | | Background | Warm white (#FAFAF8) with subtle paper grain | | Headline position | Left-aligned, vertically centered | | Headline size | `clamp(2rem, 4vw, 3.5rem)` — confident serif | | Italic emphasis | ONE phrase in italic within the headline | | Supporting text | Below headline, left-aligned, max-width 480px | | CTA | Blue pill below supporting text, left-aligned | | Classical illustration | Right side, grainy, faded edges | | Orbit lines | Continuing behind text column, 0.5px stroke | **Never centered hero.** The asymmetric split (text left, illustration right) is the structural signature. --- ## Section Spacing ```css --section-padding-y: clamp(4rem, 10vh, 8rem); --component-gap: clamp(2rem, 4vw, 4rem); --content-max-width: min(1100px, calc(100vw - clamp(2rem, 8vw, 6rem))); --body-max-width: 680px; ``` **Spacing is generous.** Editorial pages breathe. Large gaps between sections create the "scholarly publication" feeling. Don't compress. --- ## Layout Patterns ### Pattern 1: Asymmetric Split (Hero) ``` ┌─────────────────────┬──────────────────┐ │ Headline │ [Grainy classical │ │ with *italic* │ illustration │ │ emphasis │ of scholar] │ │ │ │ │ Body text │ ← orbit lines │ │ Blue pill CTA │ continue behind │ └─────────────────────┴──────────────────┘ ``` ### Pattern 2: Trust Logo Row ``` ┌─────────────────────────────────────────┐ │ TRUSTED BY RESEARCHERS AT │ │ [Harvard] [Oxford] [MIT] [Stanford] │ └─────────────────────────────────────────┘ ``` ### Pattern 3: 3-Column Feature Grid ``` ┌──────────┬──────────┬──────────┐ │ [icon] │ [icon] │ [icon] │ │ Title │ Title │ Title │ │ Body │ Body │ Body │ └──────────┴──────────┴──────────┘ ``` ### Pattern 4: Editorial Single Column ``` ┌─────────────────────────────────────────┐ │ ← orbit lines behind → │ │ │ │ Headline with *italic* │ │ Body text, generous line height │ │ max-width 680px, centered │ │ │ └─────────────────────────────────────────┘ ``` --- ## Responsive Behavior | Breakpoint | Layout Change | |------------|--------------| | **Desktop (1200px+)** | Full asymmetric split, illustration right | | **Tablet (768px)** | Stacked vertically, illustration below text | | **Mobile (375px)** | Single column, illustration full-width, orbit lines simplified | **Fluid typography via `clamp()`** keeps the editorial feel at all sizes. The asymmetric split stacks on mobile but never centers. --- ## Layout Don'ts | ❌ Don't | ✅ Do Instead | |----------|--------------| | Centered hero layout | Asymmetric split — text left, illustration right | | Card-grid with sharp corners | Soft panels with hairline borders | | Full-bleed photography | Classical illustrations with grain | | Dense, packed layouts | Generous margins, breathing room | | Zigzag image+text alternation | Vary the pattern — don't alternate predictably | | Equal 3-column grids for hero | Asymmetric split for hero, 3-column for features only | | No orbit lines | Orbit lines are structural — they connect elements | | Missing trust logo row | Trust row is a structural element, not optional |
Texture & Surface
# Texture & Surface
## Primary Texture: Grainy Classical Illustrations
**The defining element.** Classical illustrations — robed scholars, anatomical drawings, celestial maps, herbarium specimens — processed to look aged. The grain isn't decoration; it's what makes the illustrations feel like they come from a Renaissance manuscript rather than a stock image library.
### Illustration Types
| Type | Visual Character | Usage |
|------|-----------------|-------|
| **Scholarly figures** | Robed scholars, philosophers, astronomers | Hero illustration, about section |
| **Anatomical drawings** | Muscle studies, organ diagrams, skeleton | Feature sections, product metaphors |
| **Celestial maps** | Star charts, orbital diagrams, astronomical instruments | Background decoration, orbit lines |
| **Herbarium specimens** | Botanical illustrations, plant studies | Section dividers, decorative elements |
| **Architectural plans** | Building cross-sections, classical columns | Feature illustrations |
### Processing
All illustrations must be processed to look aged:
- **Grain overlay:** SVG feTurbulence noise, opacity 0.08-0.12, mix-blend-mode: multiply
- **Desaturation:** Remove some color — illustrations should look slightly faded
- **Edge softening:** Illustration edges fade into the background (mask or gradient fade)
- **Paper texture:** Illustrations sit on the warm white ground as if printed on the same page
---
## Secondary Texture: Orbit Lines
Thin lines (0.5px stroke) that continue behind text columns like astronomical diagrams. They connect elements — a headline to an illustration, a CTA to a trust logo — implying that everything on the page is part of a larger system.
### Implementation
```jsx
<svg className="orbit-lines" viewBox="0 0 1200 800">
<circle cx="600" cy="400" r="300" stroke="#2563EB" strokeWidth="0.5" fill="none" opacity="0.15" />
<circle cx="600" cy="400" r="200" stroke="#2563EB" strokeWidth="0.5" fill="none" opacity="0.1" />
<ellipse cx="600" cy="400" rx="400" ry="200" stroke="#8B6914" strokeWidth="0.5" fill="none" opacity="0.08" />
</svg>
```
**Parameters:**
- Stroke: 0.5px (hairline — barely visible)
- Color: Accent color at 8-15% opacity
- Position: Behind text columns, connecting elements
- Animation: Optional stroke draw-in on load (1500ms)
---
## Tertiary Texture: Paper Grain
```css
.paper-grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */
mix-blend-mode: multiply;
}
```
**Parameters:**
- Opacity: 0.02-0.04 (very subtle — should be felt, not seen)
- Blend mode: `multiply` (slightly darkens the warm white)
- Position: `fixed` (covers entire viewport, doesn't scroll)
---
## Image Processing Rules
**NEVER use modern photography.** All visual elements must be classical illustrations, processed:
| Processing | Effect | When to Use |
|-----------|--------|-------------|
| Grain overlay | Aged manuscript feel | All illustrations |
| Desaturation | Faded, archival quality | Colored illustrations |
| Edge fade | Illustration merges with ground | Hero illustrations |
| Sepia/duotone | Antique tone | Optional, for warmer brands |
---
## Surface Rules
| Surface | Treatment |
|---------|-----------|
| Background | Warm white (#FAFAF8) + paper grain overlay |
| Cards/Panels | Slightly warmer white (#F5F4F0) with 1px border (#E0DFDB) |
| Buttons | Blue pill (fully rounded) or gold pill — the only rounded element |
| Navigation | Transparent, ink color text, accent on hover/active |
| Dividers | 1px hairline (#E0DFDB) or orbit line |
| Trust logos | Grayscale, opacity 0.6, full opacity on hover |
**No glossy, no glassmorphism, no heavy shadows.** Surfaces feel like fine paper — matte, warm, slightly textured. The blue pill CTA is the one exception to the flat-surface rule.
---
## Texture Don'ts
| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Modern stock photography | Classical illustrations with grain |
| Gradient backgrounds | Flat warm white + orbit lines |
| Glassmorphic cards | Flat warm white panels with hairline borders |
| 3D renders | 2D classical illustrations only |
| Heavy drop shadows | Subtle paper texture or no shadow |
| Sharp illustration edges | Faded edges that merge with ground |
| Saturated, vibrant illustrations | Desaturated, aged, archival quality |Vocabulary Bank
# Vocabulary Bank ## Primary Terms (must appear in prompt to unlock the style) | Term | Why It Matters | |------|---------------| | `classical figure illustration` | The primary visual element — scholars, anatomy, celestial maps | | `serif italic emphasis` | The signature typographic technique — one italic phrase per headline | | `white editorial ground` | The specific background color (#FAFAF8, warm white) | | `orbit lines` | The thin connecting lines that make the page a scientific diagram | | `trust logo row` | The structural element that bridges hero and features | | `grainy illustrations` | The processing that makes illustrations feel archival | --- ## Secondary Terms (refine and tune the output) | Term | Effect | |------|--------| | `Renaissance manuscript` | Sets the illustration source — aged, scholarly | | `celestial map` | Specific illustration type for orbit line decoration | | `herbarium specimen` | Botanical illustration type for section dividers | | `anatomical drawing` | Scientific illustration type for feature sections | | `blue pill CTA` | The one modern element — fully rounded, accent color | | `antique gold` | Alternative accent for fully classical brands | | `editorial rhythm` | The cadence created by serif + italic + sans body | | `scholarly authority` | The emotional register — depth, tradition, craft | | `warm white` | #FAFAF8 — never pure white, always warm | | `high-contrast serif` | Cormorant Garamond, Playfair Display — stroke contrast | | `vocal inflection` | What italic emphasis creates — a pause, a knowing tone | | `astronomical diagram` | The orbit line reference — scientific, measured | --- ## Context Terms (set the mood and emotional register) | Term | Mood | |------|------| | `scholarly` | Academic, researched, authoritative | | `refined` | Cultured, tasteful, not flashy | | `timeless` | Connected to tradition, not trend | | `editorial` | Publication quality, not marketing | | `ornate` | Rich in detail, not minimal | | `Renaissance` | Classical revival, humanist, scholarly | | `herbarium` | Cataloged, preserved, studied | | `museum quality` | Curated, preserved, displayed with care | --- ## Banned Terms (if these appear, the style has broken) | Term | Why It Breaks the Style | |------|------------------------| | `dark background` | This is a light, editorial style — warm white only | | `sans-serif headlines` | Serif display is non-negotiable | | `modern photography` | Classical illustrations only — photos break the register | | `neon accents` | Muted blue or antique gold only | | `3D illustration` | 2D classical illustrations only | | `gradient` | Flat warm white surfaces only | | `glassmorphism` | Frosted glass is digital — this is printed | | `brutalist` | Wrong register — this is refined, not raw | | `monospace` (as primary) | Mono is for micro labels only, not display or body | | `bounce` / `spring` | Motion is gentle, not playful | | `purple` / `pink` | Blue or gold accents only | | `uppercase headlines` | Serifs are designed for sentence case — never uppercase | --- ## Prompt-Ready Phrases Copy-paste these directly into prompts: ``` "warm white editorial ground (#FAFAF8)" "grainy classical figure illustrations — scholars, anatomy, celestial maps" "serif italic emphasis on one phrase per headline" "thin orbit lines (0.5px stroke) connecting elements" "blue pill CTA (#2563EB) — the one modern element" "trust logo row below hero — universities and institutions" "Cormorant Garamond display + Inter body" "Renaissance manuscript aesthetic for a modern SaaS" "no gradients, no photography, no glassmorphism" "editorial rhythm — serif speaks, sans body reads" ```
Anti-Slop Checklist
☐No pure white (#FFFFFF) background (use warm white #FAFAF8)
☐No pure black (#000000) ink (use #1A1A1A)
☐No modern photography (classical illustrations only)
☐No gradient backgrounds or buttons
☐No glassmorphic or glossy surfaces
☐No 3D renders or illustrations
☐No purple, pink, or neon accent colors
☐No centered hero layout (asymmetric split only)
☐No sans-serif display fonts (serif for headlines)
☐No uppercase headlines (serifs use sentence case)
☐No more than ONE italic phrase per headline
☐No more than ONE accent color (blue pill or antique gold)
☐No bounce or spring easing (gentle motion only)
☐No brutalist or raw aesthetics (this is refined)
☐No monospace as primary font (mono for micro labels only)
☐Warm white ground (#FAFAF8) present
☐Serif display font with italic emphasis present
☐Classical illustrations with grain processing present
☐Orbit lines (0.5px stroke) connecting elements present
☐Trust logo row below hero present
☐Blue pill or gold pill CTA present
☐`prefers-reduced-motion` is honored
☐Body text uses sans-serif (contrast with serif display)
☐Generous margins and line height (1.7+)
When to Use
# When to Use ## Perfect For | Context | Why This Style Works | |---------|---------------------| | **Education & edtech** | The scholarly aesthetic maps directly to academic institutions. Classical illustrations signal knowledge tradition. | | **Luxury wellness & health** | Refined, timeless, not clinical. The warm white and classical figures feel like a private library, not a hospital. | | **Heritage brands** | Brands with history or wanting to imply history. The Renaissance aesthetic connects them to a deeper tradition. | | **Financial services** | Trust, permanence, authority. The classical illustrations and serif type signal "we've been here" even if the company is new. | | **Publishing & media** | Editorial by nature. The serif display and italic emphasis are the language of publishing. | | **Premium B2B** | Refined restraint signals quality. The absence of modern visual tropes (gradients, 3D) implies confidence. | | **Research & intelligence platforms** | The scholarly aesthetic maps to research. Classical figures of scholars studying maps and charts. | ## Brand Personality Match This style reinforces brands that are: - **Scholarly** — connected to knowledge, research, tradition - **Refined** — cultured, tasteful, not flashy - **Timeless** — not chasing trends, building permanence - **Authoritative** — confident through depth, not volume - **Curated** — every element chosen with care ## Avoid When | Context | Why It Fails | |---------|-------------| | **Technical/developer tools** | Too editorial and soft. Developers expect technical density, not Renaissance illustrations. | | **Consumer SaaS** | Too refined and scholarly for casual consumer products. | | **E-commerce** | Classical illustrations don't support product display. The aesthetic is editorial, not commercial. | | **Playful or fun brands** | Wrong emotional register entirely. This is serious, refined, scholarly. | | **Dark mode products** | This is a light, warm white style. Dark mode breaks it completely. | | **Gaming or entertainment** | Too restrained and academic for high-energy entertainment brands. | | **Startups wanting to look disruptive** | The classical aesthetic implies tradition, not disruption. | ## How to Decide Ask: **"Does my brand want to feel like a Renaissance manuscript in a modern university library?"** If yes → Classical Remix. If no → Consider Editorial Serif Narrative (more modern), Print Tech Paper (more technical), or Quiet Editorial (more minimal).
Common Mistakes
Mistake 1: Using Sans-Serif Headlines
**What people do:** Use Inter or Helvetica for headlines because "it's cleaner and more modern."
**Why it fails:** The serif display font IS the style. Without it, you have a generic white SaaS page with classical illustrations pasted on — a mismatch. The serif provides the editorial voice that makes the classical illustrations feel native rather than decorative.
**Fix:** Use Cormorant Garamond (400/600) or Playfair Display for all headlines. The high-contrast strokes of these serifs create the "Renaissance manuscript" quality. Pair with Inter for body text — the contrast between serif display and sans body IS the style.
---
Mistake 2: Overusing Italic Emphasis
**What people do:** Italicize multiple phrases in a headline, or italicize entire sentences.
**Why it fails:** The italic emphasis technique works because it's rare — ONE phrase per headline. When everything is italic, nothing is emphasized. The italic becomes decorative rather than meaningful. "Wisdom, *systematized*, for *everyone*, *everywhere*" has no emphasis — it's just a styled sentence.
**Fix:** One italic phrase per headline. Choose the word that matters most — the one that changes the meaning if removed. "Wisdom, *systematized*" — "systematized" is the emphasis because it's the claim. The rest is context.
---
Mistake 3: Using Modern Photography
**What people do:** Drop in a hero photo of a modern office or a person using a laptop.
**Why it fails:** Modern photography breaks the classical register instantly. A photo of a person in a modern office next to a Renaissance illustration creates a jarring collage, not a coherent style. The classical illustrations are the visual language — they provide the "scholarly tradition" that modern photos cannot.
**Fix:** Use classical illustrations only — robed scholars, anatomical drawings, celestial maps, herbarium specimens. Process them with grain and desaturation to look aged. These can be sourced from public domain archives (Wikimedia Commons, Smithsonian Open Access).
---
Mistake 4: Omitting Orbit Lines
**What people do:** Skip the orbit lines because "they're too subtle to matter."
**Why it fails:** The orbit lines are the page's connective tissue. Without them, the layout is a grid of separate elements — a headline here, an illustration there, a CTA below. With orbit lines, the page becomes a scientific diagram where everything is connected. The subtlety IS the point — they're felt, not seen, but their absence is noticeable.
**Fix:** Add thin orbit lines (0.5px stroke, accent color at 8-15% opacity) behind text columns. They should connect elements — a headline to an illustration, a CTA to a trust logo. Use SVG circles and ellipses positioned to imply orbital relationships.
---
Mistake 5: Using Pure White Background
**What people do:** Set the background to `#FFFFFF` because "it's a clean, editorial white."
**Why it fails:** Pure white is too clinical, too digital. The warm white (#FAFAF8) mimics high-quality paper stock — the kind used in art books and museum catalogs. Pure white makes the page feel like a web app; warm white makes it feel like a printed publication.
**Fix:** Use `#FAFAF8` for the ground. The slight warmth (a touch of yellow/gray) is what separates this from a generic light-mode SaaS page. Add a very subtle paper grain (opacity 0.03) to reinforce the printed quality.
---
Mistake 6: Missing Trust Logo Row
**What people do:** Omit the trust logo row or hide it at the bottom of the page.
**Why it fails:** The trust logo row is a structural element in this style, not an afterthought. It bridges the hero (value proposition) and the features (product details). The institutions named carry the same classical authority as the illustrations. Without the trust row, the hero feels disconnected from the rest of the page.
**Fix:** Place a trust logo row directly below the hero: "TRUSTED BY RESEARCHERS AT" followed by university or institution logos in grayscale. This row should appear before any feature sections.
---
Mistake 7: Using Sharp Corners on Everything
**What people do:** Apply `border-radius: 0` to all elements including the CTA button.
**Why it fails:** The blue pill CTA (fully rounded) is the one modern element in an otherwise classical palette. It's the bridge between Renaissance scholarship and modern SaaS. Making it sharp-cornered removes that bridge and makes the page feel like a museum exhibit rather than a product page.
**Fix:** The CTA button should be a pill (fully rounded, `border-radius: 999px`). This is the ONLY rounded element on the page. Everything else — cards, panels, illustrations — uses sharp corners or no visible border. The pill is the modern accent in the classical world.
Reference Gallery
# Reference Gallery ## Live Sites ### Awwwards — Editorial/Classical Winners - **What works:** Warm white grounds, serif display with italic emphasis, classical illustrations, orbit line decoration, trust logo rows - **Search:** Awwwards "editorial" + "serif" filter, "classical" tag ### University & Research Institution Sites - **What works:** Scholarly aesthetic, classical figure illustrations, serif typography, generous margins - **Search:** Oxford, Cambridge, Harvard design systems; research lab websites ### Museum & Cultural Institution Sites - **What works:** Classical illustration usage, archival processing, warm white grounds, editorial layouts - **Search:** Met Museum, British Museum, Smithsonian digital archives ## Key Visual References ### Classical Illustration Types - **Scholarly figures:** Robed philosophers, astronomers with instruments — sourced from Renaissance manuscripts - **Anatomical drawings:** Vesalius-style muscle studies, organ diagrams — for feature sections - **Celestial maps:** Star charts, orbital diagrams — for orbit line decoration - **Herbarium specimens:** Botanical illustrations — for section dividers ### Orbit Line Technique - **Style:** 0.5px stroke, accent color at 8-15% opacity, SVG circles and ellipses - **Position:** Behind text columns, connecting elements - **Animation:** Optional stroke draw-in on load (1500ms, ease-in-out) ### Typography Reference - **Cormorant Garamond 400/600** at `clamp(2rem, 4vw, 3.5rem)` — display with italic emphasis - **Inter 400/500** at 15-16px, line-height 1.7 — body text - **JetBrains Mono 400** at 11-12px, tracking 0.1em — micro labels ### Blue Pill CTA - **Color:** #2563EB (the one modern accent) - **Shape:** Fully rounded (border-radius: 999px) - **Padding:** Generous horizontal, comfortable vertical - **Hover:** Slight scale (1.02) + subtle shadow ## Screenshot Notes > When capturing references for this style, look for: > - The quality of the classical illustrations (grainy, aged, archival) > - The placement of italic emphasis (one phrase per headline) > - The subtlety of orbit lines (barely visible, but connectively present) > - The warm white ground (never pure white) > - The blue pill CTA as the one modern element > - The trust logo row placement (below hero, before features) > - The serif + sans pairing (contrast is the style)
AI Prompts
EXACT REPLICA8985 characters
> Copy this entire prompt and paste it into your AI coding assistant (Cursor, Claude Code, v0.dev, etc.) to generate a Classical Remix landing page.
---
```
Build a classical-remix landing page for "ATHENA" — a research intelligence platform. Stack: React + Vite + TypeScript + Tailwind CSS v4 + lucide-react. Page title: `Athena — Wisdom, Systematized`.
Vibe: Renaissance manuscript meets modern SaaS. Warm white paper, grainy classical illustrations, serif italic emphasis, thin orbit lines. Scholarly, refined, timeless.
---
## ANTI-SLOP CONSTRAINTS (hard bans)
- NO pure white (#FFFFFF) background — use warm white #FAFAF8
- NO pure black (#000000) ink — use #1A1A1A
- NO modern photography — classical illustrations only
- NO sans-serif display fonts — serif for headlines
- NO uppercase headlines — serifs use sentence case
- NO more than ONE italic phrase per headline
- NO gradients of any kind
- NO glassmorphism or backdrop-blur
- NO 3D renders or illustrations
- NO purple, pink, or neon accents
- NO centered hero layout
- NO bounce or spring easing
- NO brutalist or raw aesthetics
- NO more than ONE accent color
---
## FONTS
Load via Google Fonts:
```
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap
```
Usage:
- **Cormorant Garamond** (400/600, regular + italic): Logo "ATHENA", main headlines, italic emphasis phrases
- **Inter** (400/500/600): Body text, nav links, descriptions (default page font)
- **JetBrains Mono** (400/500): Micro labels, trust row label, metadata
CSS utilities:
- `.font-display { font-family: 'Cormorant Garamond', serif; }`
- `.font-body { font-family: 'Inter', sans-serif; }`
- `.font-mono-label { font-family: 'JetBrains Mono', monospace; }`
---
## FLUID SIZE SYSTEM
```css
:root {
--pad-x: clamp(1.5rem, 5vw, 4rem);
--section-gap: clamp(4rem, 10vh, 8rem);
--logo: clamp(1.25rem, 1.5vw, 1.75rem);
--nav: clamp(0.7rem, 0.3vw + 0.5rem, 0.85rem);
--headline: clamp(2rem, 4vw, 3.5rem);
--subhead: clamp(1.33rem, 2.67vw, 2.33rem);
--body: clamp(0.9rem, 0.3vw + 0.8rem, 1rem);
--micro: clamp(0.65rem, 0.2vw + 0.55rem, 0.75rem);
--btn-px: clamp(1.5rem, 2vw, 2rem);
--btn-py: clamp(0.7rem, 0.8vh, 0.9rem);
--border: 1px solid #E0DFDB;
}
```
---
## COLOR SYSTEM
```css
:root {
--ground: #FAFAF8; /* Warm white — NEVER pure #FFF */
--ground-elevated: #F5F4F0; /* Slightly warmer for panels */
--ink: #1A1A1A; /* Near-black — warm */
--ink-secondary: #4A4A4A;
--ink-muted: #888888;
--border: #E0DFDB;
--accent: #2563EB; /* Blue pill — ONE accent only */
}
```
Body: `bg-[#FAFAF8] text-[#1A1A1A] antialiased font-body`.
Selection: `selection:bg-[#2563EB] selection:text-[#FAFAF8]`.
Paper grain overlay (fixed, very subtle):
```css
.paper-grain {
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
opacity: 0.03; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' /></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>");
}
```
---
## PAGE STRUCTURE
Root: `min-h-screen bg-[#FAFAF8] text-[#1A1A1A] font-body relative overflow-x-hidden`.
### 1. Header
Padding: `paddingInline: var(--pad-x)`, `paddingTop: clamp(1.2rem, 2vh, 2rem)`, `paddingBottom: clamp(0.8rem, 1.5vh, 1.5rem)`.
Flex space-between, items center.
**Logo (left):** Cormorant Garamond 600, tracking `0.05em`, size `var(--logo)`. Text: `Athena`. Sentence case. Color `#1A1A1A`.
**Nav (right):** Inter 500, tracking `0.05em`, size `var(--nav)`, gap `clamp(1.5rem, 3vw, 2.5rem)`.
Links: `Platform` | `Research` | `Pricing` | `Contact`
Hover: color → `#2563EB` (300ms).
### 2. Hero Section
`min-h-[90dvh]`, flex column, justify-center.
Padding: `paddingInline: var(--pad-x)`, `paddingBlock: var(--section-gap)`.
**Orbit lines (background, absolute, z-0):**
SVG with circles and ellipses, stroke `#2563EB` at 10% opacity, 0.5px stroke. Positioned to connect headline area to illustration area.
**Left block (z-10, max-width 55%):**
1. Micro label — JetBrains Mono 400, uppercase, tracking `0.15em`, size `var(--micro)`, color `#888`:
`RESEARCH INTELLIGENCE / v3.1`
2. Headline — Cormorant Garamond 600, tracking `0.01em`, leading `1.1`, size `var(--headline)`:
`Wisdom, *systematized*`
(The word "systematized" is in italic Cormorant Garamond 400)
3. Body — Inter 400, size `var(--body)`, color `#4A4A4A`, max-width 480px, line-height 1.7:
`Athena synthesizes millions of research papers into connected knowledge graphs. For teams who need to understand, not just search.`
4. CTA pill — `bg-[#2563EB] text-[#FAFAF8]`, rounded-full, Inter 500, tracking `0.02em`, size `var(--body)`, padding `var(--btn-px)` / `var(--btn-py)`. Text: `Begin Research` + lucide `ArrowRight` (size 16). Hover: slight scale (1.02) + shadow. Transition 300ms.
**Right block (z-10, self-end):**
- Grainy classical illustration of a scholar studying celestial charts (robed figure, astronomical instruments)
- Processed with grain overlay (opacity 0.1), desaturated, edges fading into ground
- Size: approximately 40% of viewport width
### 3. Trust Logo Row
`paddingBlock: clamp(2rem, 4vh, 3rem)`, `paddingInline: var(--pad-x)`.
Centered, flex column, gap `1.5rem`.
- Label: JetBrains Mono 400, uppercase, tracking `0.15em`, size `var(--micro)`, color `#888`:
`TRUSTED BY RESEARCHERS AT`
- Logos: 4-5 university/institution logos in grayscale, opacity 0.6, gap `clamp(2rem, 4vw, 3.5rem)`
(Harvard, Oxford, MIT, Stanford, Cambridge — placeholder SVGs or text)
### 4. Feature Sections (3 sections)
Each section: padding `var(--section-gap)` vertical, `var(--pad-x)` horizontal.
Layout: 3-column grid, each cell has small classical icon + serif title + body.
**Section A — Knowledge Graphs**
- Icon: Small classical illustration (anatomical drawing or celestial map), 48px, grainy
- Title: Cormorant Garamond 600, `clamp(1.33rem, 2.67vw, 2.33rem)`: `Connected *knowledge*`
(italic on "knowledge")
- Body: Inter 400, `var(--body)`, `#4A4A4A`: `Map relationships across millions of papers. Find the connection between an obscure 1962 study and last week's preprint.`
**Section B — Citation Analysis**
- Icon: Classical illustration of a scholar with books
- Title: `Citation *intelligence*`
- Body: `Understand influence beyond citation count. Our engine weighs context, methodology, and replication to surface research that actually matters.`
**Section C — Trend Detection**
- Icon: Celestial map illustration
- Title: `Emerging *frontiers*`
- Body: `Identify research areas before they trend. Athena detects signal in the noise of preprints, grants, and conference proceedings.`
### 5. Footer
`paddingBlock: clamp(2rem, 5vh, 4rem)`, `paddingInline: var(--pad-x)`.
- Orbit line decoration (subtle, 0.5px, accent at 8% opacity)
- Footer row: flex space-between, Inter 400, size `var(--micro)`, color `#888`:
- Left: `Athena Research Intelligence`
- Center: `© 2026`
- Right: `Wisdom, systematized`
---
## VISUAL RULES
- Warm white ground (#FAFAF8), near-black ink (#1A1A1A), blue pill accent (#2563EB) on CTA only
- No modern photography — classical illustrations only (scholars, anatomy, celestial maps, herbarium)
- All illustrations processed with grain (opacity 0.08-0.12), desaturated, edges fading
- Orbit lines (0.5px stroke, accent at 8-15% opacity) connecting elements
- Paper grain overlay (opacity 0.03, mix-blend-mode: multiply)
- Serif display (Cormorant Garamond) with ONE italic emphasis phrase per headline
- Sans body (Inter) for readability — contrast with serif display
- Blue pill CTA (fully rounded) — the one modern element
- Trust logo row below hero — structural, not optional
- Motion: gentle — illustration fades (1000ms), orbit lines draw in (1500ms)
- Honor `prefers-reduced-motion: reduce`
---
## ANIMATIONS
| Class | Keyframes | Duration | Easing | Delay |
|-------|-----------|----------|--------|-------|
| `anim-illustration` | opacity 0→1, scale 0.98→1 | 1000ms | `ease-out` | 200ms |
| `anim-orbit-draw` | stroke-dashoffset 100%→0 | 1500ms | `ease-in-out` | 300ms |
| `anim-headline` | opacity 0→1, translateY(12px)→0 | 800ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 100ms |
| `anim-body` | opacity 0→1 | 600ms | `ease-out` | 400ms |
| `anim-trust` | opacity 0→1 (staggered) | 500ms per logo | `ease-out` | 600ms + i*100ms |
| `anim-cta` | opacity 0→1, scale 0.95→1 | 600ms | `ease-out` | 700ms |
`prefers-reduced-motion: reduce` → collapse all to 0.01ms.
---
## ICONS
lucide-react: `ArrowRight` (CTA).
Custom SVGs: classical illustrations (scholars, anatomy, celestial maps), orbit lines (circles, ellipses), trust logos (university crests in grayscale).
---
Recreate this page faithfully with the exact colors, fonts, fluid clamps, copy, layout structure, and animation timings above.
```This prompt recreates a specific design pixel-faithfully. Study it to understand the style at its purest.