Democratia Style Guide

Complete reference of all CSS components, layouts and patterns available in the design system.

Colors

All colors use oklch color space via CSS custom properties.

Core palette

--background

--foreground

--primary

--secondary

--muted

--accent

--destructive

--border

Chart colors

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

Sidebar colors

--sidebar

--sidebar-primary

--sidebar-accent

Typography

Font: Source Sans 3 (variable). Mono: JetBrains Mono (variable).

Headings

Heading 1 (2.25rem)

Heading 2 (1.875rem)

Heading 3 (1.5rem)

Heading 4 (1.25rem)

Heading 5 (1.125rem)

Heading 6 (1rem)

Text utilities

Lead paragraph - larger intro text for opening sections.

Large text - slightly bigger.

Regular paragraph text at default size.

Small text for metadata.

Muted text for secondary info.

<p class="lead">...</p>
<p class="large">...</p>
<p>...</p>
<p class="small">...</p>
<p class="muted">...</p>

Text colors

chart-1 chart-2 chart-3 chart-4 chart-5

Keyboard shortcut

Press Ctrl + K to search

<kbd>Ctrl</kbd> + <kbd>K</kbd>

Spacing & Radius

Border radius scale

base

pill

Common spacing values

0.25rem

0.5rem

0.75rem

1rem

1.5rem

2rem

3rem

Buttons

Button variants, sizes and states. Use .btn as base class.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-destructive">Destructive</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>

Chart color variants

Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-icon">...</button>

States

Button group

<div class="btn-group">
  <button class="btn btn-outline">Left</button>
  <button class="btn btn-outline">Center</button>
  <button class="btn btn-outline">Right</button>
</div>

Badges

Pill-shaped labels for status, categories and counts.

Variants

Primary Secondary Outline Destructive

<span class="badge">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-destructive">Destructive</span>

Chart colors

Chart 1 Chart 2 Chart 3 Chart 4 Chart 5

Badge row

Tag A Tag B Tag C

Cards

Container component with header, content and footer.

Card Title

Card description text.

Card content goes here.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Title</h3>
    <p class="card-description">...</p>
  </div>
  <div class="card-content">...</div>
  <div class="card-footer">...</div>
</div>

Card grid

Card One

Lorem ipsum dolor sit amet.

Card Two

Consectetur adipiscing elit.

Forms

Input fields, selects, checkboxes, radios, switches and sliders.

Text input

Email Enter your email address.

<div class="field">
  <label class="label">Email</label>
  <input type="email" class="input"
    placeholder="...">
  <span class="field-hint">...</span>
</div>

Input group

https://

Textarea

Select

Checkbox & Radio

Checkbox Radio A Radio B

Switch

Slider

Field with error

Name Minimum 3 characters.

Tables

Styled tables with hover states.

Name	Status	Role
Marcus	Active	Editor
Julia	Pending	Admin
Gaius	Inactive	Viewer

<table class="table">
  <thead><tr>
    <th>Name</th>
    <th>Status</th>
  </tr></thead>
  <tbody><tr>
    <td>Marcus</td>
    <td><span class="badge">...</span></td>
  </tr></tbody>
</table>

Alerts

Feedback messages and notices.

Note: Default alert message.

Error: Something went wrong.

Info: Chart color 1 alert.

Warning: Chart color 2 alert.

Success: Chart color 3 alert.

<div class="alert">...</div>
<div class="alert alert-destructive">...</div>
<div class="alert alert-chart-1">...</div>

Progress

Progress bar

<div class="progress"
  style="--progress: 65%;">
</div>

Progress list

Articuli 78%

Imagines 45%

Avatars

<div class="avatar">
  <span class="avatar-fallback">JD</span>
</div>
<div class="avatar">
  <img class="avatar-image" src="...">
</div>

Separators

Content above

Default separator

Medium separator

Large separator

<hr class="separator">
<hr class="separator separator-md">
<hr class="separator separator-lg">

Tooltips

<span class="tooltip"
  data-tip="Tooltip text">
  Hover me
</span>

Breadcrumb

<nav class="breadcrumb">
  <a href="#">Home</a>
  <a href="#">Category</a>
  <span>Current Page</span>
</nav>

Pagination

<div class="pagination">
  <button>...svg...</button>
  <button>1</button>
  <button aria-current="page">2</button>
  <button>3</button>
  <button>...svg...</button>
</div>

Tabs

<div class="tabs">
  <button aria-selected="true">Overview</button>
  <button>Details</button>
  <button>Settings</button>
</div>

Menubar

File Edit View Help

<div class="menubar">
  <a href="#" class="menubar-item">File</a>
  <a href="#" class="menubar-item">Edit</a>
</div>

Accordion

What is this?

An accordion component using native HTML details and summary elements.

How does it work?

Click the summary to toggle the content.

Is it accessible?

Yes, it uses native HTML semantics.

<div class="accordion">
  <details open>
    <summary>Question?</summary>
    <div><p>Answer.</p></div>
  </details>
</div>

Dropdown Menu

