Colors

Typography

Heading 1 (--fs-2xl)

Heading 2 (--fs-xl)

Heading 3 (--fs-lg)

Body text using the default font size. This is --fs-base which scales responsively based on viewport width.

Small text (--fs-sm) for metadata and captions.

Badges

• Default
• Design
• Code
• Photography

Buttons & Navigation

Standard link with default styling.

◀ ▶ Navigation arrows

Toggle Switch

Syntax Highlighting (Prism)

Code blocks with syntax highlighting. Prism.js applies highlighting at runtime:

                    const greeting = "Hello, World!";

                function sayHello(name) {
                return `Hello, ${name}!`;
                }

                console.log(sayHello("Design System"));

Code Runner

Interactive code execution with syntax highlighting:

                def fibonacci(n):
                    a, b = 0, 1
                    for _ in range(n):
                        print(a, end=' ')
                        a, b = b, a + b

                fibonacci(10)

                const numbers = [1, 2, 3, 4, 5];
                const doubled = numbers.map(n => n * 2);
                console.log("Doubled:", doubled);

Video Player (Plyr)

Video component with Plyr integration. Add .video class to auto-initialize:

Timeline

Cards

Quick Menu

Spacing Scale

--sp-xs, --sp-sm, --sp-md, --sp-lg, --sp-xl

Utility Classes

• .container — centered max-width wrapper
• .container.narrow — narrower variant
• .fade-in — opacity transition on scroll
• .legend — overlay label for images
• .mobile-hide / .mobile-show — responsive visibility