Skip to main content
WebCraft
Menu

WebCraft Design System

One reference for hierarchy, materials, and interaction contracts.

A system for consistent hierarchy, readable materials, restrained motion, and accessible interaction.

CSS tokens remain the source of truth. This page documents the values and contracts already used by WebCraft.

Foundation

Design principles

Shared rules keep a growing product coherent without turning every page into a showcase.

  1. Semantic before decorative

    Token names describe purpose rather than a specific hue or effect.

  2. Surface hierarchy

    Surface is the default; Mist and Glass appear only when a real hierarchy needs them.

  3. Motion with purpose

    Motion communicates state and relationship rather than becoming a continuous decoration.

  4. Accessible by default

    Native semantics, visible focus, and reduced-motion behavior are part of the current contract.

Semantic tokens

Color

Semantic color roles make hierarchy and status legible without naming a palette by hue. Light and Dark values are shown together; status always retains a text label.

Page

--wc-color-page

The base page field.

Light
#f5f7fb
Dark
#0d1420

Page subtle

--wc-color-page-subtle

Quiet page-level separation.

Light
#e9edf4
Dark
#131d2b

Surface

--wc-color-surface

Default readable content layer.

Light
rgb(255 255 255 / 94%)
Dark
rgb(23 32 47 / 94%)

Surface subtle

--wc-color-surface-subtle

Supporting content separation.

Light
rgb(255 255 255 / 72%)
Dark
rgb(31 43 62 / 76%)

Surface elevated

--wc-color-surface-elevated

A more explicit functional layer.

Light
#ffffff
Dark
#182235

Text

--wc-color-text

Primary reading text.

Light
#172033
Dark
#edf2fa

Text secondary

--wc-color-text-secondary

Supporting explanation and metadata.

Light
#4e5d75
Dark
#b7c3d7

Text muted

--wc-color-text-muted

De-emphasized supporting detail.

Light
#728099
Dark
#8492aa

Border

--wc-color-border

Fine structural boundary.

Light
rgb(72 91 122 / 18%)
Dark
rgb(181 198 225 / 18%)

Border strong

--wc-color-border-strong

A clearer functional boundary.

Light
rgb(72 91 122 / 32%)
Dark
rgb(181 198 225 / 32%)

Highlight

--wc-color-highlight

Subtle inset material highlight.

Light
rgb(255 255 255 / 72%)
Dark
rgb(255 255 255 / 12%)

Accent

--wc-color-accent

Primary interactive emphasis.

Light
#3f63b5
Dark
#91b5ff

Accent soft

--wc-color-accent-soft

Low-intensity accent context.

Light
#e6edf9
Dark
#1e3155

On accent

--wc-color-on-accent

Text and marks placed on accent.

Light
#ffffff
Dark
#101929

Success

--wc-color-success

Positive status alongside text.

Light
#237a5d
Dark
#73c7a9

Warning

--wc-color-warning

Review or caution status alongside text.

Light
#a66916
Dark
#e7b56c

Error

--wc-color-error

Blocking or error status alongside text.

Light
#b14956
Dark
#ef9aa3

Info

--wc-color-info

Informational status alongside text.

Light
#3f63b5
Dark
#91b5ff

Glass

--wc-color-glass

Transparent material color with a defined boundary.

Light
rgb(255 255 255 / 68%)
Dark
rgb(24 34 51 / 72%)

Crystal start

--wc-color-crystal-start

Brand-level Crystal material start.

Light
rgb(238 244 255 / 88%)
Dark
rgb(39 57 88 / 88%)

Crystal end

--wc-color-crystal-end

Brand-level Crystal material end.

Light
rgb(221 231 249 / 68%)
Dark
rgb(22 33 52 / 72%)

Reading rhythm

Typography

Type roles use the shared system stacks, scale, leading, and weights.

Sans--wc-font-sans
Default interface and reading stack.
ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif
Clarity in every layer.
Mono--wc-font-mono
Code and token values.
ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", monospace
Clarity in every layer.
XS--wc-text-xs
Utility labels and compact metadata.
0.75rem
Clarity in every layer.
Body--wc-text-body
Default reading size.
1rem
Clarity in every layer.
Body large--wc-text-body-lg
Leads and supporting emphasis.
1.125rem
Clarity in every layer.
Title small--wc-text-title-sm
Compact section titles.
1.25rem
Clarity in every layer.
Title medium--wc-text-title-md
Section titles.
1.5rem
Clarity in every layer.
Title large--wc-text-title-lg
Major page sections.
2.25rem
Clarity in every layer.
Display--wc-text-display
A restrained page-level statement.
3.5rem
Clarity in every layer.
Leading XS--wc-leading-xs
Compact utility leading.
1.4
Clarity in every layer.
Leading body--wc-leading-body
Default reading leading.
1.6
Clarity in every layer.
Leading body large--wc-leading-body-lg
Lead paragraph leading.
1.55
Clarity in every layer.
Leading title small--wc-leading-title-sm
Small title rhythm.
1.35
Clarity in every layer.
Leading title medium--wc-leading-title-md
Medium title rhythm.
1.25
Clarity in every layer.
Leading title large--wc-leading-title-lg
Large title rhythm.
1.15
Clarity in every layer.
Leading display--wc-leading-display
Display rhythm.
1.05
Clarity in every layer.
Regular--wc-weight-regular
Base text weight.
400
Clarity in every layer.
Medium--wc-weight-medium
Measured emphasis.
500
Clarity in every layer.
Semibold--wc-weight-semibold
Section emphasis.
600
Clarity in every layer.
Bold--wc-weight-bold
High-priority display emphasis.
700
Clarity in every layer.

