Getting Started with cssmark
cssmark uses CSS @property rules as the single source of truth for design tokens. Define once, use everywhere.
1. Define your tokens
Create a CSS file with your design tokens using the @property syntax:
@property --color-primary {
syntax: "<color>";
inherits: false;
initial-value: #0055ff;
description: "Primary brand color";
category: "color.brand";
type: "color";
}2. See them in action
3. Generate outputs
# Generate clean CSS with :root variables (for consumption)
cssmark css ./tokens/**/*.css --out variables.css
# Build JSON output (for tooling/integrations)
cssmark build ./tokens/**/*.css --out tokens.json
# Generate this documentation site
cssmark docs ./tokens/**/*.css --out ./docs
# Validate your tokens
cssmark validate ./tokens/**/*.css4. Use in your CSS
Import the generated variables.css and use your tokens:
.button {
background: var(--color-primary);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
font-family: var(--font-sans);
box-shadow: var(--shadow-sm);
}color.background
--color-bg
#ffffff
Primary background color for the main content area.
Usage examples
background: var(--color-bg)
--color-bg-secondary
#f8f9fa
Secondary background for sidebar, code blocks, and cards.
Usage examples
background: var(--color-bg-secondary)
color.brand
--color-accent
#6366f1
Legacy accent color. Use --color-primary instead.
--color-primary
--color-primary
#0055ff
Primary brand color for interactive elements, links, and accents.
Usage examples
color: var(--color-primary)border-color: var(--color-primary)
--color-action--color-link
color.primitives
--color-navy-800
#2d2d44
Dark navy for dark-mode secondary backgrounds.
--color-blue-500
#0055ff
Core blue for interactive elements.
--color-blue-400
#66aaff
Lighter blue for dark-mode interactive elements.
--color-red-500
#dc3545
Red for error and danger states.
--color-gray-200
#e9ecef
Light gray for borders and dividers.
--color-white
#ffffff
Pure white primitive.
--color-gray-500
#6c757d
Mid gray for secondary text.
--color-gray-50
#f8f9fa
Lightest gray for subtle backgrounds.
--color-navy-900
#1a1a2e
Deep navy for primary text.
--color-yellow-500
#ffc107
Yellow for warnings and caution states.
color.semantic
--color-danger
#dc3545
Danger/error color for destructive actions and error states.
Usage examples
color: var(--color-danger)
--color-warning
#ffc107
Warning color for deprecation notices and caution states.
Usage examples
background: var(--color-warning)
--color-border
#e9ecef
Default border color for cards, dividers, and inputs.
Usage examples
border: 1px solid var(--color-border)
color.text
--color-text-muted
#6c757d
Muted text color for secondary content, captions, and metadata.
Usage examples
color: var(--color-text-muted)
--color-text
#1a1a2e
Primary text color for body content.
Usage examples
color: var(--color-text)
effects
--shadow-sm
Subtle shadow for cards and elevated elements.
Usage examples
box-shadow: var(--shadow-sm)
layout
--sidebar-width
280px
Width of the sidebar navigation.
Usage examples
width: var(--sidebar-width)
--swatch-size
24px
Size of color swatch indicators.
Usage examples
width: var(--swatch-size)height: var(--swatch-size)
--content-max-width
1200px
Maximum width of the main content area.
Usage examples
max-width: var(--content-max-width)
--card-min-width
320px
Minimum width for token cards in the grid.
Usage examples
grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr))
radius
--radius-full
999px
Full border radius for pills and circular elements.
Usage examples
border-radius: var(--radius-full)
--radius-lg
8px
Large border radius for cards and containers.
Usage examples
border-radius: var(--radius-lg)
--radius-sm
2px
Small border radius for inline code and subtle rounding.
Usage examples
border-radius: var(--radius-sm)
--radius-md
4px
Medium border radius for badges and buttons.
Usage examples
border-radius: var(--radius-md)
spacing
--space-3
0.5rem
Small spacing for compact layouts.
Usage examples
padding: var(--space-3)gap: var(--space-3)
--space-9
3rem
Extra large spacing for category separations.
Usage examples
margin-bottom: var(--space-9)padding: var(--space-9)
--space-2
0.25rem
Extra small spacing for inline elements.
Usage examples
padding: var(--space-2)margin-top: var(--space-2)
--space-7
1.5rem
Medium-large spacing for section gaps.
Usage examples
gap: var(--space-7)margin-bottom: var(--space-7)
--space-6
1.25rem
Medium spacing for card padding.
Usage examples
padding: var(--space-6)
--space-1
0.125rem
Minimal spacing for tight padding.
Usage examples
padding: var(--space-1)
--space-8
2rem
Large spacing for major sections.
Usage examples
padding: var(--space-8)margin-bottom: var(--space-8)
--space-4
0.75rem
Medium-small spacing for card content.
Usage examples
padding: var(--space-4)margin-bottom: var(--space-4)
--space-5
1rem
Base spacing unit.
Usage examples
padding: var(--space-5)gap: var(--space-5)
typography.family
--font-sans
Primary sans-serif font stack for body text and UI.
Usage examples
font-family: var(--font-sans)
--font-mono
Monospace font stack for code, token names, and technical content.
Usage examples
font-family: var(--font-mono)
typography.lineHeight
--line-height-base
1.6
Base line height for body text.
Usage examples
line-height: var(--line-height-base)
typography.size
--font-size-base
1rem
Base text size for body content.
Usage examples
font-size: var(--font-size-base)
--font-size-lg
1.25rem
Large text for sidebar headings.
Usage examples
font-size: var(--font-size-lg)
--font-size-xl
1.5rem
Extra large text for section headings.
Usage examples
font-size: var(--font-size-xl)
--font-size-xs
0.75rem
Extra small text for metadata and fine print.
Usage examples
font-size: var(--font-size-xs)
--font-size-sm
0.875rem
Small text for descriptions and secondary content.
Usage examples
font-size: var(--font-size-sm)