FD4.AI Design System
The visual language of fd4.ai. A system built around ink-dark navy, warm parchment, Stripe Press-inspired book textures, and the tension between editorial serif and modern geometric sans-serif.
FD4 feels like a private library at dusk: warm, textured, and intellectually inviting. Every choice serves this mood.
No hero images. No decorative illustrations. The books themselves are the visual identity. Typography, color, and texture do all the heavy lifting.
Cloth-bound book textures, grain overlays, 3D perspective, and real page edges create a sense of physical materiality in a digital medium.
Buttons and cards use translucent backgrounds with visible borders rather than solid fills. Interactions feel light, layered, and precise.
Dark and light modes share identical structure but different palettes. Dark mode is the default (the dusk mood). Light mode is warm parchment, never clinical white.
Two theme palettes built from three material references: ink-dark navy, warm parchment, and ember-orange. Both themes share the same accent hues but at different saturation levels.
The FD4 circle icon uses a four-stop vertical gradient from warm amber to deep rust.
When a book is opened, the detail view always uses a light parchment background regardless of the current theme. This ensures book covers maintain their visual impact.
Two typeface families create the editorial tension at the heart of FD4: a literary serif for presence and a geometric sans-serif for clarity.
Used for all headings, hero text, book titles, taglines, and article body copy. Variable optical sizing from 6pt to 72pt. Loaded from Google Fonts.
Used for body text (non-article), navigation, buttons, labels, and UI elements. Loaded from Fontshare. Weights: 400, 500, 700.
| Context | Family | Weight | Size | Notes |
|---|---|---|---|---|
| Page heading | Newsreader | 400 | clamp(28px, 4vw, 42px) | Hero H1, never bold |
| Section heading | Newsreader | 400–500 | 28–36px | Detail titles |
| Book cover title | Newsreader | 500 | 34px | Standing book detail view |
| Spine title | Newsreader | 500 | 22px desktop / 15px mobile | Max 2 lines, center-aligned |
| Article body | Newsreader | 400 | 19px / 1.75 | Blog content only |
| Body text | Satoshi | 400 | 17px / 1.6 | Descriptions, cards |
| Category label | Satoshi | 500–700 | 12px | Uppercase, 2px tracking |
| Button text | Satoshi | 500 | 14px | CTA buttons |
| Navigation | Satoshi | 400 | 14px | 60% opacity, hover 100% |
| Footer / meta | Satoshi | 400 | 14px | Muted color |
Inspired by Stripe Press cloth-bound books. Every book cover uses a base canvas weave plus an optional variant layer. The overall page has a subtle film grain.
A fixed-position SVG noise filter covers the entire viewport. Opacity differs by theme: 3% dark, 2% light. Creates a warm, analog film quality.
Four texture variants that simulate real cloth-bound book finishes. Each combines a base canvas weave (6px crosshatch grid) with an optional second layer.
Default weave. Tight 6px crosshatch grid with cloth noise.
Heavier weave threads (1.1px vs 0.9px) and stronger noise (28% vs 22%).
Canvas weave + scattered white dot particles + dual radial glow (orange/pink).
Canvas weave with dominant horizontal fibers (thicker horizontal strokes, thinner vertical).
Each book cover has a ::after pseudo-element that adds a subtle top-to-bottom lighting gradient, simulating real overhead lighting hitting a physical book.
Two fixed-position radial gradient layers create warm ambient light pools as the user scrolls through the library. Different intensities for dark/light themes.
All buttons use a translucent tinted background with a visible colored border. Never solid fills. Hover lifts by 2px with a soft glow shadow.
Surface-level containers with backdrop blur and subtle borders. Featured cards get a stronger orange accent border.
Background: surface + backdrop blur. Border: subtle. Hover: surface-hover + orange border.
Stronger 2px orange border to denote prominence. Same backdrop blur treatment.
40px rounded square button. Shows sun icon in dark mode (click for light), moon in light mode (click for dark). Stored in localStorage('fd4-theme').
Vertical progress indicators fixed to the left viewport edge. Thin orange bars that expand on hover/active state.
Small label elements used to tag content types, categories, and status. Always uppercase Satoshi with wide letter-spacing. Three roles: colored type badges, eyebrow category labels, and neutral metadata tags.
10px / 600 weight / 3px 8px padding / 4px radius. Orange for landing/interactive content. Pink for articles/blog. Muted for neutral status.
12px / 600 weight / 4px 12px padding / 4px radius. For larger contexts like card headers or filter bars.
12px / 500 weight / 2px letter-spacing / no background. Used above headlines in detail views and page heroes. Muted by default, accent orange for emphasis.
| Variant | Size | Padding | Weight | Background | Usage |
|---|---|---|---|---|---|
| Type badge (sm) | 10px | 3px 8px | 600 | Translucent tint + 1px border | Book type, content status |
| Category (md) | 12px | 4px 12px | 600 | Translucent tint + 1px border | Card headers, filter pills |
| Eyebrow label | 12px | none | 500 | none (text-only) | Above headlines, section intros |
Circular 40px icons fixed to the bottom-left of the viewport. Surface background with current-color SVG fill.
| Token | Value | Usage |
|---|---|---|
| Page padding | 48px / 24px mobile | All horizontal page padding |
| Section gap | 150px | Between book cards in the library |
| Component gap | 80px | Between book and detail text |
| Card padding | 32px | Interior padding for glass cards |
| Content max-width | 880px | Library book stack |
| Detail max-width | 1300px | Detail view hero area |
| Article max-width | 740px | Blog article column |
| Header padding | 24px 48px | Fixed header spacing |
The homepage has two states that toggle without page navigation: Library View (scrollable book stack) and Detail View (fixed overlay with book + content).
Fixed elements: Header, nav dots, side icons, grain, scroll glows
Scrollable: Hero section → Book stack (150px gap) → Footer
Background: Themed (dark/light via data-theme)
Fixed overlay: Standing book (left) + text (right), centered
Blog mode: Scrollable column — hero at top, article below
Background: Always #f8f6f1 (warm parchment), ignores theme
| Breakpoint | Behavior |
|---|---|
> 900px | Full desktop: sidebar nav dots, side icons, desktop nav, 48px padding |
≤ 900px | Mobile: hamburger menu, 24px padding, stacked detail view, hidden nav dots + side icons, smaller book dimensions |
The books are the visual centerpiece. Two distinct 3D presentations: flat-laying library view and upright detail view, both using CSS 3D transforms.
| Property | Value |
|---|---|
| Aspect ratio | 5.625 : 1 |
| Max width | 720px |
| Perspective | 1200px |
| Rotation | rotateX(55deg) at center, dynamic 42°–118° based on scroll position |
| Spine height | 90px desktop / 60px mobile |
| Hover effect | translateY(-8px) lift, enhanced shadow |
| Scroll animation | Scroll-based rotateX interpolation with IntersectionObserver fade-in |
| Property | Value |
|---|---|
| Dimensions | 420 × 570px desktop / 260 × 350px mobile |
| Perspective | 1200px |
| Rotation | rotateY(-25deg) rotateX(5deg) |
| Hover rotation | rotateY(-15deg) rotateX(3deg) translateY(-10px) |
| Spine width | 65px |
| Page edges | 65px bottom, multi-stop beige gradient |
| Cover typography | Title 34px/500, Subtitle 15px uppercase, Author 18px |
| Shadow | 8px 8px 30px rgba(0,0,0,0.3), 20px 20px 60px rgba(0,0,0,0.2) |
The standing book bottom edge uses a multi-stop gradient to simulate stacked paper pages.
Each book stores 6 color values in the database. Cover and spine have independent primary/secondary gradients and text colors, allowing full creative control per book.
| Field | Usage |
|---|---|
color_primary | Cover gradient start |
color_secondary | Cover gradient end |
color_text | Cover title/subtitle/author color |
color_spine_primary | Spine gradient start |
color_spine_secondary | Spine gradient end |
color_spine_text | Spine title/author color |
Blog-type books display their article content below the hero. The reading experience uses a distinct serif-first type stack optimized for long-form content.
| Element | Family | Size | Line Height | Notes |
|---|---|---|---|---|
| Body text | Newsreader | 19px / 17px mobile | 1.75 | Max-width 740px, auto margins |
| H2 | Newsreader 500 | 28px / 24px mobile | 1.3 | 48px top / 20px bottom margin |
| H3 | Newsreader 500 | 22px | 1.35 | 36px top / 16px bottom margin |
| Paragraph | Newsreader 400 | 19px | 1.75 | 24px bottom margin |
| Blockquote | Newsreader 400 italic | 19px | 1.75 | 3px orange left border, 24px left padding |
| Links | inherit | inherit | inherit | Orange color, underline, 3px offset |
| Horizontal rule | — | — | — | 1px rgba(0,0,0,0.1), 40px vertical margin |
| Source link | Satoshi 500 | 14px | — | Orange, below 1px border-top |
Motion is subtle and purposeful. Everything eases gently, never bounces or overshoots. The goal is fluidity, not flashiness.
| Context | Duration | Easing |
|---|---|---|
| Hover effects (buttons, icons) | 0.2s–0.3s | ease |
| Theme switching (bg, color) | 0.6s | ease |
| View transitions (library/detail) | 0.5s | ease |
| Book hover lift | 0.4s | ease |
| Standing book hover | 0.6s | cubic-bezier(0.23, 1, 0.32, 1) |
| Scroll reveal (books) | 0.8s | ease |
| Hero text entrance | 0.8s | ease, staggered 0.2s |
The logo is a pure SVG circle with gradient fill, horizontal stripe motif, and bold "FD4" lettering. Three sizes are used across the site.
The spine variant uses currentColor instead of a gradient, so it inherits the book's spine text color.
Name in Newsreader 500 at 15px. Tagline in Newsreader 400 italic at 14px, 60% opacity. Tagline hidden on mobile (shown below logo on wrap).
SVG favicon: ink-navy circle with orange accent stripes and parchment-colored "FD4" text. Inverted from the main logo to read well at small sizes.
| Tool | Purpose | Notes |
|---|---|---|
| Vanilla HTML/CSS/JS | Homepage, detail views | No framework. Pure CSS custom properties for theming. |
| Alpine.js | Admin panel reactivity | CDN loaded. x-data, x-model, x-show directives. |
| Tailwind CSS (CDN) | CMO Wingman page | Runtime CDN only. Custom config extends Satoshi + base colors. |
| marked.js | Markdown rendering | CDN loaded. Used for blog article content. |
| SortableJS | Admin drag-and-drop | CDN loaded. Book ordering in admin panel. |
| Tool | Purpose |
|---|---|
| Vercel | Hosting + serverless API functions (Hobby plan, 60s max timeout for ingest) |
| Supabase (PostgreSQL) | Books, blog posts, palettes. Row-level data. |
| Anthropic SDK | Claude Haiku for AI-powered article cleanup during ingestion |