Paintit.ai Design System

Overview

Paintit.ai presents a striking visual identity built on high-contrast juxtaposition: near-black hero canvases ({colors.surface-black}) give way to crisp white workspace surfaces ({colors.canvas}), with electric mint ({colors.primary} — #00ffc3) serving as the sole voltage point across CTAs, icon accents, and interactive highlights. The system trusts bold size contrast over weight variation for typographic hierarchy—headlines scale up to {typography.title-md} at 36px while remaining medium-weight (500), and even navigation links stay at a restrained 400 weight. Every interactive element embraces the pill shape ({rounded.pill}), creating a consistent visual language of approachable, soft-cornered actions against sharp-edged photographic backgrounds.

The brand's personality lives in its cinematic treatment of interior photography: full-bleed, moody imagery occupies the entire viewport behind the hero search interface, making the white {search-container} card feel like a floating design tool dropped into a photographed space. This tool-like quality carries through to the signature search bar—the central interaction surface that combines free-text input, photo upload capability, and a circular mint-green submit button into what feels like a creative command center rather than a conventional web form. Below the fold, the system shifts to a lighter, more editorial density with smoke-colored section backgrounds ({colors.surface-smoke}) and grid-based content cards that suggest organized exploration of design possibilities.

The typeface throughout is General Sans, a proprietary geometric sans-serif available in weights 300–700, deployed via @font-face declarations with font-display: swap. It delivers a contemporary, slightly technical voice that aligns perfectly with an AI-powered design product—precise without being cold, modern without being trendy. The font's uniform stroke width and open counters perform exceptionally well at both display sizes (the 36px hero headline) and UI scale (14px navigation labels).

Key Characteristics:

• Electric mint brand color ({colors.primary} — #00ffc3) applied sparingly to CTAs, icon fills, and active states only—never as background wash
• Near-black hero surface ({colors.surface-black}) with full-bleed photography providing atmospheric depth
• Pill-shaped buttons ({rounded.pill} — 9999px radius) across all primary and secondary actions
• General Sans typeface at weights 400–500; never exceeding 500 except in edge cases
• Floating white search container ({search-container}) with {rounded.lg} (24px) corners as the signature hero element
• Uppercase text-transform on all button labels regardless of variant
• Three-tier elevation system: flat cards, shadow-raised modals, and glass-morphism stat containers
• Transition timing locked to Material-standard cubic-bezier(0.4, 0, 0.2, 1) at 200–500ms durations

Colors

Brand & Accent

• Primary ({colors.primary} — #00ffc3): Electric mint-cyan used exclusively for filled CTA buttons ({button-primary}), the submit icon circle inside the search bar ({submit-icon-circle}), hover accents, and active state backgrounds. Never used as text color on light surfaces.
• Primary Hover ({colors.primary-hover} — #00e6b0): Slightly darkened mint for hover states on primary buttons.
• Primary Active ({colors.primary-active} — #00c294): Pressed/deeper state mint for click feedback.
• Primary Disabled ({colors.primary-disabled} — #99ffdf): Very pale mint for disabled primary buttons.
• Accent ({colors.accent} — #00ffc3): Alias for primary; the system uses a single-brand-color philosophy.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for content sections, search container background, cookie banner, and the Sign Up solid button.
• Surface Soft ({colors.surface-soft} — #f5f5f5): Near-white used for secondary backgrounds like the Add Photo button interior and section alternates.
• Surface Strong ({colors.surface-strong} — #f4f4f5): Slightly cooler off-white for card backgrounds and subtle differentiation.
• Surface Smoke ({colors.surface-smoke} — #f5f5f5): Section-level background below hero; creates visual rhythm between bands.
• Surface Dark ({colors.surface-dark} — #191b1d): Near-black for footer areas, dark text blocks, and secondary dark surfaces.
• Surface Darker ({colors.surface-darker} — #2a2c2f): Charcoal elevation step above pure black.
• Surface Black ({colors.surface-black} — #000000): Pure black hero background; maximum contrast anchor.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surfaces raised above canvas via shadow (modals, dropdowns).
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.03)): Nearly-transparent white overlay on dark surfaces for stat cards and glassmorphic panels.
• Surface Glass Light ({colors.surface-glass-light} — rgba(255, 255, 255, 0.3)): More opaque glass variant for subtle overlays.

Text / Ink

• Ink ({colors.ink} — #000000): Pure black for maximum-contrast headings on white surfaces.
• Body ({colors.body} — #000000): Body text on white surfaces; same value as ink in this system.
• Body Dark ({colors.body-dark} — #2c2c2f): Off-black for input placeholder and form field text.
• Muted ({colors.muted} — #686a6c): Medium gray for secondary descriptions, metadata, and de-emphasized copy.
• Muted Medium ({colors.muted-medium} — #4b5563): Darker gray for cookie banner legal text and fine print.
• Muted Soft ({colors.muted-soft} — #cacaca): Light gray for disabled elements or very subtle dividers.
• On Primary ({colors.on-primary} — #000000): Black text on mint buttons; satisfies WCAG AA against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text on black/dark hero surfaces.
• On Surface ({colors.on-surface} — #000000): Default text on light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Subtle light gray divider lines.
• Border Dark ({colors.border-dark} — #000000): Solid black outline for Decline/secondary button borders.
• Border Subtle ({colors.border-subtle} — rgba(255, 255, 255, 0.5)): Semi-transparent white border for ghost buttons on dark backgrounds.
• Border Input ({colors.border-input} — rgba(0, 0, 0, 0)): Transparent/no border for clean input fields.

Semantic

• Error ({colors.error} — #dc2626): Red for validation errors and destructive actions.
• Success ({colors.success} — #00c294): Darker mint for success states and confirmations.
• Warning ({colors.warning} — #f59e0b): Amber for caution notices.
• Info ({colors.info} — #3b82f6): Blue for informational callouts.
• Link ({colors.link} — #00ffc3): Mint-colored inline links matching brand.
• Link Active ({colors.link-active} — #00c294): Visited/active link shade.

Typography

Font Family

The entire system runs on General Sans, a proprietary geometric sans-serif typeface served via ten @font-face declarations covering weights 300 through 700 in both roman and italic styles. Font files are OpenType (.otf) format loaded from the Next.js static media directory with font-display: swap to prevent FOIT. The fallback stack is "general_sans", "general_sans Fallback", sans-serif, ensuring graceful degradation if the custom font fails to load. General Sans is deployed uniformly across every role—there is no serif or monospace secondary face in this system. Its geometric construction (uniform stroke, circular bowls, straight terminals) gives it a technical precision that reads as "design-tool-appropriate" without feeling cold.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 500 | 1.15 | -0.02em | Large hero headlines (inferred for larger breakpoints) | | {typography.display-lg} | 20px | 500 | 1.0 | -1px | Navigation-style compact headlines | | {typography.title-md} | 36px | 500 | 1.11 | 0 | Hero main headline "Design any exterior..." | | {typography.title-sm} | 24px | 500 | 1.15 | 0 | Section sub-headlines | | {typography.body-md} | 16px | 400 | 1.4 | 0 | Body copy, input text, descriptions | | {typography.body-sm} | 14px | 400 | 1.43 | 0 | Secondary text, captions | | {typography.caption} | 13px | 400 | 1.38 | 0 | Fine print, timestamps | | {typography.label-md} | 14px | 400 | 1.4 | 0 | Labels, tags | | {typography.button} | 16px | 500 | 1.0 | 0 | Primary/secondary button text (uppercase) | | {typography.button-sm} | 14px | 400 | 1.4 | 0 | Nav buttons (Login, Sign Up) (uppercase) | | {typography.nav-link} | 14px | 400 | 1.4 | 0 | Top navigation menu items (uppercase) |

Principles

The typography system makes a deliberate choice to avoid heavy weights entirely. Even the largest headline ({typography.title-md} at 36px) stops at weight 500—a "medium" that many systems reserve for sub-headlines. This means hierarchy is communicated almost entirely through size differential: the 36px hero headline is visually dominant not because it's bold, but because it's 2.25× the body text size and rendered in white against black ({colors.on-dark} on {colors.surface-black}). This restraint gives the brand a sophisticated, editorial quality that avoids the aggressive "startup landing page" trap of 800-weight display type.

Letter spacing is used surgically: the {typography.display-lg} role applies -1px tracking to tighten the compact 20px navigation headlines, while the inferred {typography.display-xl} uses a gentle -0.02em for readability at large sizes. All other roles sit at normal (0) spacing. The system also employs uppercase transformation universally on buttons—every {typography.button}, {typography.button-sm}, and {typography.nav-link} instance is rendered uppercase via CSS text-transform: uppercase, creating a consistent "label-like" quality across all interactive text that distinguishes it from content prose (which remains sentence case).

Color plays a supporting role in hierarchy: white text on black for hero moments, black text on white for content, and {colors.muted} gray for secondary information. There are no mixed-color spans in headlines—each text block is single-color.

Note on Font Substitutes

General Sans is proprietary and requires licensing. For prototyping or open-source implementations, the closest Google Fonts equivalent is DM Sans, which shares the same geometric skeleton, similar x-height, and available weights 400/500/700. Define CSS variables as follows:

:root {
  --font-sans: 'DM Sans', 'general_sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
}

If DM Sans is unavailable, Inter serves as a functional fallback with slightly more humanist proportions, or Plus Jakarta Sans for a closer geometric match. Avoid system-ui or Helvetica substitutions—they lack the technical character that defines this brand's voice.

Layout

Spacing System

• Base unit: 8px ({spacing.sm}).
• Tokens:
  • {spacing.xxs} (2px): Micro-adjustments, tight icon gaps
  • {spacing.xs} (4px): Inline element spacing
  • {spacing.sm} (8px): Most frequent token—internal gaps, icon padding
  • {spacing.md} (12px): Compact internal padding, form gaps
  • {spacing.base} (16px): Standard padding for cards and containers
  • {spacing.lg} (20px): Button internal spacing reference
  • {spacing.xl} (24px): Section-internal margins
  • {spacing.xxl} (26px): Observed in specific component contexts
  • {spacing.section} (32px): Content section vertical padding
  • {spacing.wide} (40px): Large component gaps
  • {spacing.hero} (60px): Hero section vertical padding
  • {spacing.container} (167px): Specific large spacing observed in hero layout calculations
• Section padding (vertical): {spacing.hero} (60px) for the hero band; {spacing.section} (32px) for below-fold content sections.
• Card internal padding: Stat cards use 28px 15px 32px; the search container uses 16px uniform.
• Gutters: The main content container appears to span 1440px max-width with horizontal padding derived from viewport; mobile gutters collapse to approximately 16px.

Grid & Container

• Max content width: 1440px (observed on <main>, <section>, and <header> elements). This is an unusually wide container suggesting a desktop-first, immersive layout philosophy.
• Density choice: Editorial/immersive—the hero takes full viewport height (min-h-[100lvh]) with the search interface overlaid centrally. Below-fold sections use generous whitespace and grid layouts (4-column observed for feature/stat grids).
• Grid behaviors:
  • Header uses a 3-column CSS Grid: logo left, navigation center, utility actions right.
  • Hero uses grid-rows-[1fr_auto_auto] on mobile, switching to grid-rows-[1fr_auto_1fr] on md+ breakpoint.
  • Content sections use md:grid-cols-4 for card grids with gap-[22px].
• Hero column splits: The hero centers content horizontally; the search container floats over the photograph with no explicit column split—it's a single centered composition.

Whitespace Philosophy

The system practices generous, confident whitespace. The hero section breathes with 60px vertical padding and centers its search interface in a sea of photographic negative space. Below-fold sections maintain 60px band separation with smoke-colored backgrounds creating rhythmic breaks. Cards within grids have 22px gaps—substantial enough to prevent visual crowding despite the wide 1440px canvas. This is not a dense marketplace layout; it's an editorial showcase where each element has room to command attention.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]         PRODUCTS ▼ PRICING ABOUT BLOG CONTACTS   LOGIN SIGN UP │
│ (col 1)              (col 2 - centered)                (col 3)     │
└─────────────────────────────────────────────────────────────────┘
← 1440px max-width container, 64px height, fixed position, transparent bg →

The header is fixed at the top with z-index: 100, spanning full viewport width. The 3-column grid ensures logo locks left, navigation centers (hidden below sm breakpoint), and authentication actions lock right. On mobile, the nav collapses to a hamburger menu and auth buttons hide behind a mobile menu trigger.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │                    [Full-bleed photo background]             │ │
│ │                                                              │ │
│ │            "Design any exterior . ."                         │ │
│ │                                                              │ │
│ │     ┌─────────────────────────────────────────────┐          │ │
│ │     │ Describe what you want...        [+ Photo] [↑] │          │ │
│ │     └─────────────────────────────────────────────┘          │ │
│ │                                                              │ │
│ │  "All Interior Design"  │  Stats/metadata  │  "1627 Users"  │ │
│ └──────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
← min-h-[100lvh], overflow-hidden, relative positioning →

The hero is a layered composition: a fixed/absolute positioned full-bleed image at z-index 0, the headline text layered above it in white, then the floating search container ({search-container}) with its 24px rounded corners casting a subtle drop shadow. Below the search area, additional content rows appear (stats, descriptive text) within the same hero band but pushed toward the bottom of the viewport via the grid row configuration.

Cookie Banner

┌──────────────────────────────────────────────────────────────────┐
│  We use essential cookies to make our site work...               │
│                                                                  │
│                                    [DECLINE]    [ACCEPT]         │
└──────────────────────────────────────────────────────────────────┘
← Fixed or absolute positioned, rounded-lg (24px), elevated shadow →

The cookie consent modal appears as a floating card (likely fixed-bottom or overlay-centered) with substantial padding, body-sm legal text in muted gray, and two action buttons side-by-side right-aligned: a bordered Decline (ghost style) and a filled Accept (primary mint).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Base surfaces, hero background, section bands | | 1 — Hairline | {shadows.xs} — 0 1px 2px rgba(0,0,0,0.05) | Subtle lift for static cards | | 2 — Soft | {shadows.sm} — 0 1.5px 3px rgba(161,161,161,0.1) | Elevated cards, add-photo button | | 3 — Medium | {shadows.md} — 0 3px 5px rgba(115,115,115,0.1) | Search container, floating panels | | 4 — Modal | {shadows.lg} — 0 8px 24px rgba(0,0,0,0.22) | Dropdowns, cookie banner, modals | | 5 — Prominent | {shadows.xl} — combined 20px + 8px shadows | Hero overlays, dramatic elevation |

Philosophy: The system is layered rather than flat, using shadow progression to create clear z-axis relationships. However, it avoids heavy-handed elevation—no colored ambient shadows, no multi-layer colored halos. Shadows remain neutral-toned (black/gray opacity only). The most dramatic elevation ({shadows.xl}) is reserved for the hero's floating search interface, which must "pop" convincingly off the photographic background. For most UI cards, the system stays at levels 0–2, keeping the visual field calm and focused.

Decorative Depth

The primary decorative depth mechanism is full-bleed photography on the hero section. The image isn't a contained rectangle—it fills the entire viewport (absolute inset-0, h-full w-full, overflow-hidden) behind the overlaid UI elements. This photographic depth is complemented by the {colors.surface-glass} overlays on stat cards, which create a frosted-glass effect when layered on the dark hero background. There are no gradient meshes, noise textures, or pattern overlays in this system—depth comes from photography and shadow only.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Nav link active backgrounds, small tag pills | | {rounded.md} | 18px | Add photo button interior | | {rounded.DEFAULT} | 20px | Default card radius, general purpose | | {rounded.lg} | 24px | Search container, cookie banner, hero image mask | | {rounded.xl} | 100px | Specialized wide-radius elements | | {rounded.pill} | 9999px | All buttons (primary, secondary, ghost) | | {rounded.full} | 9999px | Circular elements (submit icon avatar) | | {rounded.circle} | 50% | Avatar circles |

The shape vocabulary is dominated by the pill (9999px) for anything clickable—this is a strong, deliberate choice that gives the interface a friendly, approachable, app-native feel. Containers and cards use moderately large radii (18–24px), avoiding both sharp corners (which would feel corporate/harsh against the photography) and fully-rounded rectangles (which would compete with buttons). The 24px radius on the search container matches the hero image's corner mask, creating visual harmony between the floating tool and its containing frame.

Photography Geometry

Hero imagery is full-bleed with no visible border-radius constraint at the viewport edges, though the underlying container may be clipped to {rounded.lg} (24px). Photography is treated as atmosphere, not object—it has no frame, no border, no inset shadow. Aspect ratio appears to be cinematic widescreen (16:9 or wider), optimized to fill 100lvh without cropping awkwardly. In below-fold sections, if thumbnail imagery exists (not visible in provided screenshot), it would likely follow a 4:3 or 1:1 aspect ratio with {rounded.DEFAULT} (20px) corners based on observed card geometry.

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-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The fixed header bar spanning full viewport width at 64px height. Transparent background allowing the hero image to show through. Contains the three-column grid with logo, navigation, and auth utilities. Has z-index: 100 to float above all content. Transitions with duration-500 on scroll/state changes.

{component.nav-link} — Individual navigation menu items ("PRODUCTS", "PRICING", etc.) rendered in white ({colors.on-dark}) at {typography.nav-link} size (14px, weight 400), uppercase. Background is transparent by default; on active/open state shifts to {component.nav-link-active} with black text. Rounded to {rounded.sm} (6px) with tight padding of 2px 6px 2px 6px. Includes cursor pointer and select-none behavior. Hidden below sm breakpoint.

{component.nav-link-active} — Active or open state of nav link. Text color switches to {colors.ink} (black), indicating the dropdown or current section is engaged. Same dimensions as default state.

{component.button-primary} — The primary call-to-action style exemplified by the "ACCEPT" cookie banner button. Solid {colors.primary} (mint) background with {colors.on-primary} (black) text. Uses {typography.button} (16px, weight 500) in uppercase. Fully pill-shaped at {rounded.pill} (9999px) with generous horizontal padding of 0 50px. Border is explicitly 0px solid. Shadow is none—relies on color contrast alone for prominence. Transition: duration-200 with transition-all.

{component.button-primary-hover} — Hover state for primary buttons. Background shifts to {colors.primary-hover} (#00e6b0)—a 10% darker mint. Maintains all other properties including pill shape and black text.

{component.button-primary-active} — Pressed/clicked state. Background deepens further to {colors.primary-active} (#00c294), providing tactile feedback. This is the darkest mint in the brand palette used for interactive confirmation.

{component.button-secondary} — Outlined/ghost button style seen on the "DECLINE" cookie action. Transparent background with {colors.border-dark} (black) 1px border creating a clear outline. Text is {colors.ink} (black) at {typography.button} weight, uppercase. Same pill shape ({rounded.pill}) and 0 50px padding as primary. Creates strong visual partnership with {component.button-primary} when placed adjacent.

{component.button-secondary-border} — Border-only variant specification. Transparent fill with dark border inherited from the secondary pattern.

{component.button-ghost-dark} — Ghost button for use on dark surfaces, exemplified by the "LOGIN" header button. Transparent background with {colors.border-subtle} (50% white) border creating a subtle outline that's visible against black but doesn't compete. Text is {colors.on-dark} (white) at {typography.button-sm} (14px, weight 400), uppercase. Pill-shaped ({rounded.pill}) with 0 26px padding—slightly narrower than cookie buttons. Transition duration of 300ms.

{component.button-ghost-dark-border} — Border definition for ghost-dark variant: 1px solid rgba(255, 255, 255, 0.5).

{component.button-solid-white} — Solid white button for dark backgrounds, seen as the "SIGN UP" header action. Pure {colors.canvas} (white) background with {colors.ink} (black) text at {typography.button-sm} size, uppercase. Pill-shaped ({rounded.pill}) with 0 26px padding matching the ghost-dark sibling. Border is explicitly 0px none. Paired with {component.button-ghost-dark} in the header's right column.

{component.button-solid-white-hover} — Hover state for solid-white buttons. Background transitions to {colors.muted} (#686a6c)—a medium gray that muddies the white, signaling interactivity while maintaining readability of the black text.

Cards & Containers

{component.hero-band} — The full-viewport hero section. {colors.surface-black} (pure black) background filling min-h-[100lvh] with overflow-hidden to clip the background image. Contains the headline, search container, and lower content stats. Uses CSS Grid row configuration that adapts between mobile and desktop. Padding derives from {spacing.hero} (60px) vertically.

{component.hero-headline} — The main headline text "Design any exterior . ." displayed in {colors.on-dark} (white) at {typography.title-md} (36px, weight 500). Positioned absolutely or within the hero grid, centered horizontally over the photographic background. No background fill—text renders directly on the image.

{component.search-container} — The central floating input card. White ({colors.canvas}) background with substantial {rounded.lg} (24px) corner radius. Internal padding of 16px uniform. Casts {shadows.md} elevation (0 3px 5px at 10% opacity) to lift it convincingly off the hero photograph. Contains the text input, add-photo button, and submit icon arranged horizontally. This is the signature component of the entire interface—the element that defines Paintit.ai's core interaction model.

{component.stat-card} — Informational card appearing in the lower hero area or content grids. {colors.surface-glass} background (3% white on dark, or equivalent light-surface treatment) creating subtle differentiation. Text in {colors.on-dark} or {colors.on-surface} depending on context. Rounded to {rounded.DEFAULT} (20px). Internal padding of 28px 15px 32px (asymmetric—more bottom padding). Width observed at 262px in extracted DOM, suggesting a fixed or constrained card width for stat displays.

{component.cookie-banner} — The cookie consent modal/dialog. White ({colors.canvas}) background with {rounded.lg} (24px) corners matching the search container's friendliness. Internal padding of 24px. Casts {shadows.lg} (0 8px 24px at 22% opacity)—the strongest non-hero elevation—ensuring it floats clearly above any underlying content. Likely fixed-positioned or absolutely centered in viewport. Contains legal text and action button pair.

{component.cookie-text} — Legal/disclaimer text inside the cookie banner. {colors.muted-medium} (#4b5563) gray at {typography.body-sm} (14px) for reduced visual weight. Multi-line paragraph explaining cookie usage with inline link to Cookie Policy.

{component.content-section} — Below-fold content band. {colors.surface-smoke} (#f5f5f5) background creating visual separation from the hero. Vertical padding of {spacing.hero} (60px). Contains grid-layout content (4-column card grid observed). Text color defaults to {colors.ink} for headings and {colors.body} for body copy.

Inputs & Forms

{component.text-input} — The primary text input inside the search container. White background (inherits from parent or explicit {colors.canvas}). Text color is {colors.body-dark} (#2c2c2f)—a very dark gray softer than pure black, reducing harshness during typing. Font is {typography.body-md} (16px, weight 400) for comfortable reading. Notably, border is 0px none—the input has no visible border, relying on the parent container's rounding and shadow for definition. Padding is 8px 8px 0 (asymmetric—top/left/right padding, zero bottom). Placeholder text reads "Describe what you want to design or change...".

{component.text-input-focus} — Focus state for text input. Maintains white background and zero-border treatment. Text color may shift to pure {colors.ink} for stronger emphasis. Implementation should add a focus ring or subtle background tint (recommend {colors.surface-soft} or a {colors.primary} box-shadow inset) since the extracted CSS shows no explicit focus decoration beyond color change.

{component.add-photo-button} — Secondary action button inside the search container for uploading images. {colors.surface-soft} (#f5f5f5) background creating a distinct "zone" within the white card. Text is {colors.ink} (black) at {typography.body-sm} (14px). Rounded to {rounded.md} (18px)—slightly less than the parent container, creating nested visual hierarchy. Padding of 8px 16px. Includes a "+" icon prefix before the label text "Add photo". Appears to the left of the submit button within the search container's flex layout.

{component.submit-icon-circle} — Circular submit/action button at the right end of the search container. Solid {colors.primary} (mint) background forming a 44px circle (inferred from size: 44px context). Contains an upward arrow icon (↑) in {colors.on-primary} (black). This is the only circular interactive in the system (besides potential avatars), breaking from the pill convention to create a distinctive "send/go" affordance. Its placement at the container's trailing edge creates a clear visual completion point for the input flow.

Navigation & Identity

{component.logo-mark} — The Paintit.ai wordmark in the header's first column. Renders in {colors.on-dark} (white) to contrast against the hero image showing through the transparent header. Typography likely uses the brand's logotype (possibly custom-weighted General Sans or a mark variant). Positioned flush-left with 50px gap to the next header element (observed as gap-[50px] on the header's flex container).

Do's and Don'ts

Do

• Do use {colors.primary} (#00ffc3) sparingly—reserve it for filled CTAs ({component.button-primary}), the submit circle ({component.submit-icon-circle}), and active/accent highlights. Overuse dilutes its voltage.
• Do apply {rounded.pill} (9999px) to every button variant. The pill shape is non-negotiable for interactive elements in this system—even outlined buttons must be fully rounded.
• Do render all button text in uppercase via CSS text-transform: uppercase. This applies to {component.button-primary}, {component.button-secondary}, {component.button-ghost-dark}, and {component.button-solid-white} equally.
• Do use {colors.surface-black} as the hero background with full-bleed photography. The dark canvas is what makes the white {component.search-container} pop.
• Do maintain the 1440px max-width container for content sections. The generous width supports the editorial, immersive layout philosophy.
• Do apply {shadows.md} or greater to the search container. It must feel lifted off the photographic background—flat placement would lose the "floating tool" effect.
• Do use General Sans at weight 500 for headlines and weight 400 for body text. Never exceed weight 500 in normal usage.
• Do pair {component.button-solid-white} with {component.button-ghost-dark} in the header's auth cluster. Their visual relationship (solid vs. ghost, white vs. transparent) is designed as a complementary pair.
• Do use {colors.surface-glass} (3% white) for cards layered on dark surfaces. The near-invisibility creates elegant depth without obscuring the photography beneath.
• Do respect the min-h-[100lvh] hero height. The immersive, viewport-filling experience is central to the brand's impact.

Don't

• Don't use {colors.primary} as a background fill for large areas. It's an accent/voltage color, not a surface color. Sections should use {colors.canvas}, {colors.surface-smoke}, or {colors.surface-black} instead.
• Don't add visible borders to {component.text-input}. The clean, borderless aesthetic is intentional—definition comes from the parent container's rounding and shadow.
• Don't mix font families. General Sans handles every role from 13px captions to 48px display text. Introducing a serif or monospace face would break the unified technical-modern voice.
• Don't use sharp corners (0px radius) on containers or cards. Even the smallest rounded element uses {rounded.sm} (6px). The system has no rectangular primitives.
• Don't apply bold (weight 600+) to body text or navigation. The system's hierarchy comes from size and color, not weight bloat. Reserve weight 500 for headings/buttons only.
• Don't place {component.button-primary} on dark backgrounds without verifying contrast. While {colors.on-primary} (black) on mint passes AA, ensure surrounding context doesn't create accessibility issues.
• Don't expand the shadow vocabulary beyond the defined {extensions.shadows} tokens. Custom shadows will break the consistent elevation language (neutral tones, specific opacity progressions).
• Don't lowercase button labels. The uppercase convention is universal—sentence-case buttons would look like implementation errors.
• Don't reduce the search container's padding below 16px. The breathing room around the input and action buttons is essential to the "tool" feeling.
• Don't treat the cookie banner as an afterthought in terms of radius or shadow. Its {rounded.lg} + {shadows.lg} treatment matches the search container's production quality—consistency signals polish.

Motion & Animation

Transition Tokens

--transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-color: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                   background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                   border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                   text-decoration-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                   fill 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                   stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-color-fast: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                         background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                         border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                         text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                         fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                         stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-header: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-delayed: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
--transition-enter: all 0.3s cubic-bezier(0, 0, 0.2, 1);

Keyframe Animations

• pulse — Subtle scale/pulse for loading indicators or attention draws
• spin — Continuous rotation for loading spinners (360°)
• enter — Element entrance animation (likely fade + slide)
• exit — Element exit animation (likely fade + slide opposite)
• stylesTrigger — Style selection panel trigger animation
• stylesDesignTrigger — Design mode activation transition
• stroke — SVG stroke drawing animation (for icon reveals)
• scale — Transform scale animation (grow/shrink)
• fill — SVG fill color transition
• accordion-up — Accordion panel collapsing (height animation)
• accordion-down — Accordion panel expanding (height animation)
• swiper-preloader-spin — Swiper carousel preloader rotation
• Laoading_loading-spinner-rotate__EyJZX — Custom loading spinner rotation (note: typo preserved from source—"Laoading")
• Laoading_loading-spinner-dash__OEFeh — Loading spinner dash-offset animation (stroke reveal)
• Laoading_loading-spinner-color__Fala4 — Loading spinner color pulse
• swipe-out — Card/item swipe-to-dismiss gesture animation
• sonner-fade-in — Toast notification fade-in (Sonner library integration)
• sonner-fade-out — Toast notification fade-out
• sonner-spin — Toast spinner animation

Interaction Patterns

• Header scroll behavior: The fixed header transitions over 500ms (--transition-header)—likely shifting from transparent to a solid/scrolled state, or adjusting padding/opacity based on scroll position.
• Button hover lift: Buttons use transition-all with 200–300ms duration, suggesting background color shifts (documented in state variants) and potentially subtle transform translateY(-1px) lifts.
• Search container focus: The text input's focus state likely triggers a subtle shadow intensification or ring expansion on the parent {component.search-container}, given that the input itself has no border.
• Dropdown reveal: Navigation "Products" item shows data-[state=open] classes, indicating Radix/UI-controlled dropdown with enter/exit animations (enter/exit keyframes) triggered on open/close.
• Accordion expansion: Content sections or FAQ-style areas use accordion-up/accordion-down for smooth height animations, typical of spec-sheet or feature-detail reveals.
• Toast notifications: Sonner library integration provides toast animations (sonner-fade-in/out/spin) for transient messages (design generation complete, error alerts, etc.).
• Loading states: Multiple loading animation variants exist—from simple spinners (spin, swiper-preloader-spin) to complex dash-reveal spinners (the Laoading_* custom animations)—suggesting different loading contexts (page vs. component vs. generation).
• Swipe gestures: swipe-out animation implies dismissible cards or carousel items respond to touch/drag gestures with momentum-based exit animation.

Imagery Style

• Photographic realism: Hero imagery is a high-resolution photograph of a modern interior/exterior space (visible: window frame looking out onto grassy hillside, dark curtain, furniture silhouette). Shot with naturalistic lighting and shallow depth of field suggesting professional architectural/interior photography.
• Moody, desaturated treatment: The photograph appears slightly desaturated or filtered to lean cool/gray, preventing it from competing with the overlaid white UI elements. It serves as atmospheric backdrop, not focal content.
• Full-bleed, edge-to-edge: Image fills the entire viewport with no margins, frames, or insets. The browser edge is the image edge.
• Cinematic aspect ratio: Composed for widescreen viewing, likely 16:9 or 2:1, optimized for the min-h-[100lvh] container without awkward cropping.
• Subject matter: Architectural/interior spaces—directly aligned with the product proposition (AI interior/exterior design). The visible scene shows a view from an interior looking out, subtly reinforcing the "redesign your space" concept.
• Supporting role: Imagery never dominates; it's always the layer behind the interface. The white search container, headline text, and UI controls always render on top with higher visual priority.
• Below-fold thumbnails (inferred): Content section cards likely contain smaller interior/exterior photographs in 4:3 or 1:1 ratio, possibly with {rounded.DEFAULT} (20px) corners matching card geometry.
• No illustration or 3D: The visual language is purely photographic—no flat illustrations, isometric 3D renders, or abstract gradient art observed. This grounds the product in real-world applicability.
• Consistent color temperature: If multiple photos exist across the site, they likely share a cool, slightly desaturated grade to maintain cohesive mood.

Icon System

• Library: Custom SVG icons (no detected Lucide, Heroicons, Material, or Bootstrap icon class names in the extracted CSS). Icons appear to be inline SVGs or custom components.
• Specific icons observed:
  • Chevron/down arrow (▼) — Products dropdown indicator
  • Plus (+) — Add photo button prefix
  • Up arrow (↑) — Submit/send icon inside the mint circle
  • Menu/hamburger (implied) — Mobile navigation toggle (md:hidden/breakpoint-pattern suggests existence)
• Treatment: Stroke-based icons (inferred from stroke keyframe animation presence). Color is typically currentColor to inherit from parent text color.
• Size alignment: Icons scale with their container context—smaller (14–16px) for nav chevrons and inline prefixes, larger (20–24px) for the submit circle's arrow. The + icon in {component.add-photo-button} appears at roughly 16–18px to balance the 14px label text.
• Stroke weight: Consistent thin-to-medium stroke (likely 1.5–2px) matching General Sans' geometric precision. Heavy or hand-drawn icon styles would clash with the typeface's technical character.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router, evidenced by __next_s chunks, _next/static paths,
                  and React server-component patterns in extracted markup)
- Styling:        Tailwind CSS v3.4+ (utility-first classes confirmed: rounded-full, bg-accent,
                  md:grid-cols-4, gap-[22px], arbitrary value syntax like px-[50px])
- Fonts:          General Sans via @font-face declarations (self-hosted .otf files from /_next/static/media/;
                  fallback stack: "general_sans", "general_sans Fallback", sans-serif)
- Animation:      Tailwind transition utilities + custom CSS keyframes (pulse, spin, enter, exit,
                  accordion, sonner toast library integrated for notifications)
- Icons:          Custom SVG components (inline or via React component library; no external
                  icon set dependency detected)
- Component lib:  Radix UI primitives (evidenced by data-[state=open] attribute patterns on
                  navigation dropdown; Sonner for toasts; possible Radix Accordion for collapsibles)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 576px | Single column, hamburger nav, stacked hero, condensed padding | | Small (sm) | ≥ 576px | Nav becomes visible (hidden sm:flex), some grid columns appear | | Medium (md) | ≥ 768px | Auth buttons visible (hidden md:block), hero grid reconfigures to grid-rows-[1fr_auto_1fr], 4-column content grid activates | | Large (lg) | ≥ 1024px | Full container width utilization, optimal photography display | | XL/Wide | ≥ 1440px | Max container width reached, comfortable spacing at 1440px target |

Touch Targets

• {component.button-primary}: Height derived from padding (0 50px with 16px font suggests ~52–56px total height) — exceeds 44×44px WCAG AAA minimum ✓
• {component.button-solid-white} / {component.button-ghost-dark}: Padding 0 26px at 14px font suggests ~44–48px height — meets AAA minimum ✓
• {component.add-photo-button}: Padding 8px 16px at 14px font yields ~38–40px height — may fall slightly short of AAA; consider increasing vertical padding to 10–12px for mobile
• {component.submit-icon-circle}: 44×44px circle — exactly meets AAA minimum ✓
• {component.text-input}: Inside the padded search container; effective touch area includes the container's 16px padding zone, making the input comfortably tappable ✓
• {component.nav-link}: Padding 2px 6px 2px 6px at 14px font yields ~24px height — fails touch target minimum on mobile. Nav links hidden on small screens anyway (correctly behind hamburger)

Collapsing Strategy

• Navigation: Horizontal nav links ({component.nav-link}) hidden below sm breakpoint (hidden sm:flex), replaced by hamburger menu trigger shown at block md:hidden. The dropdown menu (Products) becomes a full-screen or overlay panel on mobile.
• Header auth cluster: Login/Sign Up buttons ({component.button-ghost-dark}, {component.button-solid-white}) hidden below md (hidden md:block) with a mobile menu alternative appearing (block md:hidden).
• Hero grid: Row configuration changes from grid-rows-[1fr_auto_auto] (mobile: content stacks bottom) to grid-rows-[1fr_auto_1fr] (desktop: content distributed top and bottom with center focus on search).
• Content grids: The 4-column card grid (md:grid-cols-4) collapses to a single column on mobile with a horizontal-scrolling or stacked alternative observed (md:hidden overflow-hidden px-4 for one variant, plus pagination dots mt-6 flex justify-center items-center gap-4 md:hidden suggesting carousel behavior on mobile).
• Search container: Maintains full width on mobile with padding potentially reducing slightly; the internal layout (input + add-photo + submit) may stack vertically on very narrow screens (< 380px).
• Cookie banner: Full-width on mobile with buttons potentially stacking vertically or maintaining side-by-side if viewport permits; padding reduces from 24px to ~16px.

Image Behavior

• Hero photograph: Uses object-cover or similar (inferred from overflow-hidden on container) to fill the 100lvh area at all breakpoints. Aspect-ratio is maintained; no cropping artifacts expected as the image is composed for fullscreen.
• Content section thumbnails (inferred): Would likely switch from 4-column grid to single-column stack or 2-column on tablet, with images scaling to 100% width of their card container.
• Avatar/profile imagery (if present): Would maintain {rounded.circle} or {rounded.full} at all sizes, scaling from 40px (mobile) to 56–64px (desktop).

Iteration Guide

1. Initialize with Next.js + Tailwind: Scaffold the project with Next.js App Router and Tailwind CSS v3.4+. Configure tailwind.config.ts to accept the arbitrary values found in the extracted classes (e.g., gap-[22px], rounded-[24px], px-[50px]).
2. Define CSS custom properties: Extract every token from the YAML frontmatter into :root CSS variables following the --color-{name}, --spacing-{name}, --radius-{name}, --font-{name} convention. Reference these in Tailwind config via theme.extend.colors, etc.
3. Set up General Sans: Self-host the ten .otf files (weights 300–700, roman + italic) in public/fonts/ or src/assets/fonts/. Create the @font-face block exactly as extracted, with font-display: swap. Define --font-sans variable pointing to the family name.
4. Build the header first: Implement {component.top-nav} as a fixed-positioned 3-column grid at 64px height, transparent background. Build {component.logo-mark}, {component.nav-link} (with active state), {component.button-ghost-dark}, and {component.button-solid-white}. Test the responsive collapse at sm and md breakpoints.
5. Implement the hero section: Create the {component.hero-band} with {colors.surface-black} background, min-h-[100lvh], and overflow-hidden. Layer the full-bleed image (use a placeholder interior photo). Overlay {component.hero-headline} in white, centered. Build {component.search-container} as a white rounded-rectangle with shadow, containing {component.text-input}, {component.add-photo-button}, and {component.submit-icon-circle} in a flex row.
6. Build out buttons systematically: Create a Button component accepting variant="primary|secondary|ghost-dark|solid-white" prop. Each variant maps to the corresponding frontmatter entry. Apply uppercase via className or global button style. Ensure all use {rounded.pill}.
7. Implement content sections: Create {component.content-section} bands with {colors.surface-smoke} background. Build the 4-column grid for stat/feature cards ({component.stat-card}) with responsive collapse to single-column or carousel on mobile.
8. Add the cookie banner: Implement {component.cookie-banner} as a fixed-bottom or portal-rendered modal. Include {component.cookie-text} and the Decline/Accept button pair. Match the {rounded.lg} + {shadows.lg} treatment.
9. Wire up motion: Apply the extracted transition tokens to interactive elements—buttons get transition-all duration-200, header gets duration-500, color changes get the specific --transition-color token. Implement the keyframe animations (enter, exit, pulse, spin) as CSS @keyframes blocks.
10. Test accessibility: Verify all touch targets meet 44×44px minimum. Check contrast ratios: {colors.on-dark} on {colors.surface-black} (> 15:1 ✓), {colors.on-primary} on {colors.primary} (~9.5:1 ✓ for #000 on #00ffc3), {colors.ink} on {colors.canvas} (21:1 ✓). Run axe-core or Lighthouse audit.

Font Setup: General Sans is proprietary. For development without the licensed font files, substitute with DM Sans from Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');

:root {
  --font-sans: 'DM Sans', 'general_sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
}

When General Sans .otf files are available, replace the @import with the ten @font-face declarations from the extracted source, pointing to your hosted file paths. The CSS variable --font-sans remains the same—only the @font-face definitions change.

Known Gaps

• Hover states: Per the no-hover policy, exact hover styling (background color shifts, transforms, shadow changes) for buttons, links, and cards is documented only via named state variants (-hover, -active). Implementation teams should define :hover pseudo-styles mapping to these variants.
• Loading/skeleton states: While animation keyframes for spinners were extracted, the exact skeleton placeholder styles (shimmer gradients, pulse overlays) for content loading are not present in the provided CSS snapshot.
• Form validation states: Beyond {component.text-input-focus}, error states (red border/shake animation), success states (green checkmark), and disabled input styling are not captured.
• Dashboard/authenticated surfaces: The screenshot captures the landing/hero view only. Post-login interfaces (user dashboard, design history, project management, account settings) may introduce new components, color modes, or layout patterns not represented here.
• Mobile menu panel: The hamburger-triggered mobile navigation overlay's internal layout, animation, and backdrop treatment is inferred from breakpoint classes but not directly extractable from the visible DOM.
• Carousel/swiper behavior: Mobile content section references swiper-preloader-spin and overflow-hidden patterns implying a horizontal-swipeable card carousel, but the exact swiper configuration (pagination, autoplay, per-view count) is not in the static snapshot.
• Dark mode: The system is classified as mode: light based on canvas color. Whether a dark mode toggle exists (and what surface/text inversions it applies) cannot be determined from the single screenshot. The hero already uses dark surfaces, so a site-wide dark mode might invert content sections only.
• Exact shadow values on dynamic elements: The {shadows.*} tokens capture static shadow definitions, but runtime shadow changes (e.g., search container shadow intensifying on input focus, buttons gaining shadow on press) are implemented via JS or advanced CSS selectors not fully extractable.
• Internationalization (i18n): The site appears English-only in the snapshot. Font rendering implications for CJK, Arabic, or Cyrillic scripts using General Sans are unknown (the font may lack those glyph sets, requiring fallback chains).
• Cookie banner positioning: Whether the cookie consent is fixed-bottom, fixed-top, center-modal, or inline depends on user-state logic not captured in the static DOM. The shadow level ({shadows.lg}) suggests overlay/modal behavior rather than inline flow content.