Foundations

Color foundations, the neutral scale, and the system token groups that every component reads from. Use semantic aliases; raw palette values are only allowed inside the token definition layer.

Foundation colors.

Surface

#FFFFFF

Cards, panels, controls, and calm app chrome

Page

#FBFBF8

Default page background and section field

Neutral

#E5E9DF

Thin dividers, quiet edges, inactive structure

Primary

#62786C

Decisive controls, links, focus, and selected states

#62786C is the main brand color. Any UI using primary as a background must use white text for contrast.

Neutral scale.

50#FBFBF8

100#F3F5EF

200#E5E9DF

300#D1D8CA

400#A6AFA2

500#778073

600#5A655C

700#414C44

800#29332D

900#1A211D

950#101511

System tokens.

Radius

NoneSharp tables and flush joins

--vc-radius-none0px

ControlButtons, tabs, chips, inputs, selects

--vc-radius-control1.25rem

SegmentedToggle groups and grouped controls

--vc-radius-segmented1.5rem

Dropdown panelExpanded menus and option panels

--vc-radius-dropdown-panel0.75rem

ChipPills and compact controls

--vc-radius-chip999rem

CardTiles, panels, tables, cards

--vc-radius-card0rem

FramePage frames and media regions

--vc-radius-frame0rem

Layout

ContainerMain content width

--vc-container1180px max

FrameOuter framed surfaces

--vc-frame1480px max

Section YDefault section rhythm

--vc-section-y5rem

OutlineHairline rule

--vc-outline-width0.0625rem

DividerLayout separators

--vc-border-width0.0625rem

Controls

Button maxLargest button cap

--vc-button-max-height2.5rem

Button smallCompact actions

--vc-button-sm-height2rem

Button mediumDense controls

--vc-button-md-height2.25rem

Button largeDefault actions

--vc-button-lg-height2.5rem

Control radiusHalf height

--vc-radius-control1.25rem

Button textNo responsive drift

--vc-button-*-font-sizesize token

Button weightMedium label

--vc-button-font-weight500

Button XControl side padding

--vc-button-*-padding-xsize token

Button gapIcon and label rhythm

--vc-button-*-gapsize token

Field heightInputs and selects

--vc-field-height2.5rem

Chip paddingCompact tags

--vc-chip-padding-*0.75rem / 0.375rem

Surfaces

Page colorDefault app base

--vc-bg-pageneutral-50

SurfaceCards and panels

--vc-bg-surfaceWhite

SubtleQuiet fills

--vc-bg-subtleneutral-100

PrimaryMain brand color

--color-primary#62786C

On primaryText on primary fills

--color-on-primaryWhite

Outline regionBoxed blocks

.vc-outline-regionsurface

EdgeComponent edges

--vc-edgeborder-subtle inset

DepthNo blurred shadows

--vc-depth0

Edges

Inset edgeInternal crispness

--vc-edge0.0625rem

OutlineMajor regions

--vc-outlineborder-subtle

Subtle borderDefault lines

--vc-border-subtleneutral-200

Strong borderStructured edges

--vc-border-strongneutral-300

DividersPage and table separators

--vc-dividerborder-subtle

Section grid

SectionAll major blocks

<Section>Shared primitive

Layout ruleDistinct regions

.vc-outline-columnsHorizontal + vertical

BorderThin separators

--vc-section-border-colorborder-subtle

Guide lineVertical guides

--vc-section-lineborder-subtle

Dark guideDark sections

--vc-section-line-darkWhite / 16%

Grid gutterVertical guides

--vc-grid-gutterContainer edge

IntersectionsQuiet structure

No double bordersTop rule only

Compatibility aliases.

These older aliases map to the semantic token layer. They exist to keep components stable while the source of truth remains the semantic tokens above.

--vc-page→ neutral-50Legacy page background alias

--vc-surface→ WhiteLegacy surface alias

--vc-ink→ neutral-900Legacy ink and heading alias

--vc-text→ neutral-700Legacy body text alias

--vc-muted→ neutral-600Legacy muted text alias

--vc-border→ neutral-200Legacy border alias

--vc-main→ #62786CLegacy main brand color alias