Dipsea Stories Design System

Overview

Dipsea presents itself as an intimate, nocturnal digital sanctuary — a platform for immersive erotic audio storytelling rendered in deep plum darkness that feels both cinematic and confidential. The design language leans heavily into mood over utility: the {colors.canvas} of #26122f establishes an almost theatrical backdrop where content floats like projected imagery in a dim screening room. Against this darkness, {colors.cream} (#e3d0c5) typography in the proprietary Queens Condensed Light typeface reads as elegant, slightly vintage — recalling romance novel cover art and late-night cinema marquees. This warmth contrasts deliberately with the cooler body copy set in Good Sans Light, creating a dual-voice system where headlines seduce and body text informs.

The brand's electrical charge lives in {colors.coral} (#f2472a), a saturated orange-red that powers every call-to-action from the prominent {component.button-primary} in the navigation to the hero's conversion prompt. This voltage color never spreads to structural elements; it remains strictly behavioral — reserved for moments when the user must decide to engage. The result is a visual economy where attention flows unimpeded toward action points because nothing else competes at that saturation level.

Typography defines this system more than any other dimension. The choice of a 300-weight condensed serif for all display roles ({typography.display-xl}, {typography.display-lg}, {typography.title-md}) creates an immediate editorial sensibility — these are not SaaS headlines but narrative titles, meant to be lingered upon. The generous negative letter-spacing (-0.81px at 90px) prevents the dense letterforms from collapsing into illegibility while preserving the typeface's sophisticated character. Body text at 18px in a light sans-serif ({typography.body-md}) maintains readability without introducing visual competition; it recedes gracefully, letting the cream display type command focus.

Shape language throughout favors softness. The {rounded.lg} (30px) radius on {component.story-card} containers and {rounded.md} (20px) on all buttons creates a tactile friendliness that aligns with the brand's sensual positioning. Even the {component.play-button-circle} uses perfect circularity ({rounded.full}). This rounded vocabulary resists any sharp-edged, technical feeling — the interface should feel like touching fabric, not glass. The only exceptions are subtle {rounded.sm} (8px) corners on input fields, where functional clarity momentarily takes precedence.

A sub-system emerges around the story browsing experience: {component.story-card} components float on elevated surfaces ({colors.surface-soft}), each containing rich illustration work overlaid with metadata. The carousel mechanism ({component.carousel-container}) with dot pagination ({component.pagination-dots}) suggests a curated, magazine-like discovery flow rather than utilitarian grid scanning. The "New Releases" section header ({component.section-header-with-link}) paired with a {component.see-all-link} in coral reinforces this editorial framing — content is presented as collections, not databases.

Key Characteristics:

• Dark plum canvas ({colors.canvas}) serves as universal background, establishing nocturnal intimacy
• Cream-colored display typography ({colors.cream}) in Queens Condensed Light provides warm, editorial voice at 300 weight
• Coral voltage CTAs ({colors.coral}) appear exclusively on action surfaces, never structural
• Rounded corners dominate shape language: 30px cards, 20px buttons, circular play controls
• Two-font pairing creates hierarchy by genre: serif headlines signal narrative, sans-serif body signals information
• Story cards function as illustrated floating panels with overlay typography
• Uppercase micro-copy ({typography.button}) with wide letter-spacing (0.05em) on all CTAs conveys confidence without aggression
• Pagination uses outlined inactive states and filled active states in white/cream
• Section headers employ large (45px+) condensed serif with optional right-aligned coral links

Colors

Brand & Accent