<div class="dropdown-menu">
  <button class="dropdown-item">Profile</button>
  <button class="dropdown-item">Settings</button>
  <hr class="separator">
  <button class="dropdown-item">Log out</button>
</div>

Toggle

<button class="toggle"
  aria-pressed="true">B</button>
<div class="toggle-group">
  <button class="toggle">Left</button>
  ...
</div>

Prose

Rich text container with typographic defaults.

Article Title

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

First item in list
Second item in list
Third item in list

A blockquote inside prose.

Code inline: var x = 42;

<div class="prose">
  <h3>Title</h3>
  <p>...</p>
  <ul><li>...</li></ul>
  <blockquote>...</blockquote>
</div>

Blockquotes

Standard blockquote

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.

Pull quote

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

<blockquote class="blockquote">...</blockquote>
<div class="pull-quote">...</div>

Definition List

Term one: Definition of the first term with details.
Term two: Definition of the second term.
Term three: Definition of the third term with more details.

<dl class="def-list">
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Code Block
            javascript
          
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));
<div class="code-block">
  <div class="code-block-header">
    javascript
  </div>
  <pre><code>...</code></pre>
</div>
      

Checklist

Completed task
Another done task
Pending task
Future task

<ul class="checklist">
  <li class="checked">Done</li>
  <li>Pending</li>
</ul>

Callout

Note: This is an informational callout with an icon.

<div class="callout">
  <div class="callout-icon">
    ...svg...
  </div>
  <div class="callout-content">
    ...
  </div>
</div>

Highlight Box
          Key takeaway:
          Lorem ipsum dolor sit amet,
          consectetur adipiscing elit.
          Sed do eiusmod tempor incididunt
          ut labore et dolore.
        
<div class="highlight-box">
  <strong>Key takeaway:</strong>
  ...
</div>
      

Two Columns

CSS columns layout for flowing text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

<div class="article-cols">
  <p>...</p>
  <p>...</p>
</div>

Inset Figure

Floated figure with caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

<figure class="figure article-inset">
  <img src="..." class="placeholder-img">
  <figcaption class="figure-caption">
    Caption
  </figcaption>
</figure>

Full Bleed

Full width section with background color.

<div class="full-bleed">
  <img src="..." class="placeholder-img">
  <p class="lead">...</p>
</div>

Stats Row

1,234

Users

567

Projects

89%

Uptime

24/7

Support

<div class="stats-row">
  <div>
    <div class="stat-number">1,234</div>
    <div class="stat-label">Users</div>
  </div>
</div>

Metric Cards

Revenue

$45,231

+12.5%

Users

2,350

+8.2%

Bounce

42%

-3.1%

<div class="metric-row">
  <div class="metric-card">
    <div class="metric-card-label">Revenue</div>
    <div class="metric-card-value">$45,231</div>
    <div class="metric-card-delta metric-up">+12.5%</div>
  </div>
</div>

Timeline

Jan 2024

Project started

Initial commit and setup.

Mar 2024

Beta release

First public beta.

Jun 2024

v1.0 Launch

Production ready.

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-date">Jan 2024</div>
    <div class="timeline-title">Event</div>
    <p>Details</p>
  </div>
</div>

Gallery Grid

<div class="gallery-grid">
  <img src="..." class="placeholder-img">
  <img src="..." class="placeholder-img">
  <img src="..." class="placeholder-img">
</div>

Steps

Research

Gather requirements.

Design

Create wireframes.

Build

Write the code.

Deploy

Ship to production.

<div class="steps">
  <div class="step step-chart-1">
    <h3>Research</h3>
    <p>...</p>
  </div>
</div>

Feature Grid

Fast

Lightning fast perf.

Secure

Built-in security.

<div class="feature-grid">
  <div class="feature-item">
    <div class="feature-icon">...svg...</div>
    <h3>Fast</h3>
    <p>...</p>
  </div>
</div>

Alternating Rows

Feature One

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="alternating-row">
  <div class="alternating-media">
    <img src="..." class="placeholder-img">
  </div>
  <div class="alternating-text">
    <h3>Title</h3>
    <p>...</p>
  </div>
</div>

Testimonial

Marcus Tullius Senator

"Excellent design system. Clear, consistent and easy to use across projects."

<div class="testimonial">
  <div class="avatar">...</div>
  <div>
    <span class="testimonial-name">...</span>
    <span class="testimonial-role">...</span>
  </div>
  <p class="testimonial-text">...</p>
</div>

Masonry

Short card content.

Longer card with more text to demonstrate the masonry layout.

Medium card.

<div class="masonry">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Pricing Table

Free

$0 /month

5 articles
Basic search

Popular

Pro

$19 /month

Unlimited articles
Advanced search
Analytics

Kanban Board

To Do

Feature

Add search filters

Bug

Fix pagination

In Progress

Enhancement

Improve dark mode

Done

Docs

Update styleguide

Contents

<div class="toc">
  <div class="toc-title">Contents</div>
  <ol class="toc-list">
    <li><a href="#">...</a>
      <ol class="toc-sub">
        <li><a href="#">...</a></li>
      </ol>
    </li>
  </ol>
