Adjust these dials before using this design system. They control how creative, dense, and animated the output should be. Pick the level that fits your project.
Dial
Level
Description
Creativity
9
1 = Ultra-minimal, Swiss, silent, monochrome. 5 = Balanced, clean but with personality. 10 = Expressive, editorial, bold typography experiments, inline images in headlines, strong asymmetry. Default: 9
1 = Predictable, symmetric grids. 5 = Subtle offsets. 10 = Artsy chaotic, no two sections alike. Default: 8
Motion Intent
6
1 = Static, no animation noted. 5 = Subtle hover/entrance cues. 10 = Cinematic orchestration noted in every component. Default: 6
How to use: Change the numbers above to match your project’s vibe. At Creativity 1–3, the system produces clean, quiet, Notion-like interfaces. At Creativity 7–10, expect inline image typography, dramatic scale contrast, and strong editorial layouts. The rest of the rules below adapt to your chosen levels.
A restrained, gallery-airy interface with confident asymmetric layouts and fluid spring-physics motion. The atmosphere is clinical yet warm — like a well-lit architecture studio where every element earns its place through function. Density is balanced (Level 4), variance runs high (Level 8) to prevent symmetrical boredom, and motion is fluid but never theatrical (Level 6). The overall impression: expensive, intentional, alive.
Display:Geist, Satoshi, Cabinet Grotesk, or Outfit — Track-tight (-0.025em), controlled fluid scale, weight-driven hierarchy (700–900). Not screaming. Leading compressed (1.1). Alternatives forced — Inter is BANNED for premium contexts
Body: Same family at weight 400 — Relaxed leading (1.65), 65ch max-width, Steel Secondary color (#71717A)
Mono:Geist Mono or JetBrains Mono — For code blocks, metadata, timestamps. When density exceeds Level 7, all numbers switch to monospace
Scale: Display at clamp(2.25rem, 5vw, 3.75rem). Body at 1rem/1.125rem. Mono metadata at 0.8125rem
Inter — banned everywhere in premium/creative contexts
Generic serif fonts (Times New Roman, Georgia, Garamond, Palatino) — BANNED. If serif is needed for editorial/creative, use only distinctive modern serifs like Fraunces, Gambarino, Editorial New, or Instrument Serif. Never use default browser serif stacks. Serif is always BANNED in dashboards or software UIs regardless
Buttons: Flat surface, no outer glow. Primary: accent fill with white text. Secondary: ghost/outline. Active state: -1px translateY or scale(0.98) for tactile push. Hover: subtle background shift, never glow
Cards/Containers: Generously rounded corners (2.5rem). Pure white fill. Whisper border (1px, semi-transparent). Diffused shadow (0 20px 40px -15px rgba(0,0,0,0.05)). Internal padding 2rem–2.5rem. Used ONLY when elevation communicates hierarchy — high-density layouts replace cards with border-top dividers or negative space
Inputs/Forms: Label positioned above input. Helper text optional. Error text below in Deep Rose. Focus ring in accent color, 2px offset. No floating labels. Standard 0.5rem gap between label-input-error stack
Navigation: Sleek, sticky. Icons scale on hover (Dock Magnification optional). No hamburger on desktop. Clean horizontal with generous spacing
Loaders: Skeletal shimmer matching exact layout dimensions and rounded corners. Shifting light reflection across placeholder shapes. Never circular spinners
Empty States: Composed illustration or icon composition with guidance text. Never just “No data found”
Error States: Inline, contextual. Red accent underline or border. Clear recovery action
The Hero is the first impression — it must be striking, creative, and never generic.
Inline Image Typography: Embed small, contextual photos or visuals directly between words or letters in the headline. Example: “We build [photo of hands typing] digital [photo of screen] products” — images sit inline at type-height, rounded, acting as visual punctuation between words. This is the signature creative technique
No Overlapping Elements: Text must never overlap images or other text. Every element has its own clear spatial zone. No z-index stacking of content layers, no absolute-positioned headlines over images. Clean separation always
No Filler Text: “Scroll to explore”, “Swipe down”, scroll arrow icons, bouncing chevrons, and any instructional UI chrome are BANNED. The user knows how to scroll. Let the content pull them in naturally
Asymmetric Structure: Centered Hero layouts are BANNED at this variance level. Use Split Screen (50/50), Left-Aligned text / Right visual, or Asymmetric Whitespace with large empty zones
CTA Restraint: Maximum one primary CTA button. No secondary “Learn more” links. No redundant micro-copy below the headline
Grid-First: CSS Grid for all structural layouts. Never flexbox percentage math (calc(33% - 1rem) is BANNED)
No Overlapping: Elements must never overlap each other. No absolute-positioned layers stacking content on content. Every element occupies its own grid cell or flow position. Clean, separated spatial zones
Feature Sections: The “3 equal cards in a row” pattern is BANNED. Use 2-column Zig-Zag, asymmetric Bento grids (2fr 1fr 1fr), or horizontal scroll galleries
Containment: All content within max-width: 1400px, centered. Generous horizontal padding (1rem mobile, 2rem tablet, 4rem desktop)
Full-Height: Use min-height: 100dvh — never height: 100vh (iOS Safari address bar jump)
Bento Architecture: For feature grids, use Row 1: 3 columns | Row 2: 2 columns (70/30 split). Each tile contains a perpetual micro-animation
Every screen must work flawlessly across all viewports. Responsive is not optional — it is a hard requirement. Every single element must be tested at 375px, 768px, and 1440px.
Mobile-First Collapse (< 768px): All multi-column layouts collapse to a strict single column. width: 100%, padding: 1rem, gap: 1.5rem. No exceptions
No Horizontal Scroll: Horizontal overflow on mobile is a critical failure. All elements must fit within viewport width. If any element causes horizontal scroll, the design is broken
Typography Scaling: Headlines scale down gracefully via clamp(). Body text stays 1rem minimum. Never shrink body below 14px. Headlines must remain readable on 375px screens
Touch Targets: All interactive elements minimum 44px tap target. Generous spacing between clickable items. Buttons must be full-width on mobile
Image Behavior: Hero and inline images scale proportionally. Inline typography images (photos between words) stack below the headline on mobile instead of inline
Navigation: Desktop horizontal nav collapses to a clean mobile menu (slide-in or full-screen overlay). No tiny hamburger icons without labels
Cards & Grids: Bento grids and asymmetric layouts revert to stacked single-column cards with full-width. Maintain internal padding (1rem)
Spacing Consistency: Vertical section gaps reduce proportionally on mobile (clamp(3rem, 8vw, 6rem)). Never cramped, never excessively airy
Testing Viewports: Designs must be verified at: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1024px (small laptop), 1440px (desktop)
Note: Stitch generates static screens — it does not animate. This section documents the intended motion behavior so that the coding agent (Antigravity, Cursor, etc.) knows exactly how to implement animations when building the exported design into a live product.
Physics Engine: Spring-based exclusively. stiffness: 100, damping: 20. No linear easing anywhere. Premium, weighty feel on all interactive elements
Perpetual Micro-Loops: Every active dashboard component has an infinite-loop state — Pulse on status dots, Typewriter on search bars, Float on feature icons, Shimmer on loading states
Staggered Orchestration: Lists and grids mount with cascaded delays (animation-delay: calc(var(--index) * 100ms)). Waterfall reveals, never instant mount
Layout Transitions: Smooth re-ordering via shared element IDs. Items swap positions with physics, simulating real-time intelligence
Hardware Rules: Animate ONLY transform and opacity. Never top, left, width, height. Grain/noise filters on fixed, pointer-events-none pseudo-elements only
Performance: CPU-heavy perpetual animations isolated in microscopic leaf components. Never trigger parent re-renders. Target 60fps minimum
No Inter font — use Geist, Outfit, Cabinet Grotesk, Satoshi
No generic serif fonts (Times New Roman, Georgia, Garamond) — if serif is needed, use distinctive modern serifs only (Fraunces, Instrument Serif)
No pure black (#000000) — Off-Black or Zinc-950 only
No neon outer glows or default box-shadow glows
No oversaturated accent colors above 80%
No excessive gradient text on large headers
No custom mouse cursors
No overlapping elements — text never overlaps images or other content. Clean spatial separation always
No 3-column equal card layouts for features
No centered Hero sections (at this variance level)
No filler UI text: “Scroll to explore”, “Swipe down”, “Discover more below”, scroll arrows, bouncing chevrons — all BANNED
No generic names: “John Doe”, “Sarah Chan”, “Acme”, “Nexus”, “SmartFlow”
No fake round numbers: 99.99%, 50%, 1234567 — use organic data: 47.2%, +1 (312) 847-1928
No fabricated data or statistics — never generate metrics, performance numbers, uptime percentages, response times, or any data not explicitly provided by the user. “99.98% UPTIME SLA”, “124ms AVG. RESPONSE”, “18.5k DEPLOY CYCLES” are invented AI filler. Use [metric] placeholders if real data is unavailable
No fake system/metric sections — “SYSTEM PERFORMANCE METRICS”, “KEY STATISTICS”, “BY THE NUMBERS” dashboard cards filled with invented data are BANNED
No LABEL // YEAR formatting — “SYSTEM // 2024”, “METRICS // 2025” is a lazy AI convention, not real design typography
No AI copywriting clichés: “Elevate”, “Seamless”, “Unleash”, “Next-Gen”, “Revolutionize”
No broken Unsplash links — use picsum.photos/seed/{id}/800/600 or SVG UI Avatars
No generic shadcn/ui defaults — customize radii, colors, shadows to match this system
No z-index spam — use only for Navbar, Modal, Overlay layer contexts
No h-screen — always min-h-[100dvh]
No circular loading spinners — skeletal shimmer only