Style Guide

Complete design system documentation with live examples, interactive demos, and comprehensive reference for 200+ design tokens, components, and patterns.

Grant.is Design System

Complete style guide and design tokens for Grant.is - a photography and writing website built with Hugo, following a “forever blog” philosophy with minimal dependencies, web standards over frameworks, and built to last decades.

Design Principles

Minimal dependencies: Web standards over frameworks
Performance-first: Core Web Vitals optimized
Accessibility: WCAG 2.1 AA compliant
Progressive enhancement: Works without JavaScript
Custom everything: Full control over code
Built to last: Designed for decades of use

Color Tokens

All colors are WCAG 2.2 AA+ compliant with tested contrast ratios.

Primary Palette

--color-primary-50

--color-primary-100

--color-primary-150

--color-primary-200

--color-primary-250

--color-primary-300

--color-primary-350

--color-primary-400

--color-primary-450

--color-primary-500

--color-primary-550

--color-primary-600

--color-primary-650

--color-primary-700

--color-primary-750

--color-primary-800

--color-primary-850

--color-primary-900

--color-primary-950

Secondary Palette

--color-secondary-50

--color-secondary-100

--color-secondary-150

--color-secondary-200

--color-secondary-250

--color-secondary-300

--color-secondary-350

--color-secondary-400

--color-secondary-450

--color-secondary-500

--color-secondary-550

--color-secondary-600

--color-secondary-650

--color-secondary-700

--color-secondary-750

--color-secondary-800

--color-secondary-850

--color-secondary-900

--color-secondary-950

Semantic Colors

--color-success WCAG AA compliant

--color-warning WCAG AA compliant

--color-error WCAG AA compliant

--color-info WCAG AA compliant

Neutral Colors

--color-white

--color-black

--color-gray-50

--color-gray-100

--color-gray-200

--color-gray-300

--color-gray-400

--color-gray-500

--color-gray-600

--color-gray-700

--color-gray-800

--color-gray-900

Text Colors

--color-text-primary

--color-text-secondary

--color-text-muted

--color-text-inverse

Link Colors

--color-link

--color-link-hover

--color-link-visited

Background Colors

--color-bg-primary

--color-bg-secondary

--color-bg-tertiary

Border Colors

--color-border

--color-border-hover

--color-border-focus

Typography

Fluid typography using clamp() for responsive scaling.

Font Families

Sans Serif: The quick brown fox jumps over the lazy dog

--font-sans

Serif: The quick brown fox jumps over the lazy dog

--font-serif

Monospace: The quick brown fox jumps over the lazy dog

--font-mono

Type Scale

--text-xs

--text-sm

BASE

--text-base

--text-lg

--text-xl

2XL

--text-2xl

3XL

--text-3xl

4XL

--text-4xl

5XL

--text-5xl

Font Weights

Thin

--font-thin

Light

--font-light

Normal

--font-normal

Medium

--font-medium

Semibold

--font-semibold

Bold

--font-bold

Extrabold

--font-extrabold

Black

--font-black

Line Heights

None: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-none

Tight: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-tight

Snug: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-snug

Normal: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-normal

Relaxed: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-relaxed

Loose: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--leading-loose

Heading Examples

Heading 1: The quick brown fox

Heading 2: The quick brown fox

Heading 3: The quick brown fox

Heading 4: The quick brown fox

Heading 5: The quick brown fox

Heading 6: The quick brown fox

Spacing Scale

Consistent spacing scale based on rem units.

Base Scale

--space-0

--space-0-5

--space-1

--space-1-5

--space-2

--space-2-5

--space-3

--space-3-5

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

--space-10

--space-12

--space-16

--space-20

--space-24

--space-32

--space-40

--space-48

--space-64

--space-80

--space-96

Semantic Spacing

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

--space-3xl

--space-4xl

--space-5xl

Components

Buttons

<button class="btn">Default Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn" disabled>Disabled Button</button>

Links

Focus me with Tab key

Regular link

Visited link

External link →

<a href="#">Regular link</a>
<a href="#" class="visited-link">Visited link</a>
<a href="#" class="external-link">External link</a>
<a href="#" class="demo-hover">Hover me</a>
<a href="#" class="demo-focus">Focus me with Tab key</a>

Forms

Code Blocks

Inline code: const example = "code";

// Block code
function example() {
  console.log("Hello, World!");
  return true;
}

Blockquote

This is a blockquote. It can contain multiple paragraphs and represents quoted text from another source.
— Author Name

Lists

Unordered List

First item
Second item
Third item
- Nested item 1
- Nested item 2

Ordered List

First item
Second item
Third item
1. Nested item 1
2. Nested item 2

Tables

Header 1	Header 2	Header 3
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3
Row 3, Col 1	Row 3, Col 2	Row 3, Col 3

Accessibility

WCAG 2.1 AA compliant design system.

Contrast Ratios

Focus States

Focus me with Tab key

Screen Reader Support

Reduced Motion

All animations respect prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Usage Guidelines

CSS Architecture

This design system uses CSS Cascade Layers for predictable specificity:

@layer foundation, base, layout, components, utilities, overrides;

foundation - Design tokens, resets, and normalization
base - Base HTML element styles
layout - Page structure and grid systems
components - Reusable UI components
utilities - Helper classes
overrides - Final overrides (use sparingly)

Token Usage

Always use design tokens instead of hard-coded values:

✅ Good

.element {
  color: var(--color-text-primary);
  padding: var(--space-4);
  font-size: var(--text-lg);
}

❌ Bad

.element {
  color: #111827;
  padding: 1rem;
  font-size: 1.125rem;
}

Responsive Design

Typography uses fluid scaling with clamp(), but use breakpoints for layout:

/* Mobile-first approach */
.container {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--space-12);
  }
}

Grant.is Design System

Design Principles

Color Tokens

Primary Palette

Secondary Palette

Semantic Colors

Neutral Colors

Text Colors

Link Colors

Background Colors

Border Colors

Typography

Font Families

Type Scale

Font Weights

Line Heights

Heading Examples

Heading 1: The quick brown fox

Heading 2: The quick brown fox

Heading 3: The quick brown fox

Heading 4: The quick brown fox

Heading 5: The quick brown fox

Heading 6: The quick brown fox

Spacing Scale

Base Scale

Semantic Spacing

Components

Buttons

Links

Forms

Code Blocks

Blockquote

Lists

Unordered List

Ordered List

Tables

Accessibility

Contrast Ratios

Text on White Background

Links

Semantic Colors

Focus States

Screen Reader Support

Reduced Motion

Usage Guidelines

CSS Architecture

Token Usage

✅ Good

❌ Bad

Responsive Design