Storybook

Components that carry the swamp.

The interface language of orc, extracted: framework-neutral Web Components, a sixteen-color day/night palette, and native-first accessibility. Zero runtime dependencies.

Browse components View on GitHub

the beam is the focus cue Send

Foundations

Sixteen semantic colors per theme, rendered here straight from tokens.json, so this page can't drift from the source.

Day

Night

Type

Display — restraint is a feature

Headline — quiet parts done properly

Title — Inter carries the interface

Body — fourteen pixels of ordinary text, set for long reading in dense tools.

LABEL — chips, tags, captions

mono — JetBrains for code, logs, and hex

Components

Live instances, not screenshots. Prod them. Each ships as a custom element registered by defineOrcElements().

Button

Green is the primary action: orc's "more green" shift, ported.

Primary Ghost Compact Disabled 
<orc-button>Primary</orc-button>
<orc-button variant="ghost">Ghost</orc-button>

Logomark

The lockup itself: emblem, the green slash, the product word. The navbar above is this component.

<orc-logomark product="design-system"></orc-logomark>
<orc-logomark size="lg"></orc-logomark>

Fields

One glowing surface, two shapes. Focus either one and the border goes moss — no ring, however you got there.

<orc-input label="Run name"></orc-input>
<orc-textarea label="Release notes"></orc-textarea>

Checkbox

A native checkbox under Orc's chrome: checked, indeterminate, and disabled all reflect real DOM state.

<orc-checkbox label="Send me updates"></orc-checkbox>
<orc-checkbox label="Auto-merge on green" checked></orc-checkbox>
<orc-checkbox label="Select all rows" indeterminate></orc-checkbox>
<orc-checkbox label="Requires admin" disabled></orc-checkbox>

Select

A light-DOM option list with a labelled trigger, native value holder, and full keyboard path.

<orc-select label="Release channel">
  <option value="stable" selected>Stable</option>
  <option value="preview">Preview</option>
  <option value="nightly">Nightly</option>
</orc-select>

Icon button

Icon-only actions stay native: plain and ghost weights render as a button or link, each with its own name.

<orc-icon-button label="More actions">
  <svg aria-hidden="true">…</svg>
</orc-icon-button>
<orc-icon-button label="Jump to install" variant="ghost" href="#consume">
  <svg aria-hidden="true">…</svg>
</orc-icon-button>

Copy button

Clipboard success or failure replaces the label briefly and is announced in place.

Copy install command 
<orc-copy-button
  value="npm install @orc-tools/orc-design-system"
  variant="ghost"
>Copy install command</orc-copy-button>

Chip & status dot

Run states as tinted pills; the dot pulses only when motion is welcome.

done gate working merged escalated neutral build passing 
<orc-chip variant="green" dot>done</orc-chip>
<orc-status-dot tone="green" pulse label="Build passing"></orc-status-dot>

Callout

Chip's colour recipe at panel scale, for the block a reader actually stops on.

Waiting on an approval before this run can proceed. The last deploy failed and was rolled back. No blockers on this run. 
<orc-callout variant="orange" heading="Gate">Waiting on an approval before this run can proceed.</orc-callout>
<orc-callout variant="red" heading="Escalated">The last deploy failed and was rolled back.</orc-callout>
<orc-callout variant="neutral">No blockers on this run.</orc-callout>

Tabs

WAI-ARIA APG behavior hand-rolled: roving tabindex, arrow keys, Home/End.

The plan tab. Try ArrowRight.
The build tab. Selection follows focus.
The review tab. Underline, never color alone.
 
<orc-tabs selected="0">
  <div data-tab="Plan">…</div>
</orc-tabs>

Segmented

A radiogroup wearing a track: one choice, always visible, arrow keys included.

<orc-segmented value="orc" label="Orc mode">
  <button value="orc">/orc</button>
</orc-segmented>

Switch

A real checkbox underneath: Space, label click and the switch role come from the platform. The thumb moves, so state is never color alone.

<orc-switch label="Auto-merge when green" checked></orc-switch>

Stepper

Phase pills with aria-current and a text affix for done. Never color alone.

<orc-stepper steps="plan,build,review,qa,ship" current="review"></orc-stepper>

Dialog

Native <dialog> underneath: Esc, focus trap, and inert background come from the platform, not a dependency.

Open dialog

Focus is trapped here and returns to the trigger on close. Press Esc or click the backdrop.

Close 
dialog.show();  // native showModal() underneath

Utilities

Opt-in CSS, exported from the package like everything else. This page uses the first two.

Consume

npm install @orc-tools/orc-design-system

import "@orc-tools/orc-design-system/tokens.css";
import "@orc-tools/orc-design-system/components.css";
import { defineOrcElements } from "@orc-tools/orc-design-system";

defineOrcElements();

This page is the primary reference. It imports the same source the package builds from, so it is current by construction. Storybook (npm run storybook) remains the secondary, per-component workbench with autodocs and play tests.