Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Home/Themes
Your design, connected

One system.
Your spectrum.

A token is a decision you make once. Give that decision a name, and let it carry through your whole interface.

CSS custom propertiesLight + darkScoped themes

Same components. A different atmosphere.

Real theme scopes, side by side. The website shell switches independently using the header theme link.

Live preview
Light theme

A fresh perspective.

A bright canvas with a clear visual hierarchy.

Explore components ↗
One connected system

Semantic tokens connect backgrounds, text, controls, and focus indicators.

Dark theme

A quieter canvas.

The same components, in a different light.

Explore components ↗
One connected system

Each explicit theme scope supplies its own full semantic palette.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-grid sl-md:cols-2 sl-gap-6 theme-gallery">
  <article data-theme="light" class="sl-card sl-stack">
    <span class="sl-badge">Light theme</span>
    <h2 class="sl-text-xl">A fresh perspective.</h2>
    <p class="sl-text-muted">A bright canvas with a clear visual hierarchy.</p>
    <a class="sl-btn" href="/components/">Explore components ↗</a>
    <details class="sl-details">
      <summary>One connected system</summary>
      <p>Semantic tokens connect backgrounds, text, controls, and focus indicators.</p>
    </details>
  </article>
  <article data-theme="dark" class="sl-card sl-stack">
    <span class="sl-badge">Dark theme</span>
    <h2 class="sl-text-xl">A quieter canvas.</h2>
    <p class="sl-text-muted">The same components, in a different light.</p>
    <a class="sl-btn" href="/components/">Explore components ↗</a>
    <details class="sl-details">
      <summary>One connected system</summary>
      <p>Each explicit theme scope supplies its own full semantic palette.</p>
    </details>
  </article>
</div>
HTML source · enable JavaScript for the playground22 lines · UTF-8

Choose a theme

Without a theme attribute, the framework follows the operating system's color preference. Set a theme on html to force it, or on a container to scope it. No switching script is included.

<!-- Follow the operating system -->
<html lang="en">

<!-- Or choose explicitly -->
<html lang="en" data-theme="dark">

<!-- Or scope a section -->
<section data-theme="light" class="sl-card">...</section>

Semantic colors

The core's default light palette. The website adds its own brand colors in a separate stylesheet.

--sl-bg#f8fafc

--sl-surface#ffffff

--sl-text#172033

--sl-muted#475569

--sl-accent#3730a3

--sl-on-accent#ffffff

--sl-border#64748b

--sl-soft#e0e7ff

--sl-danger#b91c1c

--sl-success#166534

Space with a rhythm

Nine spacing steps, expressed in rem. Utilities and components share the same scale.

--sl-space-00rem
--sl-space-10.25rem
--sl-space-20.5rem
--sl-space-30.75rem
--sl-space-41rem
--sl-space-61.5rem
--sl-space-82rem
--sl-space-123rem
--sl-space-164rem

Make a palette your own

Keep the foreground, hover, and focus colors connected. Define light and dark choices explicitly when your design needs both.

:root, [data-theme="light"] {
  --sl-accent: #075985;
  --sl-accent-hover: #0c4a6e;
  --sl-on-accent: #ffffff;
  --sl-focus: #075985;
}
[data-theme="dark"] {
  --sl-accent: #7dd3fc;
  --sl-accent-hover: #bae6fd;
  --sl-on-accent: #082f49;
  --sl-focus: #7dd3fc;
}

Type, shape, and measure

Other core token groups
GroupProperties
Typography--sl-font, --sl-mono, --sl-text-sm/base/lg/xl/2xl/3xl
Shape--sl-radius, --sl-radius-lg, --sl-shadow
Measure--sl-measure, --sl-container
Layout hooks--sl-gap, --sl-cols, --sl-card-min