lynnandtonic.com — Design System

1. Visual Theme & Atmosphere

Lynn Fisher’s personal site is a study in deliberate contrast and craft. The palette is built on warm antique tones — a creamy beige that evokes letterpress paper — punctuated by a single, unapologetic red. The typography leans fully into custom display serifs: Hubano-Rough for massive headlines, SydoniaAtramentiqua for body and links, creating a hand-lettered, editorial warmth that feels personal rather than polished. Shadows are absent entirely; depth comes from the light-dark() CSS function toggling between light and dark modes, where dark mode inverts the emotional register — dark background, red text, a more confrontational mood. The overall effect is a designer’s portfolio that wears its craft visibly. Nothing is generic; every element is deliberate.

2. Color Palette & Roles

Absent: Blues, greens, purples, neutrals. This palette is aggressively minimal — two base tones plus one accent.

3. Typography Rules

Scale tokens: --font-xs (.85rem) → --font-sm (1rem) → --font-base (1.2rem) → --font-md (1.5rem) → --font-lg (2.3rem) → --font-xl (3rem) → --font-xxl (6rem).

Key rules: Weight 300 dominates — this is a light, elegant serif experience. The h1 at 96px with weight 300 creates a paradox of scale and delicacy. Navigation links use uppercase as the only transformation applied. No tracking (letter-spacing) adjustments.

4. Component Stylings

Navigation links

• Default: transparent bg, black text, no shadow
• Hover: scale(1.05) transform — subtle kinetic feedback
• Focus: beige fill + black 6px offset box-shadow + red 4px solid outline

Buttons (mode toggle)

• Transparent background, beige border and text (dark mode context)
• Focus: 6px/4px offset black box-shadow + red outline — very tactile, keyboard-first

Border radii: Only 4px detected — corners are nearly sharp, not rounded.

Code blocks: White (--pre-bg) on light, black on dark — isolated reading surfaces.

5. Layout Principles

The site uses a fluid, custom-coded layout with no CSS framework. Spacing is intentionally sparse at the structural level (body/header/main all have zero padding/margin in their base state). Breakpoints are tight and mobile-first: 350px, 499px, 500px, 690px — indicating a heavily hand-tuned responsive design rather than a grid system.

Philosophy: Content breathes at its own rhythm. No columns, no cards, no grid frameworks. The layout feels like a single long-form editorial page.

6. Depth & Elevation

No box shadows are used anywhere. Depth is achieved entirely through:

• Color mode contrast — the light-dark() function provides a dramatic mode switch
• Typography scale — the 6rem --font-xxl versus .85rem --font-xs creates visual hierarchy through size alone
• Focus states — the offset double-shadow on interactive elements creates the only true “lift” effect in the system

7. Do’s and Don’ts

Do:

• Use --red (#ff3b3b) as the sole accent — it appears on hover, focus, and dark-mode text
• Use the light-dark() CSS function for all theme-adaptive values
• Keep borders dotted or solid using --border-dotted / --border-solid tokens
• Apply scale(1.05) on interactive hover — it’s the site’s signature micro-interaction
• Use uppercase for navigation-level links only

Don’t:

• Add box shadows or elevation layers — this site is intentionally flat
• Introduce additional accent colors or neutrals
• Use rounded corners beyond 4px
• Mix sans-serif fonts — the entire voice is in SydoniaAtramentiqua
• Use heavy font weights; 300–600 is the full range

8. Responsive Behavior

Breakpoints: 350px, 499px, 500px, 690px — all below typical desktop thresholds. This suggests:

• Primary design is mobile-first and content-driven
• The extra-large headline (96px h1) likely collapses to use --font-xl (3rem) or --font-lg (2.3rem) on smaller screens
• Navigation probably stacks or simplifies below 500px
• No tablet/desktop grid breakpoints detected — layout scales continuously rather than snapping

Touch targets: The scale hover interaction works well on desktop; on touch the transform is skipped (no hover state on mobile).

9. Agent Prompt Guide

Quick reference:

• Background: #e4e2d7 (light) / #111 (dark)
• Accent: #ff3b3b
• Text: black (light) / #ff3b3b (dark)
• Font: Hubano-Rough (display) + SydoniaAtramentiqua family (all else)

Prompt starters:

• “Design a project card in the lynnandtonic.com style: warm beige background, SydoniaAtramentiqua serif, red accent on hover, sharp 4px corners, no shadows.”
• “Build a dark-mode nav toggle using only color inversion — beige to near-black, black text to red.”
• “Create a typographic hero section: Hubano-Rough headline at 96px weight 300, SydoniaAtramentiqua body, a single red CTA link in uppercase.”

Generated by Sparkbites — extracted from live CSS analysis