| name | Compendiq | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | Calm, dense, flat workspace over Confluence — Graphite and Paper, one Steel accent. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Creative North Star: "The Flat Instrument"
Compendiq is a calibrated workspace, not a room and not a brand film. Linear sets the bar for timing, keyboard coverage and type scale; Plane for calm neutral surfaces and row density; Notion for the document surface. The standing preference is the category convention executed at full fidelity — a first-rate modern workspace application, without irony, pastiche or smuggled quirk.
Hierarchy comes from the eight-role surface ladder, type weight, and space. Motion is a 120ms ease-out colour change on state, never entrance choreography. Brand lives in Workspace Steel, in the interactive edge, and in what is refused: no lift, no gradient fill on panes or controls, no in-page glass, no colour as the only channel for state. The outer chassis is one flat colour; the workspace card alone carries a light resting shadow.
Two themes are a product requirement. Graphite (:root) is the dark instrument; Paper is the light one. Neither is a fallback. Default follows the OS; a manual override persists per user.
Key Characteristics:
- One workhorse face (Inter Variable); JetBrains Mono only for code and data figures.
- One accent (Workspace Steel) for brand mark, primary action, links, active nav, and focus ring.
- Flat in-page surfaces; the only shadow is the overlay recipe; floating chrome may frost.
- 32px controls, 13px label floor, 44px header, dense 13–14px rows.
- WCAG 2.1 AA measured from tokens;
forced-colorsandprefers-reduced-transparencyare load-bearing.
Workspace Steel is the single brand and interaction accent. Semantic hues are reserved signals, not alternate accents. Neutrals do the spatial work.
- Workspace Steel (
primaryGraphite /primary-paperPaper): brand mark, primary buttons, links, active nav, focus ring. One hue means "you can act." Graphite Steel clears AA as text on every dark surface, so fill and ink are the same value (primary). Paper Steel is dark enough to be fill and text on white, so it needs no separate ink sibling. Ink on the Steel fill isprimary-foreground/primary-foreground-paper.
Eight production roles (ADR-010). Graphite first, Paper sibling second.
- Canvas (
canvas-graphite/canvas-paper): one flat colour for viewport gutter, left tree column, top app header. Draws the workspace card by value and by the card's light resting shadow, not by a line. - Chrome (
chrome-graphite/chrome-paper): internal panel-header bands that still need a strip (Library results headers). Not the outer frame. - Workspace (
workspace-graphite/workspace-paper): shell fill inside the card. - Pane (
pane-graphite/pane-paper): document and the attached inspector. Paper Pane is pure white. The left navigation sits on Canvas, not Pane. - Raised (
raised-graphite/raised-paper): overlay fill. Paper Raised matches Pane; separation is shadow plus interactive edge. - Ink (
ink-graphite/ink-paper): body and control text. - Muted ink (
muted-ink-graphite/muted-ink-paper): secondary labels, measured against the worst surface they land on. Paper muted ink on Canvas is the binding 4.5:1 case for 12px rail labels. - Border (
border-graphite/border-paper): structural hairline. Quiet. Never an operable edge. - Interactive border (
border-interactive-graphite/border-interactive-paper): visible edge of anything you can operate, and the overlay edge. Clears WCAG 1.4.11 (3:1) on every ground it appears on. - Hover / Pressed / Selected (
hover-*/pressed-*/selected-*): three distinct state fills. Selected is the deepest and persists; hover must never paint as selected. - Login ground (
login-ground-paper; Graphite uses Canvas): Paper-only split so the login halo can be measured without the grey frame.
- AI violet (
ai-graphite/ai-paper): AI surfaces only. - Success / connected (
success-*): healthy, connected, ok. - Warning / syncing (
warning-*): amber is reserved for warning and attention. - Danger / disconnected (
danger-*): failure and destructive actions. - Info indigo (
info-*): passive notices only — not a state, not a chip, never an affordance. Separated from Steel and AI in lightness so CVD simulation does not collapse them. - Inactive (
inactive-*): idle status. Embedding is not a hue: it resolves to body ink plus a progress affordance.
The One Accent Rule. Workspace Steel is brand and every actionable affordance. A second interactive hue is a bug.
The Second Channel Rule. Colour is never the only channel for state. Every status also carries an icon, shape, or accessible name. Links are underlined, not merely Steel.
The Status Reservation Rule. Violet, amber, green, and red are signals. They are not alternate accents and not category colour.
Display Font: Inter Variable (system-ui sans fallback). --font-display is an alias onto the same stack.
Body Font: Inter Variable (same stack).
Label/Mono Font: JetBrains Mono Variable — code blocks and every data figure (counts, percentages, IDs).
Character: One workhorse face. A workspace heading is a wayfinding label, not editorial; a second display family at 15–20px costs legibility without buying identity. Hierarchy is size, weight, and space.
- Display (600, 1.5rem, tracking -0.02em): page and panel titles in the workspace. Login heroes may go larger (up to ~4.5rem, tracking no tighter than -0.04em) without introducing a second family.
- Headline (600, 1.125rem, tracking -0.011em): section titles, prose headings.
- Title (600, 1rem): card and topology titles.
- Body (400, 0.875rem, line-height 1.5): reading copy. Prose measure 65–75ch where it is actually prose.
- Label (500, 0.8125rem / 13px, line-height 1.25rem): buttons, inputs, nav pills, stat labels. This is the control voice.
Users may swap the application face or the reading-pane face (Atkinson Hyperlegible, Source Serif 4, and others). The system default remains Inter.
The One Voice Rule. Inter carries display and body. Do not introduce a display serif or a geometric headline face for "product UI personality."
The Thirteen Floor Rule. text-xs is 13px (0.8125rem). Do not ship 11px nav pills or stat labels.
The shell is one inset card on Canvas. Destinations are tabs in the header; the route's sidebar sits on the chassis left of the card; the card is held off the frame by an 8px gap, the inset, its radius and a light resting shadow, never a hairline. Do not put the hairline back: retune Canvas or the shadow if the card stops reading as a card.
- Mobile: edge-to-edge (
inset0, shell radius 0). Header 44px (2.75rem). Destinations head the navigation drawer; the inspector is a sheet. - md (768px): 12px inset, 12px shell radius.
- xl (1280px): 16px inset, 14px shell radius. Do not invent a third breakpoint ladder.
Document pane and inspector share Pane inside the one card, split by the inspector's 1px left hairline; both panels resize from their inner edge. The header and the left navigation are transparent over the flat chassis, so the frame is one colour on every side of the card. Paper document and inspector are pure white.
Density is Plane-like: tight groups, generous separation, more space above a heading than below it. Controls are 32px tall so a button, an input, and a 28px toolbar chip share one row.
Login is not a workspace surface. It has no tree, no document, no dense rows. It uses login-ground-paper (Paper) or Canvas (Graphite) and may paint the measured halo.
The Unlined Card Rule. The workspace card and content panes are unlined. Canvas and the card's resting shadow are the boundary. Structural hairlines that remain are separators inside content (document tables use a stronger --doc-rule) and the inspector's split from the document, not frames around the work.
Lead with the tonal ladder (Canvas → Chrome → Workspace → Pane → Raised). In-page surfaces are flat: a value step plus a 1px hairline. A shadow on something that never leaves the page is the tell that the flat system was not committed to.
Raised is what leaves the page. Dialogs and opaque overlays use the Raised fill, the interactive edge, and --shadow-overlay. Floating popovers, dropdowns, and HUDs add overlay glass: 12px blur, 90% Raised fill in Graphite / 82% in Paper, rim at 18% of the interactive edge. prefers-reduced-transparency strips blur and translucency; the edge and shadow remain. The inspector tab bar is a true overlay (absolute, 42% fill, 20px blur) so content can scroll underneath.
- Overlay (
0 8px 24px -6px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4)Graphite;0 6px 16px -4px rgba(23,22,21,0.16), 0 2px 5px -2px rgba(23,22,21,0.12)Paper): popovers, dialogs, command palette, toasts, glass HUDs. Offset and soft. Not a halo. - Overlay small (shallower sibling): Library's in-flow search surface, the one in-page exception, without a simultaneous border.
- Login halo. The one declared in-page decoration: primary (or AI violet) disc at opacity 0.08, 120px blur,
z-index: -10. Measured so muted hero ink still clears 4.5:1 on the composite. Ceiling 0.08; 0.12 breaches. Nowhere else. - Workspace card shadow (owner request, 2026-09-28).
.app-workspacecarries--app-workspace-shadow: a 1px rim tracing the radius plus a soft contact and ambient shadow (5% white rim in Graphite, 4% black in Paper). Static, never grown on hover, and the only in-flow shadow. It replaced the retired chassis grey wash, whose diagonal gradient showed as a tonal band around the card's left corners.
The Overlay-Only Shadow Rule. In-flow surfaces cast nothing, except the workspace card's resting shadow. --shadow-overlay is for things that leave the page.
The In-Page Glass Ban. backdrop-filter on an in-page pane is decoration standing in for hierarchy. Glass is nm-popover-glass (and the inspector overlay override) only.
Workspace corners are tight because the rows are dense. The retired neumorphic scale (20/12/8/4) read as pillows; 10/8/6/4 is the range.
- xl (10px): overlay glass. Top of the workspace scale.
- lg (8px): in-page cards, composer (a container, not a 32px control).
- md (6px): buttons, inputs, toolbar chips.
- sm (4px): active pills inside a segmented track.
Shell radius (12px at md, 14px at xl) is the outer card only. Controls never inherit it.
Borders are 1px. Operable surfaces use the interactive token; chrome uses the quiet hairline. forced-colors: active restates a 2px ButtonText border on the same components because shadow is discarded.
The Workspace Radius Rule. 10 / 8 / 6 / 4. A 16px+ corner on a 32px control is the old pillow.
Dense and operable. 32px controls, 13px labels, interactive edge ≥3:1, no lift on hover. A row of actions is toolbar-shaped, not a card of buttons.
- Shape: 6px corners (
rounded.md), 32px tall, padding 6×12px, 13px / 500. - Primary: Workspace Steel fill, matching 1px Steel edge (so
forced-colorscannot drop the boundary), inkprimary-foreground. Hover mixes 88% Steel with foreground; active 78%. No lift, no glow, no growing shadow. - Ghost / secondary: transparent fill, interactive edge, ink. Hover is the hover state fill, not Steel — a secondary action that borrows the accent competes with the primary beside it.
- Destructive: danger fill, same box metrics as primary. Hover darkens; no glow.
- Icon button: 32px, transparent, muted ink at rest; hover uses the hover fill.
- Focus: 2px Steel outline, 2px offset, transparent outline at rest.
- Disabled: opacity 0.45, no pointer.
Transition 120ms ease-out on colour (and opacity). Never translateY or scale.
- Active pill: Pane fill on a muted track, interactive edge, ink, weight 500, 4px corners. The fill is a step up from the track; do not swap it for the selected-row fill (that measured worse against the group).
- Filter / tag chips: same outlined language as ghost, not miniature primary buttons.
- In-page card: 8px corners, Pane fill, quiet hairline, no shadow. Prominence from position, spacing, and heading weight.
- Elevated overlay: 8px corners, Raised fill, interactive edge, overlay shadow. Dialogs stay opaque.
- Glass overlay: 10px corners, translucent Raised, 12px blur, overlay shadow. Popovers, HUDs, the login sign-in card (it floats over the halo).
- Internal padding: 16–24px on a content card; 6–12px on chrome.
- Style: flat Pane fill, 6px corners, interactive edge, 13px text, 32px tall. The inset well is gone; a flat system says "type here" with a border and a placeholder.
- Focus: border to Steel plus a 1px Steel ring tight to the border — not a 2px halo bleeding off an inset.
- Placeholder: muted ink.
- Disabled: opacity 0.45.
- Composer exception: the chat/prompt wrapper uses the quiet hairline at rest (owner exception, 2026-08-31). Focus still goes Steel. Do not copy that resting border onto
nm-input,nm-select, or buttons.
- Destinations: flat tabs in the header beside the logo: icon plus label, muted ink at rest, ink with a Steel icon and a 2px Steel underline when current (
aria-current="page"). Hover is ink plus the hover fill, never the underline. - Trees / settings lists: selected row uses the selected fill, weight 500, and a 1px interactive outline (the outline is what survives
forced-colors). Hover is the hover fill — never the selected fill. - Header: 44px, Canvas, continuous with the left column and floor.
The material that leaves the page. 12px blur, 82–90% Raised, rim at 18% interactive edge, overlay shadow. Inspector tab bar is heavier frost (20px, 42% fill) because it is a sticky overlay over scrolling content. Login AuthPanel uses this surface because it floats over the halo.
- Do use Workspace Steel for brand, primary action, links, active nav, and focus — one hue.
- Do underline links; do not rely on Steel alone.
- Do pair every status hue with an icon, shape, or accessible name.
- Do keep in-page surfaces flat: value step plus hairline.
- Do put
--shadow-overlayonly on overlays; put glass only onnm-popover-glass(and the inspector overlay). - Do size controls to 32px and labels to 13px.
- Do change state in 120ms
ease-outcolour, not motion toward the cursor. - Do honour
prefers-reduced-transparency(opaque fill, no blur) andforced-colors(2px system borders). - Do measure contrast from the token file. Retune a surface and the guard re-measures.
- Don't lift, scale, or grow a shadow on hover. That is the neumorphic tell.
- Don't paint gradient fills on panes, controls, or the chassis; Steel start and end remain the same value.
- Don't put glass or
backdrop-bluron in-page chrome. - Don't use colour as the only channel for state.
- Don't use Steel for embedding, telemetry, or idle pipeline status.
- Don't use AI violet, amber, green, or red as decorative accents.
- Don't frame the workspace card with a hairline; Canvas is the boundary.
- Don't copy the composer's quiet resting border onto inputs or buttons.
- Don't introduce a second display face for workspace UI.
- Don't ship text smaller than 13px in chrome.