Getting Started `{CDN usage}`

Use this design system in any project by adding these tags to your HTML

<!-- CSS — add to <head> -->
<link rel="stylesheet" href="https://starter-project-ds.netlify.app/css/reset.css">
<link rel="stylesheet" href="https://starter-project-ds.netlify.app/css/tokens.css">
<link rel="stylesheet" href="https://starter-project-ds.netlify.app/css/components.css">

<!-- JS — add before </body> -->
<script src="https://starter-project-ds.netlify.app/js/main.js"></script>

<!-- Icons — individual SVG (fixed at 24px) -->
<img src="https://starter-project-ds.netlify.app/icons/heart.svg" alt="heart">

<!-- Icons — SVG sprite (any size via width/height) -->
<!-- main.js auto-injects the sprite, so use local #id refs -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2">
  <use href="#heart"></use>
</svg>

<!-- Change width/height to render at any size (16, 20, 24, 32, 40, 48) -->
<svg width="16" height="16" viewBox="0 0 24 24" ...>...</svg>
<svg width="32" height="32" viewBox="0 0 24 24" ...>...</svg>
<svg width="48" height="48" viewBox="0 0 24 24" ...>...</svg>

A full starter template is available at /starter/index.html.

Color Tokens `{tokens.css}`

Design system color variables — adapts to light and dark mode

Background — Default

Default--bg-default

Default Hover--bg-default-hover

Secondary--bg-secondary

Secondary Hover--bg-secondary-hover

Tertiary--bg-default-tertiary

Tertiary Hover--bg-default-tertiary-hover

Background — Neutral

Default--bg-neutral

Hover--bg-neutral-hover

Secondary--bg-neutral-secondary

Secondary Hover--bg-neutral-secondary-hover

Tertiary--bg-neutral-tertiary

Tertiary Hover--bg-neutral-tertiary-hover

Background — Brand

Default--bg-brand

Hover--bg-brand-hover

Secondary--bg-brand-secondary

Secondary Hover--bg-brand-secondary-hover

Tertiary--bg-brand-tertiary

Tertiary Hover--bg-brand-tertiary-hover

Background — Positive

Default--bg-positive

Hover--bg-positive-hover

Secondary--bg-positive-secondary

Secondary Hover--bg-positive-secondary-hover

Tertiary--bg-positive-tertiary

Tertiary Hover--bg-positive-tertiary-hover

Background — Warning

Default--bg-warning

Hover--bg-warning-hover

Secondary--bg-warning-secondary

Secondary Hover--bg-warning-secondary-hover

Tertiary--bg-warning-tertiary

Tertiary Hover--bg-warning-tertiary-hover

Background — Danger

Default--bg-danger

Hover--bg-danger-hover

Secondary--bg-danger-secondary

Secondary Hover--bg-danger-secondary-hover

Tertiary--bg-danger-tertiary

Tertiary Hover--bg-danger-tertiary-hover

Background — Disabled & Utilities

Disabled--bg-disabled

Scrim--bg-scrim

Blanket--bg-blanket

Overlay--bg-overlay

Measurement--bg-measurement

Text — Default

Default--text-default

Secondary--text-secondary

Tertiary--text-tertiary

Text — Neutral

Default--text-neutral

Secondary--text-neutral-secondary

Tertiary--text-neutral-tertiary

On Neutral--text-on-neutral

On Neutral 2nd--text-on-neutral-secondary

On Neutral 3rd--text-on-neutral-tertiary

Text — Brand

Default--text-brand

Secondary--text-brand-secondary

Tertiary--text-brand-tertiary

On Brand--text-on-brand

On Brand 2nd--text-on-brand-secondary

On Brand 3rd--text-on-brand-tertiary

Text — Positive / Warning / Danger

Positive--text-positive

Positive 2nd--text-positive-secondary

Warning--text-warning

Warning 2nd--text-warning-secondary

Danger--text-danger

Danger 2nd--text-danger-secondary

Text — Disabled & Utilities

Disabled--text-disabled

On Disabled--text-on-disabled

On Overlay--text-on-overlay

Border — Default / Neutral / Brand

Default--border-default

Default 2nd--border-default-secondary

Default 3rd--border-default-tertiary

