Reference

Appearance

Every reusable class, with the result on top and the markup below. Copy a snippet and go.

Color

Carry meaning with the color of text and elements.

Muted text

.mute renders text in a secondary tone for content that belongs on the page but should not compete with the main text (captions, metadata, incidental notes). It changes color only, leaving size and weight alone.

Full-strength body text carries the main message.

Muted text steps back for secondary detail.

<p>Full-strength body text carries the main message.</p>

<p class="mute">
  Muted text steps back for secondary detail.
</p>

Semantic colors

Each class names a role, not a color. You apply the one whose meaning fits the text, and the system colors it from a fixed palette:

.action: Something you can act on, like a link or button.
.notice: Something to notice but not act on, like a warning or a "new" badge.
.insert: Something added or confirmed, like a success message. The color of <ins> text.
.delete: Something removed or failed, like an error. The color of <del> text.

Links and buttons are action-colored automatically, so you don't apply .action to them. Use it to mark something else as a call to action, as this page does on class names to signal that you can copy them.

<ins> and <del> are colored automatically too — no class needed.

Registration closes ~~Friday~~ Thursday.

<p>
  Registration closes <del>Friday</del> <ins>Thursday</ins>.
</p>

Action, for links and buttons.

Notice, for highlights and warnings.

Insert, for success and confirmation.

Delete, for errors and removals.

<p class="action">
  Action, for links and buttons.
</p>

<p class="notice">
  Notice, for highlights and warnings.
</p>

<p class="insert">
  Insert, for success and confirmation.
</p>

<p class="delete">
  Delete, for errors and removals.
</p>

Each class also defines a matching muted shade, so .mute text nested inside takes on the same hue instead of neutral gray.

Action text, with muted detail that keeps the same hue.

<p class="action">
  Action text, with <span class="mute">muted detail that keeps the same hue</span>.
</p>

Icons

Size and align inline icons.

Icon and label

This project uses Lucide icons. Find one in the gallery, convert its name to PascalCase (e.g. map-pin → MapPin), import it from "@lucide/svelte", and drop it in as a Svelte component.

import { MapPin } from "@lucide/svelte";

<MapPin />

.iconic lays an icon and a label out on one line, vertically centered with a small gap.

Vancouver, BC

June 9–11, 2027

Open at 09:00

Ticket Confirmed

<p class="iconic">
  <MapPin />
  <span>Vancouver, BC</span>
</p>

<p class="iconic">
  <Calendar />
  <span>June 9–11, 2027</span>
</p>

<p class="iconic">
  <Clock />
  <span>Open at 09:00</span>
</p>

<p class="iconic">
  <Check />
  <span>Ticket Confirmed</span>
</p>

.inline-iconic is the inline counterpart of .iconic: it aligns an icon with its label the same way, but flows within a line of text instead of starting its own. Use it for a link whose label carries an icon.

Check the schedule before you arrive, or follow us on Mastodon .

<p>
  Check the <a class="inline-iconic" href="#">schedule <ExternalLink /></a> before you arrive, or follow us on <a class="inline-iconic" href="#">Mastodon <AtSign class="size-" /></a>.
</p>

Color and size

Icons inherit the text color and size of their surroundings, so the semantic color classes and the size scale apply to them just as they do to text.

Registration confirmed

<p class="iconic">
  <Check class="insert size+" />
  <span>Registration confirmed</span>
</p>

Buttons

Style links and elements as clickable buttons.

A <button> element is styled automatically. To make any other element look like a button, add .button.

Learn more

<button>Register now</button>
<a class="button" href="#">Learn more</a>

Stroke

.stroke gives a button an outlined look instead of a filled one, for secondary actions that should not compete with the primary call to action.

<button>Register now</button>
<button class="stroke">Learn more</button>

Circle

.circle gives a button fully rounded corners, for pill-shaped or icon-only circular buttons.

<button class="circle">Register</button>
<button class="circle stroke">Register</button>

Size

The size scale grows or shrinks a button relative to the default, changing its padding without changing the size of its text.

It runs two steps each way: .button+ and .button++ enlarge, .button- and .button-- shrink.

<button class="button++">Register</button>
<button class="button+">Register</button>
<button>Register</button>
<button class="button-">Register</button>
<button class="button--">Register</button>

Color roles

Buttons default to the action color. The other semantic color classes override it, coloring the fill (or stroke) to match the role.

<p>
  <button>Default</button>
  <button class="notice">Notice</button>
  <button class="insert">Insert</button>
  <button class="delete">Delete</button>
</p>

<p>
  <button class="stroke">Default</button>
  <button class="stroke notice">Notice</button>
  <button class="stroke insert">Insert</button>
  <button class="stroke delete">Delete</button>
</p>

With an icon

.iconic composes naturally with buttons, placing an icon and label on one line.

<button class="iconic">
  <Check />
  <span>Confirm registration</span>
</button>