• Primary Link Blue ({colors.primary} — #0000ee): Standard web blue used for semantic links and designated as the canonical primary per system assignment. Appears sparingly — primarily as the technical link color.
• Primary Active ({colors.primary-active} — #0000cc): Darkened state for pressed/focused link interactions.
• Coral Voltage ({colors.coral} — #f2472a): The dominant brand action color. Powers all primary buttons ({component.button-primary}, {component.button-nav-primary}), "See All" links, play button accents, and any conversion-oriented element. This is the single most emotionally charged color in the palette.
• Coral Hover ({colors.coral-hover} — #e63d20): Slightly deepened coral for hover states on interactive coral surfaces.
• Coral Dark ({colors.coral-dark} — #c43518): Further deepened variant for pressed/active states.
• Accent Pink ({colors.accent-pink} — #a5006d): Deep magenta appearing in gradient washes and decorative depth treatments within hero backgrounds. Adds warmth to the plum canvas.
• Accent Red ({colors.accent-red} — #ff664d): Softer red-orange used for secondary emphasis and notification indicators.
• Orange Bright ({colors.orange-bright} — #ff5c00): High-saturation orange for alert states and tertiary accents.

Surface

• Canvas ({colors.canvas} — #26122f): Deep plum-purple serving as the root background for the entire application. Nearly black but with discernible violet undertones that prevent flatness. Used on {component.top-nav}, {component.hero-band}, {component.footer}, and all interstitial space.
• Surface Soft ({colors.surface-soft} — #311e39): Lighter plum used as the raised surface for {component.story-card} containers. Provides subtle elevation against the canvas through value contrast alone (no shadows needed).
• Surface Mid ({colors.surface-mid} — #3d2748): Mid-tone plum for secondary panel surfaces and dropdown backgrounds.
• Surface Elevated ({colors.surface-elevated} — #492f55): Lightest plum in the stack, used for modals, tooltips, and highest-elevation overlays.
• Surface Warm ({colors.surface-warm} — #e3d0c5): The cream color repurposed as a surface token for inverted contexts (light cards on dark backgrounds, though rare in current implementation).

Text

• Ink ({colors.ink} — #000000): Absolute black, used technically within card DOM structures where contrast against light internal surfaces is required.
• Body White ({colors.body} — #ffffff): Pure white for high-priority text on dark surfaces — navigation items, card titles, metadata.
• Body Muted ({colors.body-muted} — #ffffffb3): White at 70% opacity for secondary text — story metadata, captions, footer content, placeholder text.
• Cream ({colors.cream} — #e3d0c5): Warm beige-cream, the signature text color for all display typography. Used on {component.hero-headline}, {component.section-header}, and any headline-level element. Carries the entire emotional resonance of the brand's typographic voice.
• Cream Muted ({colors.cream-muted} — #c9b5a9): Desaturated cream for subdued display text in secondary contexts.
• On Primary ({colors.on-primary} — #ffffff): White text atop the dark blue primary link color.
• On Coral ({colors.on-coral} — #ffffff): White text atop coral buttons, providing AAA-level contrast against the saturated orange-red.
• On Dark ({colors.on-dark} — #ffffff): Canonical white-on-dark-surface reference.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(227, 208, 197, 0.2)): Subtle cream-colored border at 20% opacity for delicate dividers and input outlines. Nearly invisible but provides structure.
• Border Cream ({colors.border-cream} — #e3d0c5): Full-opacity cream border for emphasized boundaries — active input states, card borders in light contexts.
• Border Input ({colors.border-input} — #e3d0c5): Cream border specifically for form input fields, matching the input text color.

Semantic

• Link ({colors.link} — #0000ee): Standard hyperlink blue, mapped to {colors.primary} for semantic consistency.
• Link Active ({colors.link-active} — #0000cc): Visited/active link state.
• Error ({colors.error} — #f2472a): Error messaging uses the coral voltage color repurposed semantically — errors demand attention just as CTAs do.
• Success ({colors.success} — #4ade80): Green for confirmation states, subscription success, validation pass.

Typography

Font Family

The Dipsea type system rests on a two-family pairing that creates explicit genre separation between narrative voice and informational voice.

Primary Display Face: Queens Condensed Light — A proprietary condensed serif with extreme verticality and refined stroke contrast. This face carries all headline responsibility from the 96px {typography.display-xl} down through {typography.title-sm} at 32px. Its character is literary, slightly retro, and unapologetically romantic — the typographic equivalent of silk against skin. The font stack includes "Times New Roman" as a fallback, ensuring graceful degradation if the custom font fails to load. Additional weights (Queens Condensed Regular, Queens Condensed Medium) exist in the loaded font-face declarations but are unused in the current design, suggesting intentional restraint.

Primary Body Face: Good Sans Light — A clean, low-contrast geometric sans-serif in the humanist tradition. Set at 18px with 300 weight for {typography.body-md} and {typography.body-lg}, it achieves remarkable legibility despite its lightness by leveraging generous line-height (1.5). The Good Sans family spans Light, Regular, Medium, and Bold weights, allowing the system to dial emphasis through weight rather than size when needed — {typography.button} calls on Good Sans Bold at 700 weight, while {typography.nav-link} uses Good Sans Medium at 500 weight. Fallback is Arial, ensuring system-level reliability.

Monospace Face: Basis Grotesque Mono is declared in font-faces but not utilized in visible extracted CSS, reserved for future code-block or timestamp applications.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 96px | 300 | 1.0 | -0.86px | Hero-scale headlines (potential expanded use) | | {typography.display-lg} | 90px | 300 | 1.05 | -0.81px | Primary hero headline ("Your fantasy, uncensored.") | | {typography.title-md} | 45px | 300 | 1.09 | 0 | Section headers ("New Releases", feature titles) | | {typography.title-sm} | 32px | 300 | 1.2 | 0 | Card titles, sub-section heads | | {typography.body-lg} | 18px | 300 | 1.5 | 0 | Lead paragraph, extended descriptions | | {typography.body-md} | 18px | 300 | 1.5 | 0 | Standard body copy, hero subheadline | | {typography.body-sm} | 15px | 400 | 1.5 | 0 | Story card metadata, compact body | | {typography.caption} | 13px | 400 | 1.4 | 0 | Bylines, timestamps, legal text | | {typography.button} | 12px | 700 | 1.25 | 0.05em | All CTA labels, nav buttons (uppercase) | | {typography.nav-link} | 12px | 500 | 1.3 | 0.08em | Navigation menu items (uppercase) | | {typography.label} | 14px | 500 | 1.4 | 0 | Form labels, tag text |

Principles

The typography system operates on a philosophy of weight restraint as elegance. No displayed text exceeds 400 weight except for interactive micro-copy (buttons at 700, nav links at 500), meaning the design never shouts — it invites. The 300-weight default for both display and body faces creates a unified "light touch" aesthetic where size alone carries hierarchy. When the hero headline scales to 90px, its thin strokes read as confident minimalism rather than anemic hesitation.

Letter-spacing plays a corrective role: at display sizes ({typography.display-lg}, {typography.display-xl}), negative tracking (-0.81px to -0.86px) prevents the condensed serif's narrow forms from looking scattered. At micro-sizes ({typography.button}, {typography.nav-link}), positive tracking (0.05em to 0.08em) combined with uppercase transformation gives small text room to breathe and imparts a subtle luxury-brand feel reminiscent of fashion labeling.

Color is the final hierarchical lever. Display text renders in {colors.cream} (warm beige) while body text uses {colors.body} (white). This chromatic split means even if sizes converged, the eye would distinguish narrative voice (cream/serif) from informational voice (white/sans) through color temperature. The system trusts this multi-variable approach — size, weight, family, color, case — working in concert so no single dimension bears excessive burden.

Uppercase is reserved exclusively for interactive elements: {typography.button} and {typography.nav-link} render uppercase. This convention trains users to read uppercase as actionable — a useful affordance in an interface where engagement (starting a free trial, browsing stories) is the core conversion path.

Note on Font Substitutes

Queens Condensed Light and Good Sans are proprietary fonts served from Dipsea's /fonts/ directory. For open-source reimplementation, map as follows:

• Queens Condensed Light → Playfair Display (Google Fonts) at 300-400 weight with font-stretch: condensed via CSS font-variation-settings or Bebas Neue for a more geometric alternative. Define CSS variable: --font-display: 'Playfair Display', 'Times New Roman', serif.
• Good Sans Light → Inter (Google Fonts) at 300 weight, or Source Sans Pro Light for a closer humanist match. Define CSS variable: --font-body: 'Inter', Arial, sans-serif.

If using Next.js/font or Google Fonts CDN, ensure font-display: swap matches the original implementation to prevent invisible text during load.

Layout

Spacing System

• Base unit: 16px ({spacing.base}), evidenced as the most frequently occurring spacing value (236 instances).

• Tokens:

  • {spacing.xxs} (2px) — Micro-adjustments, hairline offsets
  • {spacing.xs} (6px) — Tight internal padding, icon gaps
  • {spacing.sm} (8px) — Small component gaps, inline spacing
  • {spacing.md} (10px) — Button vertical padding standard
  • {spacing.base} (16px) — Standard gutters, card margins
  • {spacing.lg} (20px) — Component group gaps, CTA container padding
  • {spacing.xl} (24px) — Section internal spacing
  • {spacing.xxl} (40px) — Major section breaks above headers
  • {spacing.section} (60px) — Vertical rhythm between major page sections
  • {spacing.hero} (80px) — Hero band vertical padding
  • {spacing.card-pad} (254px) — Special token: image-area height reserve on story cards before text overlay begins

• Section padding (vertical): {spacing.section} (60px) — Applied between "New Releases" header and preceding hero content; establishes breathing room between narrative zones.

• Card internal padding: {component.story-card} uses compound padding derived from {spacing.card-pad} for the image zone (254px) pushing overlay text to bottom region.

• Gutters: 16px–24px horizontal margins on containerized content within the 1440px max-width viewport.

Grid & Container

• Max content width: 1440px (extracted from main, section, and nav container widths). Content is centered within this constraint on wide viewports.
• Density choice: Editorial/magazine density — generous whitespace, large display type, full-bleed hero imagery. This is not a dashboard or marketplace; it's a narrative showcase where each story card receives substantial real estate.
• Desktop grid behavior: Hero section splits approximately 45%/55% (text column left, illustration card right). Below-fold "New Releases" section uses a horizontal scroll carousel ({component.carousel-container}) rather than a wrapped grid, suggesting a curation-first layout where stories are presented as a filmstrip rather than a catalog.
• Hero column splits: Left column contains {component.hero-headline} (90px), {component.hero-subheadline} (18px), and {component.hero-cta-container} with {component.button-primary}. Right column holds a single large {component.story-card} showcasing featured content with {component.play-button-circle} overlay.

Whitespace Philosophy

The system practices generous negative space as luxury signaling. The 90px headline breathes with 94.5px line-height; the 60px section gaps between major zones feel like scene changes in theater. This is not efficiency-minded whitespace (as in SaaS tools) but atmospheric whitespace — the darkness between stars that makes them visible. The dark canvas ({colors.canvas}) actively participates in this philosophy: because the background is near-black, empty space reads as depth rather than void.

Header Architecture

|-----------------------------------------------------------------------|
| [TRY FREE FOR 7 DAYS]   [ABOUT US]   [BLOG]        Dipsea   [BROWSE] [👤] |
|-----------------------------------------------------------------------
|  nav link              nav link     nav link       logo      btn    icon |
|  (uppercase 12px)                                               (coral)|
|-----------------------------------------------------------------------|
Max-width: 1440px centered. Height: ~72px.
Nav items flush-left, logo centered, actions flush-right.

The {component.top-nav} sits on {colors.canvas} with no visible bottom border — it merges seamlessly with the hero. Navigation items use {typography.nav-link} in white uppercase. The Browse button is a {component.button-nav-primary} in coral. User account icon is a 40px {component.icon-button}.

Hero Section

|----------------------------------------------------------------------------------|
|                                                                                  |
|   Your fantasy,          ┌─────────────────────────────┐                         |
|   uncensored.            │                             │                         |
|                          │   [Story Illustration]     │                         |
|                          │   (full-bleed image)       │                         |
|   Explore your           │                             │                         |
|   deepest fantasies...   │   ┌──────────────────┐     │                         |
|                          │   │ Hometown 11...   │ ▶  │                         |
|   [TRY FREE FOR 7 DAYS]  │   └──────────────────┘     │                         |
|                          └─────────────────────────────┘                         |
|                                                                                  |
|                                    ○ ○ ● ○ ○                                     |
|----------------------------------------------------------------------------------|
Left col (~45%): Headline (90px cream serif), subheadline (18px white sans), 
CTA button (coral pill).
Right col (~55%): Featured story card (30px radius, surface-soft bg, 
illustration fill) with overlay title, chapter info, and circular play button.
Below: Dot pagination (5 dots, center-aligned).

New Releases Section

|----------------------------------------------------------------------------------|
|                                                                                  |
|   New Releases                                              SEE ALL →            |
|   (45px cream serif)                                       (coral uppercase)     |
|                                                                                  |
|   [Card1] [Card2] [Card3] [Card4] [Card5] [Card6] →                               |
|   (horizontal scroll carousel, 30px-radius cards)                                |
|                                                                                  |
|----------------------------------------------------------------------------------|
Section header left-aligned with right-floored "See All" link in coral.
Cards in horizontal scrolling container (overflow-x: auto likely).
Each card: ~400px wide × ~529px tall (from extracted padding values),
surface-soft background, illustration fill, overlay text at bottom.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | {colors.canvas} solid fill, no shadow | Base page background, nav bar, footer | | 1 (Raised) | {colors.surface-soft} solid fill (#311e39), no shadow | Story cards, content panels | | 2 (Floating) | {colors.surface-mid} or {colors.surface-elevated} fill | Dropdowns, modals, tooltips | | 3 (Overlay) | Semi-transparent dark scrim + elevated surface | Lightboxes, player overlays | | Focus ring | Outline or glow in {colors.coral} or {colors.border-cream} | Input focus states, keyboard navigation |

Philosophy: Dipsea employs a value-based elevation system rather than shadow-based. Because the canvas is already near-black, traditional drop shadows would be invisible or muddy. Instead, depth is achieved through progressive lightening of the purple surface tokens — {colors.canvas} (darkest) → {colors.surface-soft} → {colors.surface-mid} → {colors.surface-elevated} (lightest). A story card "floats" above the background simply by being a lighter purple, which the eye interprets as proximity to a virtual light source.

This approach aligns with the brand's nocturnal atmosphere: in low-light environments, objects reveal themselves through subtle luminance shifts rather than cast shadows. The only exception is the {extensions.shadows.sm} token reserved for potential modal/dropdown use cases where physical separation from the background must be unambiguous.

Decorative Depth

The hero background exhibits gradient wash layering: the base {colors.canvas} is modified with radial gradients incorporating {colors.accent-pink} (magenta) and hints of blue, creating an aurora-like atmospheric effect behind the content columns. This treatment is photographic in intent — simulating colored gels on stage lighting or twilight sky gradients. It is not a flat color block but a composed backdrop that adds spatial depth without requiring imagery.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 7px | Input fields, subtle inner corners | | {rounded.sm} | 8px | Small UI elements, tag corners | | {rounded.DEFAULT} | 10px | Default component radius (general purpose) | | {rounded.md} | 20px | All buttons (primary, secondary, nav) | | {rounded.lg} | 30px | Story cards, large content panels | | {rounded.xl} | 42px | Feature cards, promotional banners | | {rounded.pill} | 9999px | Tag labels, category pills | | {rounded.full} | 50% / circular | Play button, avatar placeholders, icon buttons |

Shape Philosophy: The system demonstrates progressive rounding correlates with content intimacy. Small functional elements (inputs at 7px) retain slight angularity for precision. Interactive triggers (buttons at 20px) soften to invite touch. Content containers (cards at 30px) round further to cradle narrative imagery. Perfect circles (play buttons, icon containers) represent pure interaction — the most inviting shape possible. This progression ensures the interface feels increasingly organic as the user moves from utility toward immersion.

Photography Geometry

Story card illustrations employ vertical aspect ratio (approximately 3:4 based on 400px×529px extracted dimensions) with full-bleed fills inside {rounded.lg} (30px) containers. The artwork style observed in the screenshot features flat-vector character illustration with layered color blocking — contemporary editorial illustration with sensual subject matter rendered in sophisticated palettes (purples, peaches, warm skin tones). Images receive no additional filters or overlays beyond the semi-transparent gradient at the card bottom where text overlays. The {component.play-button-circle} (44px, white-filled circle with coral icon) sits as a centered-right overlay on the featured hero card, breaking the image boundary intentionally.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal conversion action across the site. Background {colors.coral}, text {colors.on-coral} (white) in {typography.button} (12px, 700 weight, uppercase, 0.05em letter-spacing). Rounded {rounded.md} (20px) creating pill shape. Padding 10px 24px. Box shadow is explicitly {extensions.shadows.none} (zero-shadow per extracted data). Appears in hero section as "TRY FREE FOR 7 DAYS" CTA. Hover variant is {component.button-primary-hover} with {colors.coral-hover} background.

{component.button-primary-hover} — Active/hover state for primary buttons. Background shifts to {colors.coral-hover} (#e63d20). All other properties identical to {component.button-primary}. Implement with smooth 250ms background-color transition.

{component.button-nav-primary} — Primary action variant positioned in the top navigation bar. Same coral background and white text as {component.button-primary} but with wider horizontal padding (10px 28px) for increased clickability in the compact nav context. Renders "BROWSE" label in the top-right nav cluster.

{component.button-secondary} — Ghost/outlined button variant. Transparent background with {colors.coral} text and {typography.button} styling. Rounded {rounded.md} (20px). Used for secondary actions where primary conversion isn't the goal. May acquire a subtle coral border on hover (implement per convention).

Cards & Containers

{component.story-card} — The fundamental content unit of the platform. Background {colors.surface-soft} (#311e39) creating lifted appearance against {colors.canvas}. Rounded {rounded.lg} (30px) for substantial softness. Typography for overlay text is {typography.body-sm} (15px, 400 weight) in {colors.body} (white). Padding structure is unique: 254px 0px 0px reserves the top 60%+ of the card for full-bleed illustration, then text (title, chapter number, play count) anchors to bottom. These cards populate both the hero's featured slot and the "New Releases" horizontal carousel.

{component.story-card-overlay} — Text overlay region within {component.story-card}. Transparent background allowing illustration show-through beneath. Text color {colors.body} (white). Contains {component.story-card-title} and {component.story-card-meta} stacked vertically with ~8px gap.

{component.story-card-title} — Title text within story card overlay. Uses {typography.body-sm} in white. Typically includes series name and chapter title (e.g., "Hometown 11: In the Garden").

{component.story-card-meta} — Secondary metadata line below title. Chapter identifier and play count (e.g., "Ch. 11 | Hometown | 78,296 plays"). Color {colors.body-muted} (white at 70% opacity) in {typography.caption} (13px).

{component.play-button-circle} — Circular play trigger overlaid on featured story cards. Background rgba(255, 255, 255, 0.95) (near-opaque white), foreground {colors.coral} for the triangle icon. Size 44px diameter, {rounded.full} (perfect circle). Positioned center-right on the hero's featured card. Shadow is zero per extraction. On hover, expect subtle scale-up (1.05–1.1x) with 200ms transform transition.

{component.carousel-container} — Horizontal scrolling wrapper for story card collections. Transparent background. Padding {spacing.lg} (20px) vertical for breathing room. Houses multiple {component.story-card} instances in overflow-x auto arrangement. Includes navigation arrows (not fully visible in screenshot) and connects to {component.pagination-dots} below.

{component.pagination-dots} — Carousel position indicator row. Five circular dots centered below the hero's featured card area. Active dot is {component.pagination-dot-active} (filled {colors.body} white, 10px diameter). Inactive dots are {component.pagination-dot-inactive} (transparent fill, 1.5px white/cream border, 10px diameter). Rounded {rounded.full} on all.

Navigation

{component.top-nav} — Fixed/sticky top navigation bar spanning full viewport width. Background {colors.canvas} merging with page. Height approximately 72px. Text color {colors.cream} for logo, {colors.body} for nav links. Typography {typography.nav-link} (12px, 500 weight, uppercase, 0.08em letter-spacing). No visible border or shadow separating nav from hero — seamless integration.

{component.top-nav-logo} — Centered "Dipsea" wordmark in navigation. Transparent background. Text color {colors.cream}. Typography {typography.display-lg} (90px scaled down via container constraints, or a dedicated smaller logo lockup — extraction shows the Queens Condensed Light family). Height approximately 48px. No border, transparent background, clickable home link behavior.

{component.nav-link-item} — Individual navigation menu entries ("TRY FREE FOR 7 DAYS", "ABOUT US", "BLOG"). Transparent background. Text {colors.body} (white). Typography {typography.nav-link} (12px uppercase). Padding 8px 16px. Active state {component.nav-link-item-active} may shift color to {colors.cream}.

{component.icon-button} — User account/profile icon at far right of navigation. Transparent background. Icon color {colors.body} (white). Size 40px×40px. Shape {rounded.full} (circle). Likely contains a simple user outline SVG (extracted data shows user-icon class).

Inputs & Forms

{component.text-input} — Email/subscription input field. Transparent background (shows {colors.canvas} through). Text color {colors.cream} matching placeholder and value states. Border 1px solid {colors.border-input} (cream). Rounded {rounded.xs} (7px) — notably sharper than buttons, prioritizing functional clarity. Height 48px. Typography {typography.body-md} (18px, 300 weight). Padding 12px 16px internal.

{component.text-input-focus} — Focus state for text inputs. Maintains transparent background and cream text. Border likely thickens or shifts to solid {colors.border-cream} (full opacity). May acquire subtle glow in {colors.coral} or {colors.hairline} tone. Transition duration 250ms per border-bottom 0.25s extracted transition.

Section Structure

{component.hero-band} — Full-width hero section container. Background {colors.canvas} with decorative gradient washes (magenta/purple radial gradients). Text color {colors.cream} for headline. Typography defaults to {typography.display-xl} potential but actual headline uses {typography.display-lg}. Padding {spacing.hero} (80px) vertical with horizontal base spacing. Contains the two-column headline + featured card layout.

{component.hero-headline} — Primary hero headline element displaying "Your fantasy, uncensored." Background transparent. Text {colors.cream}. Typography {typography.display-lg} (90px, Queens Condensed Light, 300 weight, -0.81px letter-spacing). Line-height 1.05 (94.5px). No max-width constraint visible — allowed to breathe naturally.

{component.hero-subheadline} — Descriptive paragraph beneath headline. "Explore your deepest fantasies..." Background transparent. Text {colors.cream} (matching headline for visual unity in text column). Typography {typography.body-lg} (18px, Good Sans Light, 300 weight, 1.5 line-height). Width constrained to ~55–60% of column for readable measure.

{component.hero-cta-container} — Wrapper div positioning the primary CTA button with appropriate margin-top. Transparent background. Padding {spacing.lg} (20px) top to create rhythm between subheadline and button. Houses {component.button-primary}.

{component.section-header} — Section title element for below-fold content areas (e.g., "New Releases"). Background transparent. Text {colors.cream}. Typography {typography.title-md} (45px, Queens Condensed Light). Padding {spacing.xxl} (40px) top, {spacing.lg} (20px) bottom to establish section opening rhythm.

{component.section-header-with-link} — Extended header variant that includes right-aligned "See All" navigation. Same left-aligned title as {component.section-header} but with flex/row layout placing {component.see-all-link} at the trailing edge. Used on "New Releases" section.

{component.see-all-link} — Right-aligned section navigation link. Text "SEE ALL" in coral. Background transparent. Text color {colors.coral}. Typography {typography.button} (12px, 700 weight, uppercase). Padding minimal (8px vertical). Hover state {component.see-all-link-hover} shifts to {colors.coral-hover}. Underline may appear on hover (conventional link behavior).

{component.footer} — Page footer container. Background {colors.canvas} matching nav. Text color {colors.body-muted} (white 70% opacity) for legal/copyright content. Typography {typography.body-sm} (15px). Padding {spacing.section} (60px) vertical with base horizontal padding. Likely contains links, legal text, social icons (not fully visible).

{component.tag-label} — Category or tag badge. Background {colors.surface-soft} (purple). Text {colors.body} (white). Typography {typography.caption} (13px). Shape {rounded.pill} (fully rounded ends). Padding 6px 14px. Used for genre labels (Romance, Fantasy, etc.) potentially overlaid on cards or listed in filter bars.

Do's and Don'ts

Do

• Do maintain the 300-weight default for all display typography ({typography.display-lg}, {typography.title-md}) — the brand's elegance lives in light, expansive letterforms, not bold ones.
• Do reserve {colors.coral} exclusively for interactive, conversion-oriented elements (CTAs, play buttons, "See All" links); never use it for structural decoration or non-clickable highlights.
• Do apply {rounded.lg} (30px) to all story card containers — the generous rounding is essential to the platform's soft, tactile identity.
• Do set display headlines in {colors.cream} (warm beige) rather than pure white — this chromatic warmth distinguishes narrative voice from informational body text.
• Do use {typography.button} (12px, 700 weight, uppercase, 0.05em letter-spacing) consistently on all CTA labels regardless of button style (primary, secondary, nav).
• Do allow generous line-height (1.5) on body text ({typography.body-md}) — the 18px size needs room to breathe at 300 weight.
• Do employ value-based elevation (lighter purples = higher) rather than drop shadows for card/container depth against the dark canvas.
• Do include the radial gradient wash (magenta/purple tones) in hero backgrounds to create atmospheric depth beyond flat color.
• Do uppercase all navigation links and button labels per {typography.nav-link} and {typography.button} specs — this creates a consistent interactive vocabulary.
• Do use {colors.body-muted} (white at 70% opacity) for secondary metadata like play counts, chapter numbers, and timestamps to establish clear hierarchy.

Don'ts

• Don't substitute {colors.primary} (blue #0000ee) for {colors.coral} in CTAs — the pre-assigned primary is the technical link color, not the brand action color.
• Don't bold display headings beyond 300 weight — the system explicitly avoids heavy weights for narrative text; if emphasis is needed, increase size or switch to {colors.coral} instead.
• Don't add drop shadows to story cards — the extracted data shows {extensions.shadows.none} as the explicit card shadow value; depth comes from surface color value difference only.
• Don't use sharp corners (below {rounded.sm} / 8px) on buttons — the 20px {rounded.md} radius is mandatory for all button variants to maintain pill-shape consistency.
• Don't set body copy in anything heavier than 400 weight — the {typography.body-md} at 300 weight is intentional; reserve 500+ for navigation and 700 for CTAs only.
• Don't place {colors.coral} text directly on {colors.canvas} without sufficient contrast testing — always pair coral with {colors.on-coral} (white) or place on very light backgrounds.
• Don't expand the rounded-corner vocabulary beyond the defined scale — if a new component needs rounding, select from {rounded.xs} through {rounded.full} rather than inventing new values.
• Don't mix font families outside the defined pairing — display text stays in Queens Condensed variants, body text stays in Good Sans variants; never set a headline in the sans or body text in the serif.
• Don't remove letter-spacing from button/nav text — the 0.05em–0.08em tracking is essential to the luxury feel of the uppercase micro-copy.
• Don't promote the hero's single-story spotlight layout as the generic card pattern — the hero features one oversized card with play button overlay; carousel cards are smaller uniform units.

Motion & Animation

Transition Tokens

--transition-all: all 0.25s ease;
--transition-border-bottom: border-bottom 0.25s ease;
--transition-box-shadow: box-shadow 0.25s ease;
--transition-opacity-base: opacity 1s ease-in-out;
--transition-opacity-slow: opacity 1.5s ease-in;
--transition-opacity-slow-linear: opacity 1.5s ease-in, top 1s linear;
--transition-transform: transform 0.25s ease;

Keyframe Animations

• swiper-preloader-spin — Rotation animation for carousel loading spinner (used by Swiper library).
• burger1 / burger2 — Hamburger menu icon morphing animations for mobile nav toggle (three-line to X transformation).
• move-left-to-right — Horizontal translation, likely for slide-in reveal animations on scroll or carousel item entry.
• move-right-to-left — Reverse horizontal translation, companion to above for exit animations or counter-scrolling elements.

Interaction Patterns

• Carousel swipe/scroll: Horizontal scroll container with momentum scrolling for story card browsing. Touch/swipe enabled with snap-points likely aligned to card widths.
• Pagination dot transition: Active dot fills with 200–250ms background-color transition; inactive dots remain outlined.
• Button press state: Coral background shifts to {colors.coral-hover} on interaction with ease timing over ~250ms.
• Input focus expansion: Border transitions from subtle {colors.hairline} opacity to solid {colors.border-cream} over 250ms (border-bottom 0.25s detected).
• Play button hover: Expected scale transform (1.05–1.1x) on the {component.play-button-circle} with shadow emergence (currently zero-shadow, may gain {extensions.shadows.sm} on hover).
• Fade-in on scroll: Opacity-based entrance animations (opacity 1s ease-in-out, opacity 1.5s ease-in) applied to below-fold content as it enters viewport — the "New Releases" section and carousel items likely fade up on scroll-trigger.
• Nav transparency: Top nav may shift from fully transparent to {colors.canvas} background on scroll (common pattern for hero-overlapping navigation), though static extraction shows canvas color already applied.

No explicit motion tokens were detected for parallax or complex orchestrated sequences. Recommended timing for any added motion: 250ms duration with ease or ease-in-out easing, matching the brand's "subtle" motion level — nothing should feel jarring or playful; transitions should feel like curtain movements, not animations.

Imagery Style

• Illustration-forward: The platform relies on custom vector-style illustration rather than photography. Observed artwork features flat-color character rendering with sophisticated palette choices (deep purples, peach skin tones, muted teals).
• Sensual subject matter: Illustrations depict intimate scenarios — couples embracing, bedroom settings, suggestive posing — rendered tastefully through artistic stylization rather than photorealism.
• Editorial illustration influence: Art style recalls contemporary editorial illustration (New Yorker-style sophistication meets modern dating app aesthetics) with layered color blocking and minimal line work.
• Warm color harmony: Despite the dark UI, illustrations incorporate warmth — peach, rose gold, amber — creating focal heat against cool card backgrounds.
• Vertical composition: Story card images use tall aspect ratios (~3:4) optimized for portrait-oriented character framing and intimate cropping.
• Full-bleed treatment: Images fill their {component.story-card} containers edge-to-edge, with no padding, border, or frame — the 30px card radius is the only geometric boundary.
• Overlay integration: Text overlays (title, metadata) sit on a subtle dark gradient at the image bottom, ensuring readability without obscuring illustration focal points.
• Consistent style system: All visible cards share illustration approach suggesting a commissioned artist or tight style guide — no mixed media or photo/illustration hybridization.
• Play icon as graphic element: The white circular play button with coral triangle functions as a persistent visual signature across the card system, acting as both UI control and brand mark.
• Atmospheric background: Hero background (behind text column) uses abstract gradient treatment rather than imagery — blurred magenta/purple washes suggesting mood without representing specific scenes.

Icon System

• Library: Custom SVG icons (no detected third-party library — iconLibs array is empty in framework detection). Icons are inline SVG or sprite-referenced.
• Specific icons observed:
  • User/account outline (top-right navigation, {component.icon-button})
  • Play triangle (centered in {component.play-button-circle})
  • Chevron/right-arrow (implicit in "See All" link, carousel navigation)
  • Menu hamburger (mobile nav, implied by burger1/burger2 keyframes)
  • Swiper/preloader spinner (carousel loading state)
• Treatment: Icons use currentColor inheritance, typically rendering in white ({colors.body}) on dark backgrounds or coral ({colors.coral}) on light surfaces (play button interior). Stroke-based for outline icons (user, chevron); fill-based for solid icons (play triangle).
• Size alignment: Play triangle approximately 16–18px within 44px circle. User icon approximately 20–22px within 40px circle. Nav chevron approximately 12–14px. Icons scale with their container using relative units or fixed pixel sizing matched to touch targets.
• Stroke weight: Consistent 1.5–2px stroke on outline icons, maintaining visibility against dark backgrounds without visual heaviness.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — evident from script tags, file structure, and font optimization patterns
- Styling:        CSS Modules or Styled Components (custom setup; no Tailwind classes detected)
- Fonts:          Self-hosted OTF/TTF files from /fonts/ directory with font-display: swap
                 Fallback: Google Fonts (Playfair Display + Inter) for open-source implementation
- Animation:      CSS transitions + vanilla JS keyframes (Framer Motion optional for scroll-triggered fades)
- Icons:          Custom SVG inline components (no external library dependency)
- Component lib:  Custom component architecture; Swiper.js for carousel functionality (detected swiper classes/keyframes)
- State:         React Context or lightweight state management for carousel/play state

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero (headline stacks above card), hamburger nav, vertical card scroll, reduced display type size (90px → 48–56px) | | Tablet | 640px – 1024px | Compressed two-column hero, partial nav collapse, 2-column card grid or continued horizontal scroll | | Desktop | 1024px – 1440px | Full two-column hero layout, complete horizontal nav, carousel with 3–4 visible cards | | Wide | > 1440px | Max-width container (1440px) centered, increased lateral padding, potential 4–5 visible carousel cards |

Touch Targets

• {component.button-primary}: ~160px × 40px (padding 10px 24px plus text width) — exceeds 44×44px minimum comfortably.
• {component.button-nav-primary}: ~180px × 40px (wider padding 10px 28px) — excellent touch target for nav placement.
• {component.play-button-circle}: 44px × 44px diameter — meets WCAG AAA minimum precisely.
• {component.icon-button}: 40px × 40px — falls 4px short of AAA recommendation; consider increasing to 44px on mobile.
• {component.text-input}: 48px height × fluid width — excellent touch target height.
• {component.pagination-dots}: 10px diameter — too small for reliable touch; on mobile, consider expanding carousel to swipe-only (hide dots) or enlarge to 24px with increased hit area.

Collapsing Strategy

• Navigation: At mobile breakpoint, horizontal nav links ("TRY FREE FOR 7 DAYS", "ABOUT US", "BLOG") collapse into hamburger menu triggering off-canvas drawer. Logo remains visible (possibly reduced size). Browse button and user icon may persist in header or move into drawer.
• Hero columns: Two-column layout (text left, card right) collapses to single column with headline/subheadline/CTA stacking vertically above the featured story card, which expands to near-full viewport width.
• Display typography scaling: {typography.display-lg} (90px) reduces to approximately 48–56px on mobile (using clamp() or media queries) to prevent 2–3 characters per line. {typography.title-md} (45px) reduces to 28–32px.
• Carousel behavior: Horizontal scroll carousel persists on tablet but may reduce visible cards from 3–4 to 2–2.5. On mobile, could convert to vertical scroll or snap-point horizontal with 1.1–1.2 card visibility.
• Spacing compression: Vertical rhythm compresses — {spacing.hero} (80px) may reduce to 40–48px; {spacing.section} (60px) to 32–40px on mobile to maximize content visibility.
• Card sizing: Story cards reduce from ~400px wide to ~300–320px on tablet, ~280–300px on mobile, maintaining ~3:4 aspect ratio.

Image Behavior

• Hero featured card illustration: Scales down proportionally within responsive card container; maintains full-bleed fill and 30px corner radius at all breakpoints.
• Carousel card illustrations: Reduce in width following card container; aspect ratio locked; never fall below 260px width to preserve illustration detail recognition.
• Play button overlay: Maintains 44px size and center-right positioning relative to card; may shift to absolute center on mobile where card proportions change.
• Background gradient: Hero gradient wash scales with viewport width; may simplify to solid {colors.canvas} on mobile where performance/bandwidth considerations apply, or use reduced-complexity radial gradient.

Iteration Guide

1. Build a landing page closely mimicking the Dipsea design system using Next.js with CSS Modules or styled-components for styling isolation. Avoid Tailwind unless converting all tokens to utility classes manually.
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define CSS custom properties (:root variables) for all tokens to enable theme-wide consistency — never hard-code a value that has a token reference.
3. Add state variants (-hover, -focus, -disabled) per your stack's conventions; the spec documents Default and Active/Pressed states explicitly. For hover, use the {colors.coral-hover} and {colors.coral-dark} tokens for button color shifts with 250ms ease transitions.
4. When adding a new component, determine which sub-system it belongs to: editorial/narrative (displays cream serif text on canvas), interactive/conversion (uses coral CTA styling), or content/story (uses surface-soft cards with overlay typography). Apply the corresponding surface, text, and radius tokens for that domain.
5. Variants of an existing component live as separate frontmatter entries (button-primary-hover, text-input-focus) — never nest variants inside parent component objects. Each variant is a first-class citizen in the component list.
6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay special attention to {colors.primary} vs {colors.coral} confusion since the pre-assigned primary is blue but the visual brand color is coral.
7. When in doubt about emphasis: rely on size and color temperature before weight. If something needs to stand out, make it larger or shift it to {colors.cream} (for narrative text) or {colors.coral} (for actions) rather than increasing font-weight beyond the 300/400 baseline.
8. Ensure the dark canvas ({colors.canvas}) extends edge-to-edge with no wrapper background showing. The immersive darkness is foundational — any light bleed destroys the effect.
9. For the hero gradient wash, implement as a CSS radial-gradient layered on {colors.canvas} using {colors.accent-pink} (#a5006d) and a blue tone at 30–50% opacity. Keep it subtle — it should suggest atmosphere, not compete with content.
10. Test all text in {colors.cream} against {colors.canvas} for WCAG AA compliance (the cream-on-plum combination must meet 4.5:1 contrast ratio for body text). If custom fonts aren't available, substitute Playfair Display (variable font, weight 300–400) for Queens Condensed and Inter (weight 300) for Good Sans, defining them as --font-display and --font-body CSS variables respectively.

Known Gaps

• Hover state styling: Per the no-hover policy, all hover interactions (button lifts, card scale, link underlines) are inferred rather than extracted. Implementation should add hover states using {colors.coral-hover}, subtle transforms (scale 1.02–1.05), and 250ms ease transitions.
• Loading/skeleton states: No loading skeleton, shimmer, or placeholder patterns were extractable. Recommend implementing a pulsing {colors.surface-soft} rectangle with {rounded.lg} for story card loading states.
• Form validation states: Beyond {component.text-input-focus}, error states (red border, error message text in {colors.error}) and success states are not represented in the screenshot. Design these using coral for errors and {colors.success} green for confirmation.
• Audio player interface: The play button suggests an audio player exists (likely a modal or bottom-bar player), but the player UI surface, progress bar, volume control, and playback state designs are not visible in this landing-page screenshot.
• Authenticated/dashboard views: All extracted data represents the unauthenticated landing page. Subscriber dashboard, library view, playlist management, and account settings surfaces are entirely unknown.
• Mobile navigation drawer: While hamburger keyframes (burger1, burger2) indicate mobile nav exists, the drawer's internal layout, animation choreography, and item styling are not captured.
• Exact gradient values: Hero background gradient uses approximate {colors.accent-pink} but precise color stops, positions, and opacity values are interpolated from visual sampling rather than extracted CSS values.
• Carousel arrow navigation: Previous/next arrow buttons for the horizontal carousel are implied by Swiper usage but not visually confirmed in the screenshot; their design (chevron style, size, positioning) requires design decisions.
• Footer complete contents: Only footer background color and text color are extractable; actual link columns, social icons, copyright text, and newsletter signup form (if present) are below the visible fold.
• Accessibility focus indicators: Beyond input focus borders, no focus-visible rings or high-contrast focus states were detectable. Implement robust focus outlines (2px solid {colors.coral} or {colors.coral} with offset) for keyboard navigation users.