Interface Lab

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