Measured gaps

Spacing

A compact scale creates rhythm without letting large gaps destabilize small screens.

2XS--wc-space-2xs
Tight inline separation.
0.25rem
XS--wc-space-xs
Compact related content.
0.5rem
SM--wc-space-sm
Small control and content gaps.
0.75rem
MD--wc-space-md
Default component spacing.
1rem
LG--wc-space-lg
Section-internal separation.
1.5rem
XL--wc-space-xl
Clear group separation.
2rem
2XL--wc-space-2xl
Major content separation.
3rem
3XL--wc-space-3xl
Page-level breathing room.
4.5rem

Boundaries

Shape and elevation

Radius, borders, and shadows make structural relationships clear without decorating every surface.

Radius SM--wc-radius-sm
Compact controls and details.
0.375rem
Radius MD--wc-radius-md
Small grouped elements.
0.625rem
Radius LG--wc-radius-lg
Primary material surfaces.
1rem
Radius XL--wc-radius-xl
Larger grouped moments.
1.5rem
Radius full--wc-radius-full
Pills and circular forms.
9999px
Border fine--wc-border-fine
Low-intensity structural boundary.
1px solid var(--wc-color-border)
Border default--wc-border-default
Clearer functional boundary.
1px solid var(--wc-color-border-strong)
Shadow SM--wc-shadow-sm
Stable reading depth.
0 1px 2px rgb(31 47 78 / 6%)Dark: 0 1px 2px rgb(0 0 0 / 18%)
Shadow MD--wc-shadow-md
Explicit layer depth.
0 10px 26px rgb(31 47 78 / 10%)Dark: 0 10px 26px rgb(0 0 0 / 24%)
Shadow floating--wc-shadow-floating
Rare elevated layer depth.
0 18px 48px rgb(31 47 78 / 16%)Dark: 0 18px 48px rgb(0 0 0 / 34%)
Shadow highlight--wc-shadow-highlight
Inset material highlight.
inset 0 1px 0 var(--wc-color-highlight)

Safe composition

Layout and layering

Container rules and z-index values create a shared safety boundary and controlled visual stack.

Content max--wc-content-max
Concentrated reading measure.
44rem
Page max--wc-page-max
Default page composition.
72rem
Page wide max--wc-page-wide-max
Broader but bounded composition.
90rem
Page gutter--wc-page-gutter
Responsive safe edge for every page.
clamp(1rem, 4vw, 2.5rem)
Navigation height--wc-nav-height
Shared shell offset.
4.25rem
Base--wc-z-base
Ordinary document content.
0
Sticky--wc-z-sticky
Persistent in-flow content.
10
Navigation--wc-z-navigation
Site navigation layer.
20
Dropdown--wc-z-dropdown
Temporary selection layer.
30
Overlay--wc-z-overlay
Overlay boundary.
40
Modal--wc-z-modal
Modal interaction layer.
50
Toast--wc-z-toast
Temporary status layer.
60
  1. 0Base
  2. 10Sticky
  3. 20Navigation
  4. 30Dropdown
  5. 40Overlay
  6. 50Modal
  7. 60Toast

Fluid Material

Material levels

Crystal is reserved for brand-level visual moments and is intentionally not part of the Card material union.

Surface

Default layer for ordinary content and reading.

Mist

Supporting content and light grouping.

Glass

A deliberate functional layer with readable bounds.

Crystal

A rare brand-level moment, never a routine Card material.

Feedback, not spectacle

Motion

Durations and easing explain state and relationship; they are not continuous decoration. Reduced motion shortens animations and transitions to near-instant feedback.

Duration micro--wc-duration-micro
Buttons, focus, and local feedback.
150ms
Duration standard--wc-duration-standard
Material and state changes.
220ms
Duration page--wc-duration-page
Limited page-entry relationships.
360ms
Ease standard--wc-ease-standard
Measured default response.
cubic-bezier(0.2, 0, 0, 1)
Ease enter--wc-ease-enter
Entering relationship.
cubic-bezier(0.16, 1, 0.3, 1)
Ease exit--wc-ease-exit
Exiting relationship.
cubic-bezier(0.7, 0, 0.84, 0)
Ease emphasized--wc-ease-emphasized
A deliberate, limited emphasis.
cubic-bezier(0.2, 0.8, 0.2, 1)

No continuous animation is required to understand this reference.

Current foundation

Accessibility

The system includes practical defaults, but design tokens support accessibility decisions and do not replace page-level testing.

  • Native semantic elements for links, buttons, and content structure.
  • Visible :focus-visible feedback for keyboard navigation.
  • Status text alongside semantic color rather than color-only meaning.
  • A reduced-motion media query that shortens animation and transition duration.
  • Responsive page gutters and keyboard-operable links and buttons.
  • Loading controls expose aria-busy while their action is in progress.

Shared primitives

Component foundations

These are the small shared contracts used across the product. Interactive states and code workflows remain in the Components catalog.

Button

Primary, secondary, ghost, and danger variants; small, medium, and large sizes; disabled and loading states.

Badge

Semantic variants label status with concise text rather than color alone.

Stable Review

Card

Cards support Surface, Mist, and Glass. Crystal remains outside the Card material contract.

Shared boundary

One focused example.

Container

Content, default, wide, and full widths preserve the page gutter as a safety boundary.

Content width
Explore interactive components