Interface Lab

Vortex Global Scalev1.0 Published

8.4K

Vortex - Global Scale- Layout: Flex - Content Width: Full Bleed - Framing: Open - Grid: Minimal

Typography

Heading systemGeist / 80px / 300 / 88pxBody systemGeist / 15px / 400 / 24pxGeist

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

Colors

primary#10B981

15% usage signal

secondary#22D3EE

6% usage signal

tertiary#F43F5E

9% usage signal

neutral#17191D

4% usage signal

background#17191D

4% usage signal

surface#111317

9% usage signal

text-primary#8E939A

4% usage signal

text-secondary#FFFFFF

15% usage signal

radial-gradient(circle at 48% 74%,rgba(16,185,129,.08)radial-gradient(circle at 50% -16%,rgba(34,211,238,.08)linear-gradient(180deg,transparent,rgba(9,11,13,.54))linear-gradient(180deg,#D9F8FC,#BEEFF7)

Layout

LayoutGridWidthFull BleedGridStrongFramingGlass

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

8px6pxTitle block

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

6px8px9px10px11px12px14px15px16px17px

Buttons

Product

Icons

LinearShapes rely on a tight radius system anchored by 4px, 6px, 8px, and 9999px. Icon geometry should stay linear and compatible with the soft-to-controlled silhouette.

Elevation & Depth

Depth is communicated through elevated surfaces, border contrast, shadow, blur, and a radial gradient border shell. Surfaces should read as elevated first, with borders, shadows, and blur reinforcing that material choice. ### Techniques - Gradient border shell around the main card. - Reusable elevated surfaces for cards and controls.

Reusable shadowsReusable shadows / Gradient surfaces

Surface sampleGlass

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

Shapes

Shapes rely on a tight radius system anchored by 4px, 6px, 8px, and 9999px. Icon geometry should stay linear and compatible with the soft-to-controlled silhouette.

0pxmd9999pxfull

Card surfaceInput fieldStatus pill

Do's and Don'ts

Use these constraints as design lint rules for future generations.

DoDo use the primary palette as the main accent for emphasis and action states.Do keep spacing aligned to the detected 6px rhythm.Do reuse the Elevated surface treatment consistently across cards and controls.Do keep corner radii within the detected 4px, 6px, 8px, 9999px family.

Don'tDon't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.Don't mix unrelated shadow or blur recipes that break the current depth system.Don't exceed the detected moderate motion intensity without a deliberate reason.

Interface Lab Skills

Framed Grid LayoutsupportLayout / SpacingContainer LinessupportLayout / Spacing