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.
UI Design Lab Skills
Framed Grid LayoutsupportLayout / SpacingContainer LinessupportLayout / Spacing