colors

#colors

All themes expose identical variable names. Use only variables — never hardcode hex. Your components then adapt automatically when the theme changes.

backgrounds

void

deep

base

raised

float

hover

primary

secondary

danger

success

warn

css variables

/* backgrounds — darkest to brightest */
--bg-void    /* deepest layer, page bg */
--bg-deep    /* sunken wells, code blocks */
--bg-base    /* main content canvas */
--bg-raised  /* elevated panels */
--bg-float   /* floating elements, popovers */
--bg-hover   /* hover state fills */

/* accents */
--blue-t / --blue-b / --blue-lit / --blue-dim
--secondary-t / --secondary-b / --secondary-lit / --secondary-glow

/* semantic */
--danger-t / --danger-b
--success-t / --success-b
--warn-t    / --warn-b

surface recipe — three layers together

raised surface gradient + bevel + border

sunken surface --shadow-inset

css

/* raised */
background: linear-gradient(180deg, var(--surf-t) 0%, var(--surf-b) 100%);
border: 1px solid var(--border-lo);
box-shadow: var(--bevel-hi), var(--bevel-lo), var(--shadow-md);

/* sunken */
background: var(--bg-deep);
border: 1px solid var(--border-lo);
box-shadow: var(--shadow-inset);

typography

#typography

Standard HTML elements are styled automatically. No classes needed for headings, body text, code, kbd, mark, or blockquote.

Display H1

Section H2

Subsection H3

Card title H4

Label H5

Micro label H6

Body text. Skeuomorphic design grants digital interfaces a sense of physical weight. Links feel deliberate. Bold emphasis. Italic for nuance. Inline code and keyboard ⌘K feel tangible. You can highlight passages.

Great interfaces are like a well-worn tool — the grain of the handle, the click of the switch, the weight in the hand.

box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.08),
  inset 0 -1px 0 rgba(0,0,0,0.35),
  0 3px 10px rgba(0,0,0,0.5);

html

<h1>Heading 1</h1>
<p>Body with <a>links</a>, <strong>bold</strong>, <em>italic</em>,
   <code>code</code>, <kbd>Ctrl+K</kbd>, <mark>highlight</mark>.</p>
<blockquote>Quote</blockquote>
<pre><code>code block</code></pre>

panels

#panels

The fundamental surface. Applies the raised gradient, bevel lines, border, and shadow as a unit. Use to group related content.

Standard raised surface. The gradient lifts the top edge; bevel lines create the 3D rim.

More prominent lift — use for floating elements, dropdowns, popovers.

panel--inset — sunken into the surface. Good for code output, read-only data, wells.

Panel content area.

html

<div class="panel">content</div>
<div class="panel panel--raised">content</div>
<div class="panel panel--inset">content</div>

<!-- with header and footer -->
<div class="panel">
  <div class="panel__header">Title</div>
  content
  <div class="panel__footer">
    <button class="btn btn--ghost">Cancel</button>
    <button class="btn btn--primary">Save</button>
  </div>
</div>

buttons

#buttons

All buttons share the base btn class. Combine with a variant and optionally a size modifier.

variants

html

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--primary" disabled>Disabled</button>

sizes & shapes

html

<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary btn--lg">Large</button>
<button class="btn btn--secondary btn--pill">Pill</button>
<button class="btn btn--ghost btn--icon">...svg...</button>

form elements

#forms

Inputs are sunken panels — they sit recessed using --shadow-inset. Labels, hints, and error states are separate elements alongside the input.

text inputs

display name shown publicly on your profile

email enter a valid email address

notes

language

html

<div class="form-group">
  <label class="form-label form-label--required">Name</label>
  <input class="input" type="text" placeholder="...">
  <span class="form-hint">hint text</span>
</div>

<!-- error state -->
<input class="input input--error">
<span class="form-error">message</span>

<textarea class="input" rows="4"></textarea>

<select class="select">
  <option>Option A</option>
</select>

checkboxes

Enable notifications Show activity status Disabled option

html

<label class="checkbox-wrap">
  <input type="checkbox" checked>
  <span class="checkbox-box"></span>
  <span>Label text</span>
</label>

radio buttons

Sync automatically Manual sync only

html

<label class="radio-wrap">
  <input type="radio" name="group" checked>
  <span class="radio-dot"></span>
  <span>Option A</span>
</label>

toggles & range

Dark mode follows system

Reduce motion

volume — 70%

html

<label class="toggle-wrap">
  <input type="checkbox" checked>
  <div class="toggle-track"><div class="toggle-thumb"></div></div>
  <span>Label</span>
</label>

<input class="range" type="range" min="0" max="100" value="70">

badges & tags

#badges

Badges draw attention with accent colors. Tags are lower-contrast labels for classification and filtering.

badges

