Interface Lab

GroundAI Interior Design AI Landing Pagev1.0 Published

99.0K

GroundAI Landing PageGroundAI Interior Design AI Landing Page establishes a glass grid system for marketing landing page. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.

Typography

Heading systemSF Pro Rounded / 48px / 600 / - / -Body systemSF Pro Rounded / 14px / 400 / - / -SF Pro Rounded

LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09

Colors

background#FFFFFF

35% usage signal

hero-overlayrgba(0,0,0,0.2)

24% usage signal

dark-card#141413

15% usage signal

warm-stone#9E948B

15% usage signal

muted-panel#7D756E

4% usage signal

white-translucentrgba(255,255,255,0.15)

6% usage signal

Secondary#111111

6% usage signal

linear-gradient(to top, rgba(158,148,139,1) 0%

Layout

LayoutGridWidthFull BleedGridStrongFramingGlass

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

8.5px6pxTitle block

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

6px8.5px12px

Buttons

Product

Icons

LinearKeep one stroke/fill rule and align icons to the spacing scale.

Elevation & Depth

Depth is communicated through surfaces, borders, shadows, and blur treatments.

Blur / backdrop filterBlur / backdrop filter / Reusable shadows / Gradient surfaces

Surface sampleGlass

SurfaceGlassBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px

Shapes

Shapes define the radius family for cards, inputs, tags, and supporting surfaces.

9999pxradius-1

Card surfaceInput fieldStatus pill

Interface Lab Skills

Asset Object MediadetailButtons / ComponentsProduct Motion StorydetailLayout / Components / Elevation