| name | Trellis | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | A Gleam workspace manager — landing page and documentation site | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Creative North Star: "The Calibrated Instrument"
Trellis is a tool you trust the way you trust a well-made instrument: it derives its answers instead of asking you to declare them, and it verifies everything it cannot derive. The site carries the same character — brass dials on oxidized steel. The page surface is a deep harbor-steel blue, structural panels step up through tonal cobalt layers, and a single warm brass voice marks what matters: the primary action, the active nav item, the $ prompt, the ok: line in real terminal output. Typography pairs Archivo (stretched wide for display, plain for prose) with Martian Mono, which has a register reason: the product IS a CLI, and its real, unretouched output is the site's primary imagery.
Density is calm but committed. Sections hold one idea each; ledger tables and terminal figures do the persuading; motion is limited to state changes with one exponential ease. The system explicitly rejects the generic SaaS landing page (gradient heroes, floating product screenshots, pricing-page energy), the sterile default docs theme (out-of-the-box Starlight with no identity), and the Linear/Vercel dark-glow lane (near-black surfaces, glowing gradients, luminous blur). Its living references are gleam.run's hand-made friendliness and axo.dev's proof that a small CLI tool can have a real designed identity.
Key Characteristics:
- Committed color: steel cobalt carries the surface; brass is the single accent voice
- Real terminal output as imagery — never fabricated, never prettified
- Documentation styled with landing-page care; docs ARE the conversion surface
- Flat, machined, exact: depth from tonal steps and 1px edges, never shadows or glow
A committed steel-cobalt system anchored at hue 230, with one warm brass accent at hue 80 — the instrument-on-steel tension.
- Harbor Steel (
{colors.bg}): the page itself. A deep blue-tinted steel, not neutral black — the brand environment, present on every screen. - Instrument Cobalt (
{colors.cobalt}): the seed color. Panel headers, selection highlights, structural emphasis on the steel field. - Cobalt Band (
{colors.cobalt-band}) and Cobalt Deep ({colors.cobalt-deep}): full-width statement bands and deep structural fills; the committed 30–60% coverage lives here.
- Signal Brass (
{colors.brass}): the single accent voice. Primary buttons, links, active nav, prompts, key table cells, theok:line. Brass Bright ({colors.brass-bright}) is its hover state only.
- Chart Ink (
{colors.ink}): body text. Verified 16.3:1 against Harbor Steel. - Ink Soft (
{colors.ink-soft}): lead paragraphs and secondary prose. - Fog Gray (
{colors.muted}): metadata, table notes, captions. Verified 9.1:1 on the background — never drops below AA. - Ink Dark (
{colors.ink-dark}): text on brass fills only. Verified 9.9:1 on Signal Brass. - Line / Line Soft (
{colors.line},{colors.line-soft}): 1px borders and dividers. All structure is drawn with these hairlines.
The Committed Surface Rule. Steel cobalt is not an accent — the surface IS the brand. Hedging back to a white page with a blue button produces exactly the sterile default docs theme this brand rejects.
The No-Glow Rule. No gradient glows, no neon edges, no luminous blur behind UI. Emphasis comes from brass, weight, and exact alignment — never from light effects.
The Ink-on-Cobalt Rule. Fog Gray fails contrast on cobalt fills (3.4:1). On any cobalt surface, text is Chart Ink or Ink Soft — never muted gray.
Display Font: Archivo Variable (with Helvetica Neue fallback), width axis stretched to 114–118% for display and headlines Body Font: Archivo Variable at normal width Label/Mono Font: Martian Mono Variable (with ui-monospace fallback)
Character: One grotesque with committed width/weight contrast, plus a wide technical mono. Archivo speaks; Martian Mono proves. The pairing contrasts on the proportion axis — expanded display against fixed-pitch evidence.
- Display (680,
clamp(2.3rem → 3.5rem), 1.12, 'wdth' 118): hero headline only. The brass sentence inside it is the page's one color-emphasis moment. - Headline (620,
clamp(1.6rem → 2.5rem), 1.12, 'wdth' 114): section headings. - Title (620, 1.3rem): phase and panel headings.
- Body (400, 1.0625rem, 1.65): prose, capped at 68ch measure (
--measure). - Label (560, 0.8125rem, Martian Mono): table headers, terminal title bars, fine print.
- Code (400, 0.875rem, 1.75, Martian Mono): code samples and terminal output; ligatures disabled globally.
The Proof-in-Mono Rule. Terminal output shown on the site is real trellis output, set in the mono, unretouched. Never fabricate or prettify command output.
The Two-Voices Rule. Archivo carries meaning, Martian Mono carries evidence. Mono never sets prose; Archivo never sets output.
Flat by default, tonal by exception. The system uses zero box-shadows — depth is conveyed by stepping surface lightness (Harbor Steel → Surface → Surface-2 → Cobalt Band) and by 1px hairline borders ({colors.line}, {colors.line-soft}). Panels read as machined plates laid on the steel field, not as floating cards. If an element looks like it's hovering, it's off-brand.
The Flat Field Rule. Surfaces are flat at rest and flat on hover. State changes recolor (brass, background tint) — they never lift, scale, or cast.
Machined and quiet: flat faces, exact 1px edges, small radii (4px controls, 8px panels), instant-feeling 160ms state changes on one exponential ease (cubic-bezier(0.22, 1, 0.36, 1)).
- Shape: small radius (
{rounded.sm}), min-height 2.9rem, weight 620 - Primary: Signal Brass fill with Ink Dark text (
button-primary); hover shifts to Brass Bright. No transform, no shadow. - Ghost: transparent with
{colors.line}border and Chart Ink text; hover recolors border and text toward brass. - Focus: 2px Signal Brass outline, 3px offset — everywhere, keyboard-visible.
A flex row: $-prompted mono command on a Surface fill, hairline border, with an attached Copy button (Surface-2 fill, 44px minimum target). On copy, the button reads "Copied" in brass for 1.6s. In the two-column hero the command wraps (pre-wrap); in install lists it scrolls. When the hero stacks at 56rem and below, its duplicate command row is hidden so the graph follows the primary actions. The Install link still leads to the full installation section.
The brand's hero imagery: a <figure> with a mono title bar ($ trellis graph — brass prompt, Surface-2 bar), real command output at 0.875rem/1.75, and an optional Fog Gray footnote. Output coloring is semantic and minimal: package names at weight 560, structural glyphs and versions in Fog Gray, success lines in brass.
Full-width tables inside a hairline-bordered, 8px-radius scroll container. Mono Fog Gray column headers on Surface-2; brass first column for file/key names; Fog Gray for failure/description columns. Row dividers are Line Soft hairlines; no zebra striping.
The configuration reference uses a 52rem content track for tables while prose stays capped at the 68ch reading measure. When the configuration keys table has less than 40rem of available width, it stacks each description below its key and requirement. The column headers remain available to assistive technology. Other tables retain their horizontal scroll containers.
Expressive Code with the vesper theme, overridden to the system: Surface background, Surface-2 tab bar, brass active-tab indicator, shadow disabled (shadowColor: transparent), Martian Mono, word wrap on by default (defaultProps: { wrap: true }). TOML section headers land near-brass, strings in the cobalt family — the frames belong to the same instrument. Terminal frames follow the site's $-prompt convention: no macOS traffic-light dots (dots are display:none'd and zeroed in styleOverrides), titles left-aligned in mono with a brass $ prefix; untitled terminal frames show a plain hairline bar.
Sticky header on an opaque Harbor Steel fill with a hairline bottom border; wordmark is the lattice glyph (brass + cobalt strokes) beside lowercase "trellis" in stretched Archivo. Links are Ink Soft at 520, brass on hover. Docs are Starlight (@astrojs/starlight), fully re-themed to this system via src/styles/starlight.css (dark-only: ThemeProvider/ThemeSelect overridden): sidebar active item gets Surface-2 fill + brass text; Pagefind search, mono "On this page" rail, heading anchor links, and a themed 404 come from the framework. The landing page keeps its own Base layout; both consume the same tokens.css.
The release announcement uses a 44px bar and a 44px dismiss target. Below 50rem, it collapses after the reader scrolls past one bar height and returns at the top of the page. It remains visible while a control inside it has focus. Explicit dismissal still persists for the current release.
No page carries a hand-maintained version number. src/lib/version.ts derives TRELLIS_VERSION from the root Cargo.toml at build time (a ?raw import), and every install command interpolates it — the site obeys the tool's own derive-don't-declare doctrine. Statements about when a feature shipped ("Trellis 0.2.0 added…") are historical facts and stay literal.
- Do keep steel cobalt carrying real surface area — bands, panels, terminal figures (The Committed Surface Rule).
- Do use real trellis output for every terminal figure, captured from an actual workspace (The Proof-in-Mono Rule).
- Do draw all structure with 1px hairlines and tonal steps; state changes recolor, never lift (The Flat Field Rule).
- Do hold WCAG AA everywhere: Chart Ink 16.3:1, Fog Gray 9.1:1, Ink Dark on brass 9.9:1 — verified numerically, re-verify when tokens move.
- Do give docs pages landing-page-level craft; the docs are the pitch.
- Don't build a generic SaaS landing page: no gradient heroes, no floating product screenshots, no pricing-page energy (PRODUCT.md anti-reference).
- Don't ship a sterile default docs theme — an out-of-the-box Starlight/Docusaurus look with no identity (PRODUCT.md anti-reference).
- Don't drift into Linear/Vercel dark-glow: glowing gradients, luminous blur, floating UI (The No-Glow Rule).
- Don't put Fog Gray text on cobalt fills — it fails contrast at 3.4:1 (The Ink-on-Cobalt Rule).
- Don't claim "simple" or "powerful" in the abstract; show the lattice before/after ledger and real config instead.
- Don't add eyebrow labels, reflex-numbered section markers, identical card grids, side-stripe borders, or box-shadows. The one numbered sequence (the command lifecycle) is numbered because it IS a sequence.