Background
#111719--color-backgroundAccessible text pairings
| Foreground | Background | Contrast | WCAG AA |
|---|---|---|---|
| Text | Background | 15.70:1 | Pass |
| Muted text | Background | 7.69:1 | Pass |
| Accent | Background | 11.71:1 | Pass |
| Signal | Background | 15.85:1 | Pass |
| Warning | Background | 11.11:1 | Pass |
| Danger | Background | 7.71:1 | Pass |
| Info | Background | 10.85:1 | Pass |
| Text | Surface | 14.22:1 | Pass |
Medium 500
Semibold 600
Regular 400
Medium 500
Semibold 600
Regular 400
Medium 500
Semibold 600
Display
A boundary worth seeing.
Heading 1
What happens when it runs?
Heading 2
Begin with the boundary
Heading 3
The host discovers a capability
Lead
A larger introductory voice that frames cause and effect before detail.
Body
Readable body copy keeps a technical system grounded in a sequence a reader can follow. The measure remains deliberately narrow.
Small
Small supporting text remains at or above 13px across the fluid range.
Label
Capability boundary
Caption
Figure 1 · A stable contract separates intent from implementation.
Metadata
Inline code
Call the entry point with activate() and preserve the boundary.
Quotation
“The boundary is the feature.”
List
- State the caller’s intent.
- Cross one stable contract.
- Return a result the host understands.
Fluid type scale
| Token | CSS variable | 320px → 1440px |
|---|---|---|
| Step −1 | --step--1 | 13px → 14px |
| Step 0 | --step-0 | 16px → 18px |
| Step 1 | --step-1 | 19.2px → 24px |
| Step 2 | --step-2 | 23.04px → 32px |
| Step 3 | --step-3 | 27.65px → 43px |
| Step 4 | --step-4 | 33.18px → 58px |
| Step 5 | --step-5 | 39.81px → 76px |
2xs4px → 6pxxs8px → 12pxs12px → 18pxm18px → 28pxl28px → 44pxxl44px → 72px2xl68px → 112px3xl100px → 160pxRepresentative interpolation
320pxStep 5 · Space XL
Signal
path
39.81px type · 44px gap
768pxStep 5 · Space XL
Signal
path
54.29px type · 55.2px gap
1440pxStep 5 · Space XL
Signal
path
76px type · 72px gap
Radius 0
Structural frame
Radius S · 3.2px
Controls and code
Radius L · 12.8px
Rare soft surface
Raised
One elevation token
SuccessWarningDangerInformation
Use Tab to inspect the shared 3px mint focus ring and 4px offset.
Stack
.stackFirstSecond · narrowerThird
gap: --space-s
Cluster
.clusterAlphaLonger labelBetaWraps naturally
wrap · align: center
Center
.center12rem max
with gutters
with gutters
max-inline-size + auto margins
Sidebar
.sidebarasymmetric · intrinsic collapse
Switcher
.switcherEqual sibling AEqual sibling BEqual sibling C
threshold: 32rem · row ↔ stack
Grid
.grid0102030405
auto-fit · minmax(6rem, 1fr)
Frame
.frame16:7 crop
aspect-ratio + overflow: hidden
Reel
.reel01020304 →
8rem items · horizontal overflow
Cover
.coverTopCentered itemBottom
top · centered · bottom
A plugin is a participant with a defined entry point, a limited set of permissions, and a message shape both sides understand. The host can call activate() without knowing the plugin’s private machinery.
The boundary is the feature. It lets both sides change without learning each other’s internals.
That separation turns one useful trick into a reusable system:
- Intent stays with the host.
- Behavior stays with the plugin.
- The contract remains visible to both.
1Register
The host discovers a capability
The plugin offers a manifest. The host reads the fields it understands and preserves the boundary.
// build-time Shiki output
host.register({
name: "example.tool",
run: request => plugin.handle(request)
});CallerHostowns intent
requestresult
ContractBoundaryowns shape
invokereturn
CapabilityPluginowns behavior
| Surface | Owns | Can change | Must preserve |
|---|---|---|---|
| Host | Intent | Interaction flow | Contract shape |
| Boundary | Message shape | Versioned fields | Compatibility |
| Plugin | Behavior | Implementation | Declared capability |