</div>

Infobox

Lorem Ipsum

Origin	45 BC
Author	Cicero
Language	Latin

<div class="infobox">
  <div class="infobox-header">Title</div>
  <div class="infobox-img">
    <img src="...">
  </div>
  <table class="infobox-table">
    <tr>
      <th>Key</th>
      <td>Value</td>
    </tr>
  </table>
</div>

Article Meta

Author: Marcus Updated: 2024-03-15 Featured

<div class="article-meta">
  <span>
    <strong>Author:</strong> Name
  </span>
  <span>
    <strong>Updated:</strong> Date
  </span>
</div>

Footnotes

Some text with a reference^[1] and another^[2].

First source citation.
Second source citation.

<sup class="ref">[1]</sup>
<div class="footnotes">
  <ol>
    <li>Source citation.</li>
  </ol>
</div>

Disambiguation

ⓘ This article is about the concept. For other uses, see Topic (disambiguation).

<div class="disambig">
  <span class="disambig-icon">&#9432;</span>
  <span>...</span>
</div>

Category Bar

Categories: Science History Philosophy

<div class="category-bar">
  <span class="category-label">Categories:</span>
  <a href="#" class="badge badge-secondary">Science</a>
</div>

Wiki Path

Home / Science / Physics

<div class="wiki-path">
  <a href="#">Home</a>
  <span class="wiki-path-sep">/</span>
  <a href="#">Science</a>
  <span class="wiki-path-sep">/</span>
  <span>Physics</span>
</div>

Search Hero

Search

Find articles, topics and more.

<div class="search-hero">
  <h3>Search</h3>
  <div class="search-bar">
    <input type="text" class="input"
      placeholder="...">
    <button class="btn btn-primary">Go</button>
  </div>
</div>

Topic Cards

Science

Physics, chemistry.

127 articles

History

Ancient and modern.

243 articles

Technology

Computing, engineering.

312 articles

Filter Bar

<div class="filter-bar">
  <button class="btn btn-outline filter-active">All</button>
  <button class="btn btn-outline">Articles</button>
</div>

Article List

Article Title

Short description of the article.

Science 2,431 views

Another Article

Another description here.

History 1,876 views

Ranked List

Most Popular Article

4,231 views this week.

Second Article

3,876 views this week.

Third Article

2,945 views this week.

Browse Trail

Step 1

Choose topic

Step 2

Read article

Step 3

Contribute

Browse Layout

Sidebar + content for browse pages with filters.

370 results

Content area with filtered results.

Empty State

No results found

Try adjusting your filters or search query.

<div class="empty-state">
  <div class="empty-state-icon">...svg...</div>
  <h3>No results found</h3>
  <p>...</p>
  <button class="btn btn-outline">...</button>
</div>

Hero Section

Full-width hero with title, subtitle and actions. Use .hero-compact for shorter height.

Hero Title

Subtitle text goes here.

Primary CTA Secondary CTA

<div class="hero hero-compact">
  <div class="container">
    <div class="hero-content
      hero-content-center">
      <h1 class="hero-title">...</h1>
      <p class="hero-subtitle">...</p>
      <div class="hero-actions">
        <a class="btn btn-primary">...</a>
      </div>
    </div>
  </div>
</div>

Band Section

Full-width colored band

For CTAs, stats or announcements.

<div class="band">
  <div class="container-narrow">
    <h2>Title</h2>
    <p>...</p>
  </div>
</div>

Header

Sticky header with brand, navigation and actions. Classes: .header, .header-inner, .header-brand.

<header class="header">
  <div class="header-inner container">
    <a class="header-brand">Brand</a>
    <div class="menubar">
      <a href="#" class="menubar-item">Nav</a>
    </div>
  </div>
</header>

Footer

Multi-column footer with brand, links and legal info. Classes: .footer, .footer-grid, .footer-brand, .footer-heading, .footer-links.

<footer class="footer">
  <div class="footer-inner container">
    <div class="footer-grid">
      <div class="footer-brand">...</div>
      <div>
        <p class="footer-heading">Links</p>
        <ul class="footer-links">
          <li><a class="footer-link">...</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Dark Mode

The design system supports light, dark, and system-preference modes. All tokens are overridden via a .dark class on <html>.

Toggle button

Add a data-theme-toggle button anywhere. Icons auto-toggle.

<button data-theme-toggle
  class="btn btn-ghost btn-icon"
  aria-label="Toggle dark mode">
  <svg class="theme-icon-light">
    <!-- sun icon -->
  </svg>
  <svg class="theme-icon-dark">
    <!-- moon icon -->
  </svg>
</button>

JS API

setTheme("dark");   // force dark
setTheme("light");  // force light
setTheme("system"); // follow OS
toggleTheme();      // toggle
getTheme();         // "light"|"dark"

Modes

CSS-only (no JS)

Without components.js, dark mode follows the OS preference automatically. To force dark without JS, add class="dark" to <html>.