ZC Design System
  1. 1Colors
  2. 2Typography
  3. 3Design System
  4. 4Preview
  5. 5Export

Step 3

Design System Builder

Use sensible website defaults, then refine the system only where your brand needs something different.

Selected color direction

Your Brand Studio palette

These colors are carried forward automatically from Brand Studio.

Change colors

Buttons & CTAs

Button presets

Primary

Primary brand color. Hover uses a darker shade.

Secondary

Secondary brand color for alternate emphasis.

Outline

For lower-priority actions.

Spacing

Fluid spacing scale

XSclamp(.5rem, 1vw, .75rem)
Sclamp(.75rem, 1.5vw, 1rem)
Mclamp(1rem, 2vw, 1.5rem)
Lclamp(1.5rem, 4vw, 3rem)
XLclamp(2.5rem, 6vw, 5rem)

Sections

Section styles

Light section
Brand tint section
Dark section

Cards

Reusable content card

01

Service title

Simple radius, subtle border, comfortable internal spacing.

02

Feature title

Designed to adapt naturally across screen sizes.

BackPreview System