# Dreamcut AI — Design System ## 1. Visual Theme & Atmosphere Dreamcut AI leans into the cinematic AI-tool aesthetic: a dark charcoal base (#171717) with pure system fonts and an indigo/violet accent for interactive elements. There is no custom typeface — the design trusts the OS default sans-serif stack entirely, a deliberate choice that keeps the interface feeling native, fast, and cross-platform neutral. The hero section is massive (160px top, 860px bottom padding) — built for dramatic first impact with a full-viewport scrolling reveal. The overall tone is tool-first with cinematic ambition. --- ## 2. Color Palette & Roles | Role | Value | Notes | |------|-------|-------| | Page background | `#171717` | Near-black charcoal | | Header | transparent | Nav floats over content | | Primary text (header) | `#ffffff` | White on dark | | Button text | `rgb(212,212,212)` | Slightly muted white | | Textarea bg | `rgba(38,38,38,0.6)` | Semi-transparent input surface | | Textarea text | `rgb(229,229,229)` | Off-white | | Textarea border top | `rgba(255,255,255,0.2)` | Subtle top edge | | Textarea border sides | `rgba(82,82,82,0.5)` | Mid-grey sides | | Select bg | `rgb(64,64,64)` | Medium dark for dropdowns | | Label text | `rgb(163,163,163)` | Cool grey for form labels | | Border reference | `rgb(229,231,235)` | Tailwind gray-200 | | CTA accent | Tailwind indigo-500/600 | Interactive primary buttons | The palette is Tailwind dark mode vocabulary — charcoals, cool greys, and white — with Tailwind indigo as the CTA accent. No warm tones anywhere. --- ## 3. Typography Rules **Typeface:** System UI stack — `ui-sans-serif, system-ui, sans-serif` plus emoji fallbacks. No custom fonts. | Level | Size | Weight | Line Height | Tracking | |-------|------|--------|-------------|----------| | h1 | 60px | 500 | 60px | -1.5px | | h2 | 36px | 500 | 40px | normal | | h3 (label) | 12px | 500 | 16px | normal | - Weight 500 (medium) is the single weight used across all heading levels. - h1 has a 1:1 line-height ratio (60px/60px) — tight, cinematic headline setting. - No letter-spacing on h2/h3 — only the hero headline gets the -1.5px compression. - The decision to use system fonts is a product statement: this is a utility, not a brand exhibition. - Tailwind CSS generates the actual utility classes — no design-token typography system. --- ## 4. Component Styling - **Textarea:** Semi-transparent dark bg with asymmetric border — lighter on top, mid-grey on sides, creating a subtle depth illusion. - **Select/Dropdown:** Solid dark grey (#404040) — distinct from textarea. - **Elevation shadow (tier 1):** `rgba(0,0,0,0.05) 0 1px 0, rgba(0,0,0,0.1) 0 4px 4px, rgba(0,0,0,0.15) 0 10px 10px, rgba(0,0,0,0.1) 0 -1px 0 inset` — card with bottom glow. - **Elevation shadow (tier 2):** `rgba(0,0,0,0.1) 0 20px 25px -5px, rgba(0,0,0,0.1) 0 8px 10px` — standard shadow-xl equivalent. - CTA buttons use Tailwind indigo classes — part of the indigo-500/600 range. - No border-radius tokens — relies on Tailwind's rounded utilities. --- ## 5. Layout Principles - Section padding: 160px top, 860px bottom — an extreme bottom pad designed for scroll-driven narrative reveal. - Footer padding: 8px — essentially absent, just clearance. - Header transparent, floating over the hero — no sticky bar interruption of the hero experience. - Tailwind utility-first layout — no custom spacing tokens exposed. --- ## 6. Depth & Elevation - Two shadow tiers: card-level (10px blur) and panel-level (25px blur) — both use black alpha stacks. - Textarea uses an asymmetric border-color trick for pseudo-depth (lighter top edge). - No gradients, no glow effects beyond the shadow stacks. - The extreme bottom section padding creates depth through vertical space, not visual decoration. --- ## 7. Do's and Don'ts **Do:** - Trust the system font — it's intentional, not a placeholder. - Apply indigo only to primary interactive CTA elements. - Use the 1:1 line-height on hero headlines (h1 60px/60px). - Use the two-tier shadow system for cards: subtle (10px) and prominent (25px). **Don't:** - Add custom fonts or brand typefaces — system UI is the design choice. - Introduce warm colours (cream, amber, brown) into this cold dark palette. - Use more than two shadow tiers — keeps the elevation grammar simple. - Break the transparent header convention with a filled nav background. --- ## 8. Responsive Behavior - Footer at 8px padding — nearly invisible on all screen sizes; footer content is minimal by design. - The 860px bottom section padding must collapse significantly on mobile (this is likely animation/scroll trigger space). - System font stack ensures optimal rendering on every OS/device without loading overhead. --- ## 9. Agent Prompt Guide > Build an AI tool interface using Dreamcut's dark utility aesthetic. Background #171717, text white. System font stack: ui-sans-serif, system-ui, sans-serif. Headings at weight 500 — h1 at 60px with 1:1 line-height and -1.5px tracking. CTA buttons in Tailwind indigo. Form inputs use semi-transparent dark backgrounds (rgba(38,38,38,0.6)) with subtle asymmetric borders. Two shadow tiers: card (10px) and panel (25px). No custom typefaces, no warm tones, no gradients. Tailwind utility classes throughout. --- *Generated by Sparkbites — extracted from live CSS analysis*