Style Guide

Open source

A living design-token style guide — documents colour, typography, radius, spacing, elevation, motion and numeric tokens (plus WCAG contrast grades) using the token components, all driven by real semantic tokens so it re-themes with your app.

Add to page builder

Responsive Dark mode RTL Localized SEO

resources/views/blocks/style-guide.blade.php Blade

{{--
    Style Guide 01 — a living design-token reference (tokenui.dev-inspired).

    Documents the system's own tokens with the token-documentation components:
    colour swatches, type scale, radius/spacing/elevation/motion and numeric
    tokens, plus WCAG contrast grades. Every value is a real semantic token
    (`hsl(var(--…))`, `var(--radius-…)`, `var(--shadow-…)`), so this guide
    re-themes automatically with the rest of the app.
--}}
<x-ui.section data-slot="style-guide" space="lg" class="w-full">
    <div class="mx-auto max-w-5xl px-4 sm:px-6">
        <header class="mb-8 max-w-2xl">
            <p class="text-base font-medium text-primary">{{ __('Design system') }}</p>
            <h2 class="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">{{ __('Token reference') }}</h2>
            <p class="mt-4 text-muted-foreground">{{ __('A living style guide. Every value below is a real design token — hover any chip to reveal its value and click to copy. Change the theme and this whole guide follows.') }}</p>
        </header>

        <div class="grid gap-6 lg:grid-cols-2">
            {{-- Colour ------------------------------------------------------ --}}
            <x-ui.card class="p-6 lg:col-span-2">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Colour') }}</h3>
                    <x-ui.badge>{{ __('Semantic') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <x-ui.color-palette
                    :label="__('Brand & semantic')"
                    :columns="3"
                    :colors="[
                        ['name' => 'primary', 'value' => 'var(--primary-color, hsl(var(--primary)))'],
                        ['name' => 'secondary', 'value' => 'var(--secondary-color, hsl(var(--secondary)))'],
                        ['name' => 'accent', 'value' => 'var(--accent-color, hsl(var(--accent)))'],
                        ['name' => 'muted', 'value' => 'var(--muted-color, hsl(var(--muted)))'],
                        ['name' => 'success', 'value' => 'var(--success-color, hsl(var(--success)))'],
                        ['name' => 'destructive', 'value' => 'var(--destructive-color, hsl(var(--destructive)))'],
                    ]"
                />

                <div class="mt-4 flex flex-wrap items-center gap-2">
                    <x-ui.color-token name="background" value="var(--background-color, hsl(var(--background)))" />
                    <x-ui.color-token name="foreground" value="var(--foreground-color, hsl(var(--foreground)))" />
                    <x-ui.color-token name="border" value="var(--border-color, hsl(var(--border)))" />
                    <x-ui.color-token name="ring" value="var(--ring-color, hsl(var(--ring)))" />
                    <x-ui.color-token name="warning" value="var(--warning-color, hsl(var(--warning)))" />
                </div>
            </x-ui.card>

            {{-- Contrast ---------------------------------------------------- --}}
            <x-ui.card class="p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Contrast') }}</h3>
                    <x-ui.badge>{{ __('WCAG 2.0') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-col items-start gap-2">
                    <x-ui.color-contrast :ratio="16.1" passes="AAA" :label="__('Foreground / Background')" />
                    <x-ui.color-contrast :ratio="8.4" passes="AAA" :label="__('On primary')" />
                    <x-ui.color-contrast :ratio="4.7" passes="AA" :label="__('Muted foreground')" />
                    <x-ui.color-contrast :ratio="2.1" passes="fail" :label="__('Border on surface')" />
                </div>
            </x-ui.card>

            {{-- Typography -------------------------------------------------- --}}
            <x-ui.card class="p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Typography') }}</h3>
                    <x-ui.badge>{{ __('Scale') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.typography-token name="text-base" value="0.75rem" />
                    <x-ui.typography-token name="text-base" value="0.875rem" />
                    <x-ui.typography-token name="text-base" value="1rem" />
                    <x-ui.typography-token name="text-base" value="1.125rem" />
                    <x-ui.typography-token name="text-xl" value="1.25rem" />
                </div>

                <div class="mt-4 flex flex-wrap items-center gap-2">
                    <x-ui.font-weight-token name="normal" value="400" />
                    <x-ui.font-weight-token name="medium" value="500" />
                    <x-ui.font-weight-token name="semibold" value="600" />
                    <x-ui.font-weight-token name="bold" value="700" />
                    <x-ui.font-family-token name="sans" value="ui-sans-serif, system-ui, sans-serif" />
                </div>
            </x-ui.card>

            {{-- Radius ------------------------------------------------------ --}}
            <x-ui.card class="p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Radius') }}</h3>
                    <x-ui.badge>{{ __('Shape') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.radius-token name="radius-sm" value="var(--radius-sm)" />
                    <x-ui.radius-token name="radius-md" value="var(--radius-md)" />
                    <x-ui.radius-token name="radius-lg" value="var(--radius-lg)" />
                    <x-ui.radius-token name="radius-xl" value="var(--radius-xl)" />
                    <x-ui.radius-token name="radius-full" value="9999px" />
                </div>
            </x-ui.card>

            {{-- Spacing ----------------------------------------------------- --}}
            <x-ui.card class="p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Spacing') }}</h3>
                    <x-ui.badge>{{ __('Rhythm') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.spacing-token name="space-1" value="0.25rem" />
                    <x-ui.spacing-token name="space-2" value="0.5rem" />
                    <x-ui.spacing-token name="space-4" value="1rem" />
                    <x-ui.spacing-token name="space-6" value="1.5rem" />
                    <x-ui.spacing-token name="space-8" value="2rem" />
                </div>
            </x-ui.card>

            {{-- Elevation --------------------------------------------------- --}}
            <x-ui.card class="p-6">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Elevation') }}</h3>
                    <x-ui.badge>{{ __('Depth') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-wrap items-center gap-4">
                    <x-ui.elevation-token name="shadow-xs" value="var(--shadow-xs)" />
                    <x-ui.elevation-token name="shadow-sm" value="var(--shadow-sm)" />
                    <x-ui.elevation-token name="shadow-md" value="var(--shadow-md)" />
                    <x-ui.elevation-token name="shadow-lg" value="var(--shadow-lg)" />
                </div>
            </x-ui.card>

            {{-- Motion, numbers & order ------------------------------------- --}}
            <x-ui.card class="p-6 lg:col-span-2">
                <div class="flex items-center justify-between gap-4">
                    <h3 class="text-base font-semibold">{{ __('Motion, numbers & order') }}</h3>
                    <x-ui.badge>{{ __('Scalars') }}</x-ui.badge>
                </div>
                <x-ui.separator class="my-4" />

                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.duration-token name="duration-fast" value="120ms" />
                    <x-ui.duration-token name="duration-base" value="180ms" />
                    <x-ui.duration-token name="duration-slow" value="240ms" />
                    <x-ui.number-token name="leading-normal" value="1.5" />
                    <x-ui.number-token name="opacity-disabled" value="0.5" />
                    <x-ui.order-token name="z-dropdown" value="1000" />
                    <x-ui.order-token name="z-modal" value="1300" />
                    <x-ui.order-token name="z-tooltip" value="1600" />
                </div>
            </x-ui.card>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/style-guide

Installs these dependencies automatically:

badge card color-contrast color-palette color-token duration-token elevation-token font-family-token font-weight-token number-token order-token radius-token section separator spacing-token typography-token

Registry contract

Install confidence

php artisan ui:add blocks/style-guide writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.6
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/style-guide.blade.php

Registry dependencies

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

style-guide.md

# Brok UI block: Style Guide (`style-guide`)

A living design-token style guide — documents colour, typography, radius, spacing, elevation, motion and numeric tokens (plus WCAG contrast grades) using the token components, all driven by real semantic tokens so it re-themes with your app.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/style-guide
```

## Render it

```blade
<x-blocks.style-guide />
```

## Use when

- Documenting a project's design tokens (colour, typography, radius, spacing, elevation, motion) on a living style-guide page.
- Publishing internal or public documentation of the token system that stays accurate as tokens change.

## Avoid when

- Letting a visitor pick and preview a whole theme rather than read individual token values; use themes-gallery instead.

## Rules

- Render the installed block with `<x-blocks.style-guide />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/style-guide
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/style-guide.json

Ask about Style Guide in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Documenting a project's design tokens (colour, typography, radius, spacing, elevation, motion) on a living style-guide page.
Publishing internal or public documentation of the token system that stays accurate as tokens change.

Avoid when

Letting a visitor pick and preview a whole theme rather than read individual token values; use themes-gallery instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: root style-guide

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.style-guide />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.