Semanticus CSS

Appearance

Semanticus CSSARIA-centric, semantic HTML

enhanced by atomic utilities.

Get Started
Docs
GitHub
Semanticus CSS

Semantic First

Style plain HTML elements without adding classes. Clean, readable markup that looks beautiful out of the box.

Accessibility

ARIA-first patterns ensure accessible interfaces by default; core behavior works without JavaScript and can be enhanced progressively.

Best of Both Worlds

Use semantic styles, utility classes, or both — whatever fits the situation. No rigid paradigms.

Lightweight

Minimal CSS footprint with zero JavaScript dependency. ~24 KB gzipped for lightning-fast page loads.

Consistent Design

Predictable styling across your project. Semantic and utility layers share the same CSS variables and design tokens.

Customizable

Override CSS variables to create your own themes, or choose from a list of pre-built color palettes and adjustable sizing options.

Install ​

Add Semanticus CSS to your project via CDN, manual download, or npm:

Include these lines directly from a CDN in your HTML <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.css">

<!-- customize it with a palette or size variation if needed -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.palette.blue.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.size.pico.css">

How It Works ​

Semanticus CSS is built on four complementary layers:

1. Semantic Styling ​

Beautiful default styles for plain ARIA-centric HTML — simply write plain HTML and Semantic Styling will make it look great by default.

live preview
editable html
<article>
  <hgroup>
    <h1>Hello World</h1>
    <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
  </hgroup>

  <button>Get Started</button>
</article>

2. Components ​

Minimal set of reusable building blocks that extend the Semantic Styling - add a component when you need a specific UI pattern.

live preview
editable html
<article class="card">
  <hgroup>
    <h1>Hello World</h1>
    <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
  </hgroup>

  <button>Get Started</button>
</article>

3. Variants ​

CSS classes that tweak the Semantic Styling and Components - throw in a variant when you want to add or reduce visual flair.

live preview
editable html
<article class="card secondary subtle">
  <hgroup>
    <h1>Hello World</h1>
    <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
  </hgroup>

  <button class="contrast">Get Started</button>
</article>

4. Utilities ​

Utility classes adapted to the same CSS variables as the Semantic Styling and Components for a consistent design - use them when you need fine-grained control over spacing, layout, colors, and more.

live preview
editable html
<article class="card secondary subtle shadow text-center w-75 mx-auto">
  <hgroup>
    <h1>Hello World</h1>
    <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
  </hgroup>

  <button class="info ghost">Get Started</button>
</article>

Starter HTML template ​

Here's an off-to-a-great-start HTML template using semantic styling, its variants, and utilities:

live preview
editable html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.css">
</head>

<body class="content-grid">
  <header>
    <nav>
      <a href="#" class="fs-3"><strong>Acme Corp</strong></a>
  
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#" role="button" class="contrast">Log In</a></li>
      </ul>
    </nav>
  </header>
  
  <main class="py-d mb-3">
    <hgroup>
      <h1>Welcome to Semanticus CSS</h1>
      <p>ARIA-centric, semantic HTML enhanced by atomic utilities.</p>
    </hgroup>
  
    <button>Get Started</button>
  </main>
  
  <footer class="full-width pane secondary subtle">
    <nav>
      <p>Acme Corp &copy; 2026</p>
      <a href="#">Contact Us</a>
    </nav>
  </footer>
</body>
</html>