Fraunces Typography demo
Fraunces Typography

A typography-focused style featuring isolated Fraunces display serif lettering on solid backgrounds, evoking warm retro-inspired editorial branding for headlines and logos.
Category: Typography-Driven
Era: 2020s Modern
Prompt: 6.6 KB · 914 words
# System Prompt: Build "Fraunces Typography" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Fraunces Typography** — a premium, old-money, classic-editorial aesthetic (heritage, fintech, editorial). Output category: **Typography-Driven**.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css` file. **Forbidden:** the `style="..."` attribute anywhere in HTML.
- All design properties, layout rules, and states are targeted via class or ID selectors only.
- HTML must remain clean, semantic, and styling-agnostic — a full restyle must be achievable by editing CSS alone.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and theme classes:
- **Colors:** `--primary: #C4B773`, `--secondary: #114A34`, plus `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa — enforced in both light and dark themes. Light mode background must NOT be pure white; use `#fefefe` or a warm off-white fitting the heritage mood (e.g., `#F7F3E8`).
- **Typography Tokens:** `--font-base: 'Fraunces', serif`, `--tracking-tight: -0.02em`, `--leading-tight: 0.9`.
- **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
- Define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class selector.
- Include a visible theme toggle button with correct `aria-pressed` / `aria-label` state.
- Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. No HTML restructuring required to switch.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in comments.
- All layouts must be mobile-responsive out of the box (rows collapse to columns on small viewports). **No horizontal scrolling at any breakpoint.**

**1.5 Framework Default**
- Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utilities map back to CSS variables or reusable class names (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons — Google Fonts Mandatory**
- Load **Fraunces** from Google Fonts via `<link>` and bind it to `--font-base`. Fraunces is the identity font of this theme — use it for headings and hero display text; a complementary Google Font (e.g., Inter or Roboto) may serve body copy.
- Icons: **Google Material Symbols** only. **Forbidden:** raw inline SVGs, local icon files, emoji icons.

---

## 2. TYPOGRAPHY-DRIVEN VISUAL DIRECTION

Apply these rules globally as the core of the design:
- `font-family: 'Fraunces', serif` on all display/headline text.
- `letter-spacing: -0.02em` (tight tracking) and `line-height: 0.9` (90% leading) on all headings and hero text.
- **Hero headline:** strict left alignment, large scale (~50% of viewport width feel), rendered as isolated text on a solid `--secondary` (#114A34) background with `--primary` (#C4B773) text — this is the signature visual of the theme.
- Editorial rhythm: generous whitespace, oversized serif numerals for the "How It Works" steps, drop-cap or italic Fraunces accents in testimonials.

---

## 3. REQUIRED SECTIONS

Build, in order: **Hero**, **Features (3 cards)**, **How It Works (3 steps)**, **Testimonials**, **Pricing (3 tiers)**, **FAQ**, **Final CTA**, **Footer with secondary links**.

**3.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.
- Hover: brightness/shadow shift, `cursor: pointer`.
- Focus: distinct focus ring via CSS variables for keyboard navigation.
- Active: `transform: scale(0.97)`.
- Loading: disables interaction, prevents double-clicks, CSS spinner or animated Google Icon without distorting button dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback states driven by `--text-success` / `--text-error`.

**3.2 Cards (Features, Pricing, Testimonials)**
- Default: flexible Flexbox layout, subtle borders, elevation via `--bg-secondary` and shadow tokens.
- Hover: `transform: translateY(-2px)` or shadow elevation.
- `:focus-within`: highlighted border when a child link/button gains focus.
- Skeleton loading: shimmer animation in CSS, no layout jumps.
- Empty state: structured fallback with a Google Icon and guidance text.

**3.3 Forms & Inputs (FAQ search, newsletter signup in Final CTA/Footer)**
- States: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
- Structure: flex container wrapping label, input, and dedicated error feedback container. Use `aria-live` for error messages.

**3.4 FAQ Accordion**
- Animated open/close via CSS transitions, Google Icon chevron rotation, correct `aria-expanded` / `aria-controls`, full keyboard operability.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.
- **Accessibility:** sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles/labels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn-danger` visually distinct in both themes.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
- **Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.
- **Copy:** write all user-facing copy in **English**, in the premium old-money editorial voice (e.g., "A legacy of quiet confidence", "Built for those who think in decades"). No lorem ipsum — write real, theme-appropriate copy for every section.
- Deliver the complete, working code on the first attempt with no placeholders.