Gutter UI · v0.1

An editor-style UI library.

Gutter distils the look of a modern code-editor dashboard — translucent surfaces layered over a single --base colour, hairline borders, dense 13px type, one warm accent — into tokens, components, utilities and a tiny vanilla-JS layer. Light and dark themes come from the same 14 seed colours.

Drop-in (CDN-style)

index.html

<link rel="stylesheet" href="gutter/dist/gutter.min.css">
<script src="gutter/dist/gutter.min.js" defer></script>

<!-- optional: the font the design was built around -->
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">

Avoid a theme flash

Inline this in <head> before the stylesheet. It applies the saved theme before first paint.

(function () {
  var r = document.documentElement, m = 'dark';
  try { m = localStorage.getItem('gutter-theme') || 'dark'; } catch (e) {}
  var dark = m === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : m !== 'light';
  r.classList.add(dark ? 'dark' : 'light');
})();

Build from source

cd gutter && npm install
npm run build   # -> dist/gutter(.min).css + gutter(.min).js

Theming & tokens

A theme is a handful of seed variables. Everything else — --text-*, --bg-*, --border-*, --icon-* — is derived with color-mix(), so one block of seeds re-colours the whole system. Themes can be scoped to any element.

Surfaces

--bg-chrome

--bg-sidebar

--bg-elevated

--bg-quinary

--bg-quaternary

--bg-tertiary

--bg-secondary

--bg-primary

Semantic colours

--brand

--accent

--success

--warn

--danger

--purple

--cyan

--magenta

Text & borders

--text-primary · The quick brown fox

--text-secondary · The quick brown fox

--text-tertiary · The quick brown fox

--text-quaternary · The quick brown fox

border-primary

border-secondary

border-tertiary

border-quaternary

Scoped themes

Add .dark, .light or data-theme="…" to any element — the derived tokens recompute inside it.

Light card

Scoped with .light

Dark card

Scoped with .dark

Make your own theme

[data-theme="midnight"] {
  color-scheme: dark;
  --chrome: #0b1020;  --sidebar: #0f1530;  --editor: #121a3a;
  --base: #e8ecff;    --onPrimary: #0b1020;
  --brand: #7c5cff;   --accent: #5cc8ff;   --focus: #e8ecff;
  /* …success, warn, danger, red … purple as needed */
}

Typography

Geist (or any system sans) at a compact 13px UI size, 14px for body copy. Display type uses tight tracking.

Eyebrow label

Heading 1

Heading 2

Heading 3

Heading 4

Lead paragraph — larger, secondary colour.

Body text with a link, inline code, ⌘ K and strong emphasis.

Caption text, tertiary colour.

Scale

.text-2xs10px — The quick brown fox

.text-xs11px — The quick brown fox

.text-sm12px — The quick brown fox

.text-base13px — The quick brown fox

.text-md14px — The quick brown fox

.text-lg16px — The quick brown fox

.text-xl20px — The quick brown fox

.text-2xl24px — The quick brown fox

.text-3xl32px — The quick brown fox

Layout & grid

A Bootstrap-style 12-column .row/.col-* grid with sm md lg xl breakpoints (576 / 768 / 1024 / 1280), plus .container, .stack, .cluster and CSS-grid helpers.

.col-12 .col-md-6 .col-lg-4

.col-12 .col-md-12 .col-lg-4

.col

.col-auto

Grid, stack & cluster

.grid-cols-md-3

item

.grid-auto

auto-fit

Buttons

28px high, 6px radius, 13px text. Primary uses the inverted neutral — near-white in dark, near-black in light — as in the editor.

Link button

Sizes, icons & shapes

Badges & pills

Default Brand Accent Success Warning Danger Purple Outline Live NewAnnouncement pill

Cards

An elevated surface, 12px radius, and a 1px hairline drawn with box-shadow so layout never shifts on hover.

Default card

Elevated background with a hairline ring.

Interactive

Tints on hover. Hover me.

UPGRADE AVAILABLE

Brand card

Warm tint with a soft glow.

Stat, panel & window

76,887AI line edits

Inset panel for secondary info

window

Window chrome for product mock-ups.

Forms

Email

Plan

Notes

Helper text sits underneath.

With icon & button

Invalid

Please enter a valid email.

Email me alerts Monthly Annual Real-time updates

