shahareja.dev

Design System v1

Design System

Token-first, class-free.

Generated from Bricks Builder JSON exports — 380 palette entries, 978 variables, fluid clamp scale across 360–1440px, 10px root. Every element on this page is native HTML styled with semantic tokens. Zero authored classes.

380 palette 978 variables clamp scale 10px root 0 classes

Color Palette

11 root families from the Bricks palette export. Each shows the base color, then light (l-1→l-9) and dark (d-1→d-9) steps. Transparent variants (t-1→t-9) are alpha-based. In dark mode, --black flips to white and step direction inverts for the 5 dark-enabled families.

Root colors

Primary--primary
Secondary--secondary
Light--light
Dark--dark
Black--black
White--white
Muted--muted
Info--info
Success--success
Warning--warning
Danger--danger

Primary — light & dark steps

l-9--primary-l-9
l-6--primary-l-6
l-4--primary-l-4
l-2--primary-l-2
base--primary
d-2--primary-d-2
d-4--primary-d-4
d-6--primary-d-6
d-9--primary-d-9

Transparent overlays (alpha)

t-1 (10%)--primary-t-1
t-3 (30%)--primary-t-3
t-5 (50%)--primary-t-5
t-7 (70%)--primary-t-7
black-t-1--black-t-1
black-t-5--black-t-5
black-t-9--black-t-9

Semantic aliases

Background--background
Foreground--foreground
Surface--surface
Card--card
Border--border-color
Caption--caption
Selection--selection
Accent--accent

Typography

Inter at 400 body weight, 1.65 line-height. Headings use text-wrap: balance, body uses text-wrap: pretty. All sizes are fluid via clamp(min, ratio, max) across the 360–1440px viewport range with a 10px root.

Heading scale

--h1

The quick brown fox

--h2

The quick brown fox jumps

--h3

The quick brown fox jumps over

--h4

The quick brown fox jumps over the lazy

--h5
The quick brown fox jumps over the lazy dog
--h6
The quick brown fox jumps over the lazy dog and runs

Text scale (fluid clamp)

--text-28

Large lead paragraph at 2.8rem fluid

--text-24

Subheading at 2.4rem fluid

--text-20

Emphasized body at 2rem fluid

--text-18

Slightly larger body at 1.8rem

--text-16

Default body at 1.6rem

--text-14

Small text at 1.4rem

--text-12

Caption text at 1.2rem

--text-10

Micro text at 1rem

Spacing Scale

Fluid --space-* tokens map to --scale-* via clamp. Resize the browser to see them scale between 360px and 1440px.

Space tokens

  • --space-40.4rem
  • --space-80.8rem
  • --space-101rem
  • --space-121.2rem
  • --space-161.6rem
  • --space-202rem
  • --space-242.4rem
  • --space-323.2rem
  • --space-404rem
  • --space-484.8rem
  • --space-646.4rem
  • --space-808rem
  • --space-969.6rem
  • --space-12812.8rem

Layout spacing

  • --section-gap5.6rem
  • --grid-gap2.4rem
  • --gutter3vw
  • --paragraph-spacing2.4rem
  • --content-width1280px

Border Radius

Radius tokens map to --scale-* values, fully fluid.

Radius scale

  1. --radius-0
  2. --radius-2
  3. --radius-4
  4. --radius-6
  5. --radius-8
  6. --radius-10
  7. --radius-12
  8. --radius-16
  9. --radius-20
  10. --radius-24
  11. --radius-32
  12. --radius-full

Elevation

Five shadow tiers built from --black-t-1 alpha overlays. In dark mode, --black flips to white so shadows become light overlays automatically.

Shadow scale

Shadows
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-5

Buttons

9 color variants × solid/outline × 4 sizes. Styled via [data-variant], [data-style], and [data-size] attribute selectors — zero authored classes. All are native <button> elements. Navigation links use <a role="button">.

Solid variants

Outline variants

Sizes (primary solid)

Forms

Native form controls styled through element selectors. Focus rings use --focus-outline-width and --focus-outline-color with safe fallbacks (2px and var(--primary)) per the approval register.

Prose Elements

Native content elements styled through the base + component layers.

Links & emphasis

This is a paragraph with a text link that uses --link-color, and here is strong text and emphasized text. You can also use highlighted text via the <mark> element.

Blockquote

The best way to predict the future is to invent it. The design system is not the stylesheet; it's the decisions that produce it.

— Alan Kay (paraphrased)

Lists

Unordered

  • First item in the list
  • Second item with more detail
  • Third item to show spacing

Ordered

  1. Capture reference
  2. Decompose into sections
  3. Map to existing tokens
  4. Build with semantic elements

Code

Inline code uses a monospace stack. Block code can use <pre>:

:root {
  --primary: #09a2f9;
  --scale-16: clamp(1.3rem, calc(0.0028 * (100vw - 36rem) + 1.3rem), 1.6rem);
}

Figure & caption

Gradient using --primary to --secondary — caption uses --caption color.

Horizontal rule