Neutral--border-neutral

Brand--border-brand

Disabled--border-disabled

Border — Positive / Warning / Danger

Positive--border-positive

Positive 2nd--border-positive-secondary

Warning--border-warning

Warning 2nd--border-warning-secondary

Danger--border-danger

Danger 2nd--border-danger-secondary

Icon

Default--icon-default

Secondary--icon-secondary

Tertiary--icon-tertiary

Brand--icon-brand

Positive--icon-positive

Danger--icon-danger

Typography `{tokens.css}`

Font styles from the design system

Title Hero 72px / Bold / 1.2

Title Page 48px / Bold / 1.2

Subtitle 32px / Regular / 1.2

Heading 24px / Semi Bold / 1.2

Subheading 20px / Regular / 1.2

Body Base — The quick brown fox jumps over the lazy dog 16px / Regular / 1.4

Body Strong — The quick brown fox jumps over the lazy dog 16px / Semi Bold / 1.4

Body Emphasis — The quick brown fox jumps over the lazy dog 16px / Italic / 1.4

Body Link — The quick brown fox jumps over the lazy dog 16px / Regular / 1.4 / Underline

Body Small — The quick brown fox jumps over the lazy dog 14px / Regular / 1.4

Body Small Strong — The quick brown fox jumps over the lazy dog 14px / Semi Bold / 1.4

Body Code — const greeting = "Hello, world!"; 16px / Roboto Mono / 1.3

Single Line / Body Base 16px / Regular / 1.0

Single Line / Body Small Strong 14px / Semi Bold / 1.0

Spacing `{tokens.css}`

Consistent spacing scale used across all components

--space-050

2px

--space-100

4px

--space-150

6px

--space-200

8px

--space-300

12px

--space-400

16px

--space-600

24px

--space-800

32px

--space-1200

48px

--space-1600

64px

--space-2400

96px

--space-4000

160px

Border Radius `{tokens.css}`

Corner rounding values for components

0none

--radius-1004px

--radius-2008px

--radius-40016px

--radius-full9999px

Stroke `{tokens.css}`

Border and outline widths

--stroke-border1px

--stroke-focus-ring2px

Drop Shadows `{tokens.css}`

Elevation levels for layered surfaces

100 --shadow-100

200 --shadow-200

300 --shadow-300

400 --shadow-400

500 --shadow-500

600 --shadow-600

Inner Shadows `{tokens.css}`

Inset depth effects for recessed surfaces

100 --inner-shadow-100

200 --inner-shadow-200

300 --inner-shadow-300

400 --inner-shadow-400

500 --inner-shadow-500

600 --inner-shadow-600

Blur Effects `{tokens.css}`

Background and layer blur for overlays and glass surfaces

Abc

No blurreference

Abc

--blur-overlaybackdrop-filter: blur(4px)

Abc

--blur-layerfilter: blur(4px)

Abc

--blur-glassbackdrop-filter: blur(4px)

Hero Sections `{.ds-hero}`

Full-width hero banners with various content layouts

Title

Subtitle

Panel Sections `{.ds-panel}`

Content panels with image and text combinations

.ds-panel — image left, content right

Heading

Subheading

Body text for your whole article or post. We'll put in some lorem ipsum to show how a filled-out page might look.

Excepteur efficient emerging, minim veniam anim aute carefully curated Ginza conversation exquisite perfect nostrud nisi intricate Content.

.ds-panel — content left, image right (reversed order)

Heading

Subheading

Body text for your whole article or post. We'll put in some lorem ipsum to show how a filled-out page might look.

Excepteur efficient emerging, minim veniam anim aute carefully curated Ginza conversation exquisite perfect nostrud nisi intricate Content.

.ds-panel-double — two images side by side

Card Grid Sections `{.ds-card-grid}`

Grid layouts for pricing, features, content, and more

.ds-card-grid + .pricing-card — pricing tier layout

Monthly Yearly

Basic

$ 10 / mo

List item
List item
List item
List item
List item

Pro

$ 50 / mo

List item
List item
List item
List item
List item

Enterprise

$ 100 / mo

List item
List item
List item
List item
List item

.ds-card-grid + .card-icon — icon feature cards