Navigation & tabs

Navbar

Segmented control & underline tabs

Overview panel — arrow keys switch tabs.

Sidebar nav & breadcrumb

Overview Settings Members

Tables

Name	Type	Category	Tools
AWS Deployments	Plugin	Infrastructure	12
GitLab	Plugin	Productivity	34
AWS Core	Plugin	Infrastructure	8

Feedback

Alerts

Heads up. A neutral message.

Info. An accent message.

Saved. Success message.

Careful. Warning message.

Failed. Error message.

Progress, spinner & skeleton

Cursor models1% used

Other models31% used

Toast

Overlays

Modal (<dialog>), dropdown, tooltip

Accordion

Styled <details> — works with no JavaScript. Add data-gt-accordion="exclusive" to keep one open at a time.

What is Gutter?

A small editor-style design system in plain CSS and JS.

Does it need a framework?

No. Everything is class-based CSS plus an optional vanilla JS file.

Can I theme it?

Yes — override the seed colours and every derived token follows.

Code & diff

terminal

# read weights
curl -s localhost:8000/api/v1/weights

def score(features):
−    return sum(c.value for c in components)
+    return sum(c.weight * c.value for c in components) / total_weight

Pricing

.pricing-grid > .pricing-card (add -featured to highlight). Pair with .segmented for a billing toggle and .checklist for features.

Starter

For trying things out.

$0forever

Core features
Community support
API access

Heatmap

A contribution-style grid. Set --rows, --cell and --heat; each cell takes data-level="0–4".

Icons

Pure-CSS mask icons: <i class="icon icon-check"></i>. They inherit currentColor and scale with font-size (.icon-sm 12px, .icon-md 14px, .icon-lg 20px). Click to copy the markup.

Utilities

Spacing on a 4px scale, flexbox, grid, typography, colour, border, radius and shadow helpers. Responsive variants use Bootstrap-style infixes.

Group	Classes
Display	`.d-none` `.d-flex` `.d-grid` `.d-md-none` `.d-lg-flex` …
Flex	`.flex-col` `.flex-md-row` `.flex-wrap` `.flex-1` `.justify-between` `.items-center` `.gap-4` `.gap-md-8`
Spacing	`.m-4` `.mt-2` `.mx-auto` `.p-6` `.py-3` (0–6, 8, 10, 12, 16, 20, 24, 32)
Typography	`.text-xs … .text-5xl` `.font-medium` `.text-center` `.uppercase` `.truncate` `.font-mono`
Colour	`.text-primary … quaternary` `.text-brand` `.text-success` `.bg-elevated` `.bg-quaternary` `.bg-brand-tertiary`
Border & shape	`.border` `.border-tertiary` `.rounded-lg` `.rounded-full` `.ring-tertiary` `.shadow-popover`
Sizing & position	`.w-full` `.max-w-md` `.relative` `.sticky` `.overflow-hidden` `.sr-only`

JavaScript

Behaviour is opt-in through data-gt-* attributes. Everything is also available on window.Gutter.

Attribute / API	What it does
`data-gt-theme-toggle`	Toggles light/dark and persists to `localStorage`. API: `Gutter.theme.set('light'\|'dark'\|'auto')`
`data-gt-tabs`	ARIA tabs with arrow-key navigation; emits `gt:tab`
`data-gt-segmented`	Single-select button group; emits `gt:change` with `detail.value`
`data-gt-modal-open="#id"` / `data-gt-modal-close`	Open/close a `<dialog class="modal">`; backdrop click and Esc close. API: `Gutter.modal.open(el)`
`data-gt-dropdown-toggle`	Toggles `.dropdown.is-open`; closes on outside click / Esc
`data-gt-collapse="#id"`	Toggles `.is-open` on the target (mobile nav)
`data-gt-copy` / `data-gt-copy-target`	Copy text or an element’s contents to the clipboard
`data-gt-accordion="exclusive"`	Only one `<details>` open at a time
`data-gt-reveal`	Fade/slide in on scroll (value = delay in ms); respects reduced motion
`data-gt-scrollspy`	Highlights in-page nav links for the visible section
`Gutter.toast({title, description, variant})`	Show a toast; `variant`: `success \| danger \| warn \| info`

Icons are drawn from the Lucide geometry (ISC). Gutter is MIT-licensed.