Stable Pro Live Breaking Beta Archived

html

<span class="badge badge--primary">Stable</span>
<span class="badge badge--secondary">Pro</span>
<span class="badge badge--success">Live</span>
<span class="badge badge--danger">Breaking</span>
<span class="badge badge--warn">Beta</span>
<span class="badge badge--muted">Archived</span>

alerts

#alerts

Full-width callout strips for feedback. Each variant maps to a semantic color role.

An informational message. Changes take effect on the next request.

Deployment complete. Your changes are live at app.example.io.

Rate limit approaching — 84% of your hourly quota has been used.

This action is irreversible. All data will be permanently deleted.

html

<div class="alert alert--info">...</div>
<div class="alert alert--success">...</div>
<div class="alert alert--warn">...</div>
<div class="alert alert--danger">...</div>

tabs

#tabs

Uses Alpine.js x-data for active state. The active tab receives tab--active. No other JS required.

Project is healthy. Latest release reduced bundle size by 18%.

html — requires alpine.js

<div x-data="{ tab: 'a' }">
  <div class="tabs">
    <button class="tab"
      :class="tab === 'a' && 'tab--active'"
      @click="tab='a'">Tab A</button>
  </div>
  <div x-show="tab === 'a'">Content A</div>
</div>

list items

#list

Used inside sidebars and navigation panels. list-section provides a muted group label; list-item--active highlights the selected row.

Library

All Tracks

Albums

Artists

Playlists

Late Night Study

Morning Run

html

<div class="list-section">Group Label</div>
<div class="list-item list-item--active">Active item</div>
<div class="list-item">Normal item</div>

progress

#progress

A sunken trough with a filled bar. Set fill width inline. Use progress__fill--secondary or --success for alternate accent colors.

uploading files — 72%

build progress — 45%

deployment complete

html

<div class="progress">
  <div class="progress__fill" style="width: 72%"></div>
</div>

<!-- color variants -->
progress__fill--secondary
progress__fill--success

avatars

#avatars

Circular (or square) initials/image containers. Wrap with avatar-wrap to attach a status dot.

AK

RH

MV

SL

html

<!-- sizes: avatar--sm  avatar  avatar--lg  avatar--xl -->
<!-- shapes: default (circle), avatar--square -->
<!-- status: --online  --idle  --dnd  --offline -->

<div class="avatar-wrap">
  <div class="avatar" style="background:...">AB</div>
  <span class="avatar-status avatar-status--online"></span>
</div>

tooltip

#tooltip

Pure CSS tooltip — no JavaScript. The tooltip appears above the trigger element on hover.

html

<span class="tooltip-wrap">
  Hover me
  <span class="tooltip">Tooltip content</span>
</span>

modal

#modal

Uses Alpine.js for open/close. The overlay receives is-open class to display. Clicking the backdrop closes it.

html — requires alpine.js

<button class="btn btn--primary" @click="modalOpen = true">Open</button>

<div class="overlay"
  :class="modalOpen && 'is-open'"
  @click.self="modalOpen = false">
  <div class="modal">
    <div class="modal__header">
      <div class="modal__title">Title</div>
      <button class="btn btn--ghost btn--icon btn--sm"
        @click="modalOpen = false">✕</button>
    </div>
    <div class="modal__body">content</div>
    <div class="modal__footer">
      <button class="btn btn--ghost">Cancel</button>
      <button class="btn btn--primary">Confirm</button>
    </div>
  </div>
</div>

table

#table

Wrap <table> in .table-wrap for horizontal scroll and consistent border/shadow. Standard thead/tbody structure is all that's needed.

Project	Status	Language	Updated
HX helix-renderer	Live	Rust	2 hours ago
AU aurora-ui	Beta	TypeScript	Yesterday
PX prism-core	Archived	Go	3 months ago

html

<div class="table-wrap">
  <table>
    <thead><tr>
      <th>Name</th>
      <th>Status</th>
    </tr></thead>
    <tbody><tr>
      <td>helix-renderer</td>
      <td><span class="badge badge--success">Live</span></td>
    </tr></tbody>
  </table>
</div>

context menu

#menu

Menu items use the raised panel surface with tight padding. Hover states use the accent tint; destructive actions use the danger tint. Separators use the bevel double-line technique.

Menus use .menu as the container with .menu-item children. The .menu-sep separator is the grooved double-line.

html

<div class="menu">
  <div class="menu-item">Open</div>
  <div class="menu-item">Rename</div>
  <div class="menu-sep"></div>
  <div class="menu-item menu-item--danger">Delete</div>
</div>

skui

colors

typography

Display H1

Section H2

Subsection H3

Card title H4

Label H5

Micro label H6

panels

buttons

form elements

badges & tags

alerts

tabs

list items

progress

avatars

tooltip

modal

table

context menu