Interface Lab

Jack 3D Creator Portfoliov1.0 Published

8.0K

Jack 3D Creator Portfolio Design SystemJack 3D Creator Portfolio 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 systemKanit / 13px / 600 / - / -Body systemKanit / 13px / 400 / - / -Kanit

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

Colors

Primary#0C0C0C

47% usage signal

Secondary#D7E2EA

42% usage signal

Tertiary#646973

6% usage signal

Neutral#BBCCD7

6% usage signal

linear-gradient(180deg,#646973 0%,#BBCCD7 100%)linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%)

Layout

LayoutGridWidthFull BleedGridStrongFramingGlass

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

14px12pxTitle block

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

12px14px16px18px20px22px24px28px30px32px

Buttons

Product

Elevation & Depth

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

Reusable shadowsReusable shadows / Gradient border shell / 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.

16pxradius-134pxradius-240pxradius-350pxradius-4

Card surfaceInput fieldStatus pill