Generated Interfacev1.0 Published
221.4K
Generated Interface Design SystemGenerated Interface establishes a glass grid system for commerce first screen. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.
Typography
Heading systemui-sans-serif / 48px / 600 / - / -Body systemui-sans-serif / 14px / 400 / - / -ui-sans-serif
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#1A1A1A

6% usage signal

Secondary#FFFFFF

89% usage signal

Tertiary#0C0C0C

6% usage signal

Neutral#3B82F6

6% usage signal

Layout
LayoutGridWidthFull BleedGridStrongFramingGlass
Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path
Spacing
16px8pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

8px16px24px32px48px64px
Icons
LinearPreserve the specified radii, aspect ratios, buttons, icon strokes, and responsive sizing.
Elevation & Depth

Follow the specified overlays, cards, shadows, blur, opacity, z-index, and depth layering.

Blur / backdrop filterBlur / backdrop filter / Reusable shadows
Surface sampleGlass
SurfaceGlassBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px
Shapes

Preserve the specified radii, aspect ratios, buttons, icon strokes, and responsive sizing.

9999pxradius-1
Card surfaceInput fieldStatus pill
Do's and Don'ts

Use these constraints as design lint rules for future generations.

Dokeep the prompt as authoritative. Do not: replace exact URLs, colors, copy, or timing with placeholders.
Don't