Semanticus CSS

Appearance

Getting Started ​

Add Semanticus CSS to your project either via CDN, manual download, or importing from Node.

Install ​

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">

Looking for alternative color palettes or sizing options? Check out the Palettes or Sizes guides.

Usage ​

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>