Design System Usage Demo

BLOCKS Class and block reference How the shared classes fit together

This block shows the class names used by the system and the job each one does.

Structure example

<div class="two-column">
  <div>
    <h3>Structure example</h3>
    <pre class="code-block"><section class="doc-card">
  <div class="doc-card-header">
    <span class="method GET">GET</span>
    <span class="endpoint-path">/resource</span>
    <span class="endpoint-title">List resources</span>
  </div>
  <div class="doc-card-body stack">
    <p class="doc-card-description">Description...</p>
  </div>

  <div class="two-column">
    <div>
      <h3>Structure example</h3>
      <pre class="code-block">
      Example Code
      </pre>
    </div>
    <div>
      <h3>Class reference</h3>
      <table class="data-table">
        <tr><th>Header</th><th>Head 2</th></tr>
        <tr><td>Col-1<</td><td>Col 2</td></tr>
        <tr><td>Col-1<</td><td>Col 2</td></tr>
      </table>
    </div>
  </div>  

</section>

Class reference

Class	Use
`.app-shell`	Page background and base typography
`.site-header`	Top branding strip
`.site-nav`	Navigation row
`.content-shell`	Centered page container
`.doc-card`	Main panel container
`.doc-card-header`	Badge, path, and title row
`.doc-card-body`	Card body spacing
`.method`	HTTP badge styling
`.endpoint-path`	Monospace path label
`.endpoint-title`	Muted supporting title
`.data-table`	Table styling
`.code-block`	Code sample styling
`.stack`	Vertical spacing utility
`.two-column`	Two-column layout utility
`.callout`	Highlight note block

Use tokens for values, blocks for repeated page sections, and utilities for layout adjustments.

GET /api/v1/resources What a styled endpoint looks like

This block demonstrates how a real API endpoint is presented when the shared classes are applied.

Endpoint request

GET /api/v1/resources
Accept: application/json
X-Tenant-ID: 8f3f1c6b-88b0-4d0b-a1c3-2b8baf0e8f1f

Example response

// 200 OK
{
  "items": [
    { "id": 1, "name": "Alpha" },
    { "id": 2, "name": "Beta" }
  ]
}

ⓘ The same card structure works for every endpoint. Swap the method badge, path, and body content.

EXAMPLES Shared stylesheet usage Drop the stylesheet into any page

Stylesheet link

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

Script tag

<script src="https://cdn.magicrunez.com/app.js" defer></script>

The live docs page should be about the design system itself, not a single backend service.