Design System Documentation

FOUNDATION Design principles Reusable, consistent, and easy to extend

This stylesheet is organized around design tokens first, then shared layout primitives, then components. That makes it easier to keep visual language consistent while adding new pages.

Use tokens for values, components for repeated patterns, and utilities for one-off layout adjustments.

TOKENS Foundations Color, spacing, type, and shape

Token Group	Examples	Purpose
Color	`--color-bg`, `--color-surface`, `--color-info`	Builds a consistent visual palette
Typography	`--font-sans`, `--font-mono`, `--text-sm`	Controls readability and hierarchy
Spacing	`--space-4`, `--space-10`, `--space-14`	Standardizes rhythm and layout density
Shape / Depth	`--radius-md`, `--radius-xl`, `--shadow-sm`	Defines component feel and elevation

BLOCKS Composable UI blocks Built from tokens, not hard-coded values

A block is a repeated page pattern such as a card, header, nav, table panel, or alert. Build the structure first, then apply the block class names.

How to create a block

Wrap the content in a semantic container such as <section> or <div>.
Add the block class, for example .doc-card or .surface.
Add a header row when the block needs a title, method badge, or path label.
Place the body content inside a content wrapper such as .doc-card-body.
Use utility classes like .stack or .two-column for spacing and layout inside the block.

Common block classes

Class	Use
`.doc-card`	Main container with border, radius, and shadow
`.doc-card-header`	Top row for title, label, and badge
`.doc-card-body`	Padded body area with vertical spacing
`.surface`	Generic white panel with border and shadow
`.stack`	Vertical spacing utility between children
`.two-column`	Two-column layout for side-by-side content

Block	Class / Pattern	Use
Site header	`.site-header`	Top page branding and summary
Navigation	`.site-nav`	Page links and section anchors
Content card	`.doc-card`	Primary panel container
Card header	`.doc-card-header`	Title, path, and badge row
Code block	`.code-block`	Formatted examples and responses
Callout	`.callout`	Notes and usage guidance

ALERTS Feedback blocks Use variants to match the message type

Alerts are small status blocks used for guidance, warnings, and success messages. Use a base .alert class plus a variant class.

Base markup

<div class="alert alert--info">
  <strong class="alert__title">Info</strong>
  <p>Explain the rule or give a helpful hint.</p>
</div>

Variants

Class	When to use
`.alert--info`	Neutral guidance or extra context
`.alert--success`	Completed actions or positive confirmation
`.alert--warning`	Important cautions or conditional behavior
`.alert--danger`	Errors, failures, or destructive actions

Info

Use this variant when the message helps the user understand the page or next step.

Warning

Use this variant for cautions, dependencies, or anything that needs attention.

CLASSES What classes are used where Quick reference for the shared stylesheet

Class	Used on	Purpose
`.app-shell`	`body`	Sets the base background and font family
`.site-header`	`header`	Page branding strip
`.base-url`	Header badge	Small label for shared or environment text
`.site-nav`	`nav`	Top navigation bar
`.content-shell`	`main`	Centered content column with page padding
`.stack`	Containers	Vertical spacing between child elements
`.doc-card`	`section`	Main panel wrapper
`.doc-card-header`	Card header	Badge, path, and title row
`.doc-card-body`	Card body	Padded content area inside cards
`.method`	Badge span	Shared badge styling
`.GET`, `.POST`, `.PUT`, `.PATCH`, `.DELETE`	Badge span	Color variants for labels
`.endpoint-path`	Title text	Monospace path or short identifier
`.endpoint-title`	Title text	Muted supporting description
`.data-table`	`table`	Standard documentation table styling
`.code-block`	`pre`	Dark code sample container
`.two-column`	Layout wrapper	Side-by-side content layout
`.callout`	Informational block	Highlighted guidance note
`.alert`	Feedback block	Base alert container for variants
`.alert__title`	Alert title	Uppercase alert heading
`.alert--info`, `.alert--success`, `.alert--warning`, `.alert--danger`	Alert variants	Status-specific color treatment

EXAMPLES Markup patterns How to compose the system

Card structure

<section class="doc-card">
  <div class="doc-card-header">
    <span class="http-method GET">GET</span>
    <span class="doc-code-path">/resource</span>
    <span class="doc-card-title">List resources</span>
  </div>
  <div class="doc-card-body stack">
    <p class="doc-card-description">Description...</p>
  </div>
</section>

Token usage

color: var(--color-surface);
padding: var(--space-10);
border-radius: var(--radius-xl);
font-size: var(--text-md);
box-shadow: var(--shadow-sm);

Prefer a token when the value appears in more than one place. Prefer a component when the same structure repeats.

Stylesheet link

<link rel="stylesheet" href="https://cdn.magicrunez.com/styles.css" />