Interface Lab

Core Features Gradient Cardsv1.0 Published

8.1K

Core Features Gradient Cards Design SystemCore Features Gradient Cards establishes a open 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 systemInter / 48px / 600 / - / -Body systemInter / 14px / 400 / - / -Inter

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

Colors

Primary#FFFFFF

63% usage signal

Secondary#F5C344

13% usage signal

Tertiary#F28482

13% usage signal

Neutral#B567C2

13% usage signal

linear-gradient(90deg,#F5C344,#F28482,#B567C2)radial-gradient(circle at 50% 0%,#FFB347 0%,#F9ED96 30%,#F4F8F9 60%,#F4F8F9 100%)linear-gradient(90deg,#FFB347,#E5A1F5)radial-gradient(circle at 50% 0%,#E5A1F5 0%,#F8ACA0 30%,#F4F8F9 60%,#F4F8F9 100%)

Layout

LayoutGridWidthFull BleedGridStrongFramingOpen

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

6px5pxTitle block

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

5px6px8px14px16px18px20px24px80px

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.

Reusable shadowsReusable shadows / Gradient border shell / Gradient surfaces

Surface sampleOpen

SurfaceOpenBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px

Shapes

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

12pxradius-120pxradius-2

Card surfaceInput fieldStatus pill