<button class="circle iconic stroke">
  <Check />
  <span>Confirm registration</span>
</button>

Areas

Enclose a group of content.

Filled area

.area fills a block with the neutral tinted surface and adds padding, setting a group of content apart from the page without a hard border. Use it for cards, asides, and banded sections.

Everything here reads as one unit, lifted off the page by a soft fill.

<p class="area">
  Everything here reads as one unit, lifted off the page by a soft fill.
</p>

Outlined box

.border outlines a block on all sides and adds the same padding; it's the unfilled counterpart to .area.

An outlined box, the unfilled counterpart to an area.

<p class="border">
  An outlined box, the unfilled counterpart to an area.
</p>

Band

.band brackets a block with a rule above and below, for a full-width strip that sets a run of content off without enclosing its sides.

A band, bracketed by a rule above and below.

<p class="band">
  A band, bracketed by a rule above and below.
</p>

Semantic areas

Each role from the color section has an area form that fills the block with that role's color, for callouts: .action-area, .notice-area, .insert-area, and .delete-area. Each one also retunes the fill and border colors inside, so a nested border or accent rule takes the same role.

Registration is open. Reserve your seat before prices rise.

The early-bird deadline is this Friday.

Your proposal was received. We'll be in touch soon.

Payment failed. Check your card details and try again.

<p class="action-area">
  Registration is open. Reserve your seat before prices rise.
</p>

<p class="notice-area">
  The early-bird deadline is this Friday.
</p>

<p class="insert-area">
  Your proposal was received. We'll be in touch soon.
</p>

<p class="delete-area">
  Payment failed. Check your card details and try again.
</p>

Combining

These forms stack. Add .border to an .area for a filled box with an outline; on a semantic area the outline takes the role's color, since each area retunes the border.

A filled area with an outline.

On a semantic area, the outline takes the role's color.

<p class="area border">
  A filled area with an outline.
</p>

<p class="action-area border">
  On a semantic area, the outline takes the role's color.
</p>

Accents

Mark a block with a rule along one edge.

Rules

An accent rule draws a bold line along one edge of a block and insets the content behind it, marking it as set apart with less weight than a filled area.

.acme puts the rule across the top. It suits a pull quote or the head of a section.

A rule across the top.

<p class="acme">A rule across the top.</p>

.edge puts it down the left side, the usual treatment for a blockquote.

A side rule marks a quote without boxing it in.

— Someone

<blockquote class="edge">
  <p>
    A side rule marks a quote without boxing it in.
  </p>

  <footer>
    <cite>&mdash; Someone</cite>
  </footer>
</blockquote>

Colored accents

Prefix a role to either shape to color the rule, carrying the same meanings as the color section.

Neutral

Action

Notice

Insert

Delete

<p class="acme">Neutral</p>
<p class="action-acme">Action</p>
<p class="notice-acme">Notice</p>
<p class="insert-acme">Insert</p>
<p class="delete-acme">Delete</p>

Neutral

Action

Notice

Insert

Delete

<p class="edge">Neutral</p>
<p class="action-edge">Action</p>
<p class="notice-edge">Notice</p>
<p class="insert-edge">Insert</p>
<p class="delete-edge">Delete</p>

Combining

Accents compose with the areas from the previous section. Because each area resets the default accent color to its own role, a plain .edge on a .notice-area takes the area's color:

A neutral edge takes the area's color.

<p class="notice-area edge">
  A neutral edge takes the area's color.
</p>

A .band takes a top accent the same way, with .acme or a colored variant (.edge also works but is nonsense).

A band whose top rule is promoted to an action accent.

<p class="band action-acme">
  A band whose top rule is promoted to an action accent.
</p>

Tables

Present tabular data with automatic row borders.

A plain <table> gets full-width layout, a heavy rule below <thead>, and a hairline between each <tbody> row.

Workshop registrations
Session	Speaker	Seats left
Query optimization	Álvaro Herrera	8
Extension development	Peter Eisentraut	4
Logical replication	Amit Kapila	12

<table>
  <caption>Workshop registrations</caption>
  <thead>
    <tr>
      <th>Session</th>
      <th>Speaker</th>
      <th>Seats left</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Query optimization</td>
      <td>Álvaro Herrera</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Extension development</td>
      <td>Peter Eisentraut</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Logical replication</td>
      <td>Amit Kapila</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

.stripe fills alternating rows with the tinted surface, making longer tables easier to scan row by row.

Session	Speaker	Seats left
Query optimization	Álvaro Herrera	8
Extension development	Peter Eisentraut	4
Logical replication	Amit Kapila	12

<table class="stripe">
  <thead>
    <tr>
      <th>Session</th>
      <th>Speaker</th>
      <th>Seats left</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Query optimization</td>
      <td>Álvaro Herrera</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Extension development</td>
      <td>Peter Eisentraut</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Logical replication</td>
      <td>Amit Kapila</td>
      <td>12</td>
    </tr>
  </tbody>
</table>