Surface
#FFFFFF
Cards, panels, controls, and calm app chrome
02 / 07 · Design system
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.
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
100
200
300
400
500
600
700
800
900
950
System tokens.
Radius
8NoneSharp 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
ModalDialogs and bottom sheets
overlay sheets1.75rem
Layout
5ContainerMain 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
11Button 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
8Page 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
5Inset 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
7SectionAll 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