design

func ButtonPrimary ¶

func ButtonPrimary() []css.Rule

ButtonPrimary is the single primary action for a view: signal yellow, ink label.

One per view. If you are writing the second one, one of them is a ButtonSecondary.

func ButtonQuiet ¶

func ButtonQuiet() []css.Rule

ButtonQuiet is the tertiary action: cancel, dismiss, "show all", a row-level action. No border, no fill until hover.

Its job is to be reachable without being visible, so it costs a queue of 40 rows nothing to have a per-row action.

func ButtonSecondary ¶

func ButtonSecondary() []css.Rule

ButtonSecondary is every action that is not THE action: lane-blue outline that inverts on hover.

func Catalog ¶

func Catalog(parseSpec CatalogSpec) ui.Node

Catalog renders a whole product manifest: the result note, the labelled header strip and one line per item — or the empty state when there are none.

design.Catalog(design.CatalogSpec{
    Items:         lines,
    TotalCount:    62,
    FilterSummary: "CATEGORY DESKS",
    Label:         "Product catalog",
    EmptyTitle:    "No lines match this filter",
    EmptyBody:     "Widen the category or clear the stock filter to see the full manifest.",
    EmptyActionLabel: "Clear filters",
    EmptyActionHref:  "/shop",
})

It is a component rather than a bundle for the same reason LanePlacard is: the structure IS the element. The header strip has to share the rows' track geometry, the list needs role="list" to survive list-style:none in Safari, and the empty and filtered states have to exist. Three call sites reassembling that by hand is three chances to ship a catalog that is a stack of links with no columns and a blank page when a filter misses.

The three states this closes, which the brief called out and which hand-rolled catalogs always drop:

• EMPTY: no items at all -> the void, with copy and one recovery action.
• FILTERED: fewer items than TotalCount -> a result note saying so, so a narrow filter does not read as an empty shop.
• ORPHANS: structurally impossible. Rows are full-width, so four items is four rows. There is no last-row-with-two-holes case to handle, which is the whole reason a 3-column grid was rejected.

func CatalogActionLabel ¶

func CatalogActionLabel() []css.Rule

CatalogActionLabel is the trailing affordance: "VIEW →", "NOTIFY ME". It is a <span>, never a <button> — see CatalogLine for the argument. It darkens and underlines when the row is hovered, driven from CatalogRow, and it removes itself in print.

func CatalogAvailability ¶

func CatalogAvailability() []css.Rule

CatalogAvailability is the promoted "can I have it" cell: a StatusChip over a mono hub/promise line. It carries a leading hairline on wide viewports and a rule above it on narrow ones.

This column is the reason the whole primitive exists. If you are tempted to move it after price, or to drop it into the summary, re-read the file header: Atlas's product is not a catalog, it is an answer about availability, and the catalog is where that answer either shows up or does not.

func CatalogEmpty ¶

func CatalogEmpty() []css.Rule

CatalogEmpty is the void: no results, no rows, nothing printed on the sheet.

The empty result set is a state a catalog is in constantly (every over-narrow filter produces one) and it is the state most likely to be left as a bare string, so it is part of the primitive rather than left to the caller. Catalog renders it automatically when there are no items, which is the point — a caller cannot forget a state the component owns.

func CatalogEmptyBody ¶

func CatalogEmptyBody() []css.Rule

CatalogEmptyBody is the sentence under the empty state's heading: what happened and what to do about it. Prose, because it is a sentence someone wrote.

func CatalogHeaderStrip ¶

func CatalogHeaderStrip() []css.Rule

CatalogHeaderStrip is the labelled column header above the manifest, sharing the row's exact track geometry. Hidden below 960px, where the tracks restack.

It is not decoration. Without it the availability column is an unexplained pair of mono strings, and the "reads as a table" claim this primitive makes is false.

func CatalogIdentity ¶

func CatalogIdentity() []css.Rule

CatalogIdentity is the "what is this" cell: title, then the SKU/category line, then the summary.

func CatalogIdentityMeta ¶

func CatalogIdentityMeta() []css.Rule

CatalogIdentityMeta is the mono line under the title: SKU, category, any other code. Set it as a Cluster of spans rather than one pre-joined string, so the separator is a styling decision and the SKU stays selectable on its own.

func CatalogLine ¶

func CatalogLine(parseItem CatalogItem) ui.Node

CatalogLine renders one product manifest line.

Why the row is a link and the action is a span ¶

The row is a single <a> laid out as a grid, and the trailing "VIEW →" is a <span> inside it, not a <button>. Three alternatives were considered:

• Row as a container, title as the link, plus a real action button. Correct HTML, but it gives a mouse user an 800x96 target of which only the title is clickable, which everyone finds infuriating and which every catalog on the web has therefore abandoned.
• Row as a link WITH a nested button. Invalid: interactive content cannot nest inside an <a>. Browsers recover unpredictably and keyboard order gets strange.
• Row as a link, action as a label. One tab stop per product, whole row clickable, no nested interactive content, and the label still tells the reader what the row will do — which is the only job it had.

The third is what this is. A future contributor wanting an "Add to cart" button in the row should note that adding it requires unpicking the row-as-link decision, and that the right place for a second action is the product page, not twenty-four rows.

Accessibility ¶

The row's accessible name is a spelled-out sentence ("Meridian Desk, SKU-40192, $1,240.00, IN STOCK from IL-HUB, promise 2026-08-04"). Read in DOM order the row would announce as a run of disconnected fragments, and the "·" separators would be read as punctuation noise, so the label is written explicitly — the same cost the lane placard pays for being graphic. The "·" glyphs and the "→" are aria-hidden.

func CatalogManifest ¶

func CatalogManifest() []css.Rule

CatalogManifest is the <ul> holding the product lines. Apply it to the list element; the rows carry their own hairlines, so there is no gap here — the lines are ruled, not spaced, which is what makes the column reads work.

Put it inside a SurfaceFlush so the rows reach the sheet edge, exactly as a table does. Do NOT put it inside a padded Surface: a manifest inside a 16px gutter wastes the alignment it was chosen for.

func CatalogPrice ¶

func CatalogPrice() []css.Rule

CatalogPrice is the price cell: mono, tabular, one step up, right-aligned into a column.

For a line the buyer cannot buy, compose it with StatusValue(ToneNeutral) rather than adding a second bundle — the price of something unavailable is context, not content, and graphite is the package's only de-emphasis tool. CatalogLine does this for you.

func CatalogPromise ¶

func CatalogPromise() []css.Rule

CatalogPromise is the mono hub-and-date line under the availability chip: "IL-HUB · 2026-08-04". Both are machine facts, so Data — and being mono and tabular they align down the column, which is what makes twelve promise dates comparable at a glance. Format the string yourself; this package does not know Atlas's date format.

func CatalogResultNote ¶

func CatalogResultNote() []css.Rule

CatalogResultNote is the count line above the manifest: "14 OF 62 LINES · CATEGORY DESKS". It is Data because a count and a filter expression are machine facts.

It exists because a filtered result set that does not say it is filtered is the most common way a catalog lies to a buyer: twelve products where there are sixty-two, with nothing on screen to say why, reads as "this shop is nearly empty" rather than as "your filter is narrow". The count is the cheapest possible fix and it belongs to the manifest, not to the filter bar — the filter bar is what the buyer already stopped looking at.

func CatalogRow ¶

func CatalogRow() []css.Rule

CatalogRow is the manifest line, for callers composing their own row body. Apply it to an <a> — the row IS the link.

CatalogLine is the shape you almost always want; see its doc for why the row is a link rather than a container with a button in it.

func CatalogSummary ¶

func CatalogSummary() []css.Rule

CatalogSummary is the product blurb: prose, graphite, clamped to two lines, hidden on narrow viewports. The clamp is not cosmetic — see the bundle.

func CatalogThumb ¶

func CatalogThumb() []css.Rule

CatalogThumb is the product image cell: a square on pressed paper with a hairline, cropped rather than stretched. Apply it to an <img>.

It is pressed paper (not white) and it has a hairline, because an image with no frame on a manila page reads as a hole in the page. Give the <img> width and height attributes so the row does not reflow when the image loads, and loading="lazy" — a catalog is the one Atlas surface with twenty-four images below the fold.

func CatalogThumbPlate ¶

func CatalogThumbPlate() []css.Rule

CatalogThumbPlate is the thumbnail slot when there IS no image: a bin label.

This matters more than it sounds, because Atlas's product data has no image field — repository.Product is SKU, slug, title, category, price, status, summary. A catalog primitive whose thumbnail column only works once somebody ships an image pipeline is a primitive that ships as an empty grey column.

The alternative to a grey box with a picture icon is the one a warehouse actually uses: print the code on a plate and stick it on the bin. So the empty state of the image cell is the SKU's distinguishing segment, set in mono on pressed paper — which is legible, scannable, tells the reader something true, and stops looking like a broken image. When real photography arrives, the same slot takes CatalogThumb and nothing else changes.

func CatalogTitle ¶

func CatalogTitle() []css.Rule

CatalogTitle is the product name: proportional, semibold, ink. See the bundle for why it is Prose rather than Display — that argument is the one most likely to be "corrected" by someone applying the display rule mechanically.

func CellMeta ¶

func CellMeta() []css.Rule

CellMeta de-emphasizes a cell that is context rather than content: a timestamp beside an event, a unit beside a quantity. Graphite is the only de-emphasis tool — there is no opacity scale, because translucent text over a zebra stripe has a different contrast on every other row.

func Class ¶

func Class(parseBundles ...[]css.Rule) string

Class folds one or more design bundles into a single hashed class name, for html.Props{Class: ...} call sites — which is how Atlas's markup is written.

html.Props{Class: design.Class(design.Surface(), design.Stack(design.Space4))}

Folding everything into ONE class (rather than concatenating several class names) is deliberate: conflicts between bundles then resolve by argument order, last one wins, which a reader can see. Two class names on one element would resolve by stylesheet emission order instead, which nobody can see.

The parameter is []css.Rule rather than ...any so the call site stays typed. To add a one-off rule, wrap it: design.Class(design.Surface(), []css.Rule{css.MarginY(design.Space5)}).

func Cluster ¶

func Cluster(parseGap css.Length) []css.Rule

Cluster is a horizontal group that wraps: a button row, a chip row, a set of meta fields.

It wraps by default rather than scrolling or overflowing, which is most of what makes this design system survive 380px without per-component media queries.

func ConsoleRail ¶

func ConsoleRail() []css.Rule

ConsoleRail is the persistent left navigation rail: a torn-edge column of manifest lines. Below 960px it becomes a horizontally scrolling strip with the same markup and the tear edge on the bottom. It is hidden in print.

Compose it as RailPlate, then RailGroupLabel / RailLink+RailCode groups:

html.Aside(html.Props{Class: design.Class(design.ConsoleRail())},
    design.RailPlateBlock("Console", "IL-HUB"),
    html.Div(html.Props{Class: design.Class(design.RailGroupLabel())}, html.Text("Inbound")),
    html.A(html.Props{Href: "…", Class: design.Class(design.RailLink())},
        html.Span(html.Props{}, html.Text("Receiving")),
        html.Span(html.Props{Class: design.Class(design.RailCode())}, html.Text("RCV")),
    ),
)

func ConsoleShell ¶

func ConsoleShell() []css.Rule

ConsoleShell is the internal two-column frame: rail, then content column.

html.Div(html.Props{Class: design.Class(design.ConsoleShell())},
    html.Aside(html.Props{Class: design.Class(design.ConsoleRail())}, …),
    html.Main(html.Props{Class: design.Class(design.ContentColumn())}, …),
)

func ContentColumn ¶

func ContentColumn() []css.Rule

ContentColumn is the console's content area: full-width, uncapped, with gutters that tighten on narrow viewports. Cap paragraph width with Measure, not this.

func Data ¶

func Data(parseStep TypeStep) []css.Rule

Data is the monospace role, and it is the load-bearing rule of this design system: EVERY machine fact is Data. SKU, hub code, lane id, promise date, ETA, quantity, price, status code, order number, any identifier.

Mono here is not a stylistic tic, it is three functional guarantees:

• Fixed advance width, so a column of SKUs or quantities aligns even without a table wrapper, and a wrapping id breaks at a predictable place.
• Combined with tabular figures, one changed digit occupies exactly one glyph slot, so a transposition (1042 vs 1024) is visible rather than plausible.
• It marks provenance. A mono string is something the system knows; a proportional string is something a person said. That distinction is the difference between "SHORT 4 UNITS" as a computed discrepancy and as a note somebody typed, and in a warehouse app it is the distinction that matters.

If you are reaching for Data on a sentence, or Prose on an identifier, the hierarchy will read as noise. There is no third option for either.

func Display ¶

func Display(parseStep TypeStep) []css.Rule

Display is the condensed, heavy, uppercase role: page titles, section titles, eyebrows, button labels, table headers. It NAMES a region of the page.

Use it for labels, never for content. A sentence set in condensed uppercase is unreadable past about six words, which is a useful natural limit: if the string does not fit the role, the string is prose.

(The name shadows nothing in this package. It is unrelated to css.Display, the display property.)

func Divider ¶

func Divider() []css.Rule

Divider is a hairline rule, for an <hr> or a plain div.

This is the primary separation tool in Atlas, and it is worth being explicit about why it beats a second box: a rule costs one pixel and says "these are different sections of the same thing", while a box costs a border, a radius, two gutters and says "these are different things". Inside one Surface, the first statement is almost always the true one.

func Edge ¶

func Edge() css.Color

Edge is the CONTROL boundary color: the 1px border that identifies an input, a select or a textarea as something you can type into.

It exists because Hairline was doing both jobs and could only be tuned for one. WCAG 1.4.11 requires 3:1 for "visual information required to identify user interface components", and an unfilled text field IS identified by its border and nothing else — so a 1.5:1 hairline field is, measurably, an invisible control. It looked fine in review because a reviewer already knows where the fields are.

Edge measures 3.46:1 against paper and 3.15:1 against paper-sunk in light, and 3.62:1 / 3.33:1 in dark. It is NOT used for paperwork rules; using it there would undo the quiet the hairline buys.

func Eyebrow ¶

func Eyebrow() []css.Rule

Eyebrow is the small uppercase label above a title: "RECEIVING", "PROMISE DATE", "LANE 4471". It is graphite, never a hue.

The previous design used an orange eyebrow, a teal badge and a yellow button on the same screen — three saturated accents with no relationship, which is how a page ends up with three competing focal points and therefore none. An eyebrow's job is to be legible and quiet; if it needs a color, what it actually needs is to be a StatusChip.

func Field ¶

func Field() []css.Rule

Field is the label-above-control wrapper.

Labels go above, never beside and never floating inside. Beside costs horizontal room the console does not have at 380px; floating-inside labels disappear the moment the field has a value, which is exactly when an operator re-reads the form to check what they typed.

func FieldError ¶

func FieldError() []css.Rule

FieldError is the validation message under a control.

It is one of only three places oxide appears (here, StatusChip/StatusValue with ToneException, and a destructive confirmation), which is what keeps oxide meaning "a human needs to look at this". Prose rather than Data, because a validation message is a sentence someone wrote. Pair it with aria-invalid and aria-describedby; color is never the only signal.

func FieldHint ¶

func FieldHint() []css.Rule

FieldHint is the helper line under a control. Wire it up with aria-describedby — a visually adjacent hint is not an announced hint.

func FieldLabel ¶

func FieldLabel() []css.Rule

FieldLabel is the label above a control: condensed uppercase graphite, the same voice as a table header, because a label and a column header do the same job.

Use a real <label for="..."> element. The style carries no association; the attribute does.

func Graphite ¶

func Graphite() css.Color

Graphite is secondary text: meta, labels, units, timestamps, table headers. It is the only de-emphasis tool in the system — there is no opacity scale, because translucent text over a zebra stripe changes contrast per row.

func Hairline ¶

func Hairline() css.Color

Hairline is the 1px rule color. Nearly every separation in Atlas is a hairline; see Divider for why that is the answer instead of another box.

Hairline is DECORATIVE separation and deliberately sits below the 3:1 non-text contrast threshold (it measures ~1.5:1 against paper in both themes). That is correct and intentional: a rule between two table rows carries no information the row layout does not already carry, so WCAG 1.4.11's "purely decorative" exclusion applies, and a 3:1 separator would be a mid-grey line under every row — the page would read as a grid of cells rather than as printed paperwork.

The moment a 1px line becomes the thing that tells a user "this is a control", that exclusion stops applying. Use Edge there instead. TestTokenContrastHoldsAA pins both halves of this split.

func Ink ¶

func Ink() css.Color

Ink is primary text and heavy rules. Pair it with Paper for body copy.

func Input ¶

func Input() []css.Rule

Input is the text control for WORDS: search, names, titles, notes. Proportional.

InputData is the text control for MACHINE FACTS: SKU, hub code, quantity, promise date, lane id. Monospace and tabular.

The split is not cosmetic. It is the same information architecture the display / prose / data roles encode (see the package doc), pushed into the form layer, where it does real work: a mono SKU field makes a transposed character visible while the operator is still typing, and a tabular quantity field lines up down a column of repeated rows in a receiving form.

Both apply to <input>, <select> and <textarea>.

func InputData ¶

func InputData() []css.Rule

func Install ¶

func Install()

Install emits Atlas's global foundation. Call it exactly once at startup, in both lanes (server bootstrap and wasm main), before the first render.

It is idempotent: css.Global dedupes on (selector + rules) content, so a second call emits nothing. It is also cheap to call again after css.Reset() in a test, which is why the token block is NOT wrapped in a sync.Once — a Once would leave a test with primitives referencing tokens that no longer exist.

Order matters and is the conventional cascade order:

1. css.Preflight — the framework's reset. Reused rather than reimplemented: box-sizing, margin zeroing, `font: inherit` on form controls, and `font-size/font-weight: inherit` on headings. That last one is what lets Display(StepSubhead) on an <h2> actually mean something instead of fighting the UA stylesheet.
2. The :root token block, then the dark-mode override of the same names.
3. The element baseline (html/body/table/form defaults).
4. The accessibility floor (focus ring, selection).
5. The print layer (see print.go) — LAST, because it is a third :root token block that has to beat both the light and the dark ones. A dark-mode user printing a receipt still wants ink on paper, and both media queries can match at once, so the tie is broken by emission order.

CONVERSION NOTE: Install assumes it owns the base layer. While Atlas still loads examples/static/css/tailwind.css and example-shell.css, calling Install will emit a second, competing reset. Remove those two stylesheets in the same change that wires this in.

func Lane ¶

func Lane() css.Color

Lane is placard blue: structure, links, focus rings, "pending / in the system". It is the one hue allowed to appear for non-status reasons, and only for structure — a link, a focus ring, a current-page marker. Not for filling shapes.

func LanePlacard ¶

func LanePlacard(parseSpec PlacardSpec) ui.Node

LanePlacard renders the signature dock tag: ORIGIN → DEST, promise date, lane id and posture, on an inked perforated bar.

design.LanePlacard(design.PlacardSpec{
    OriginHub: "NJ-HUB",
    DestHub:   "IL-HUB",
    Promise:   "2026-08-04",
    LaneID:    "LN-4471",
    Posture:   design.PostureOnLane,
})

It is provided as a component rather than as a bundle because the structure is the element: the hole, the perforation, the route/meta/posture ordering and the accessible label all have to hold together, and four call sites reassembling that by hand is four chances to ship a placard that reads as a dark banner.

Accessibility: the bar is a role="group" carrying a spelled-out label ("Lane NJ-HUB to IL-HUB, promise 2026-08-04, posture ON LANE"), and the "→" glyph is aria-hidden. A screen reader gets the sentence; a sighted operator gets the tag.

func Link ¶

func Link() []css.Rule

Link is an inline link: lane blue, underlined.

It stays underlined at rest. In a dense manifest full of mono identifiers, color alone does not distinguish a link from a status value, and removing the underline is the most common way an app becomes unusable for a colorblind operator.

func ManifestRule ¶

func ManifestRule() []css.Rule

ManifestRule is the heavy 2px ink rule: under a page title, above a total, closing a section. It is the design system's only "loud" structural mark besides the lane placard, and it is what makes a screen read as a printed manifest.

One per region at most. Two heavy rules in the same view cancel each other out and you are back to uniform weight.

func Measure ¶

func Measure() []css.Rule

Measure caps a text block at ~68 characters, the readable line length.

It exists so the content column can be uncapped. A max-width on the column would make every page a centered strip of content with dead space beside it — the generic dashboard look — while an uncapped column with Measure on its prose gets full-width tables AND readable paragraphs. Apply it to paragraphs, not to containers.

The `ch` unit has no typed constructor, so this goes through css.RawLength — which is the typed escape hatch, not css.Raw, so the value still flows into MaxWidth as a Length.

func NumericCell ¶

func NumericCell() []css.Rule

NumericCell right-aligns a quantity, price or count and pins it to tabular figures. Apply it to the <th> in the header AND every <td> in the column — a right-aligned column under a left-aligned header reads as broken.

Right alignment is not a preference: it puts the units digit of every number in the same column, so magnitude is readable as a shape and 1,000 cannot be mistaken for 100 at a glance. Every numeric column in Atlas gets this.

func PageHead ¶

func PageHead() []css.Rule

PageHead is the title block at the top of a route: eyebrow, title, and the heavy ink rule that closes it.

The rule is what makes the page start. It is the one heavy mark most Atlas pages get, and pairing it with PageTitle means a route cannot accidentally ship a title that floats without a baseline.

func PageTitle ¶

func PageTitle() []css.Rule

PageTitle is the route title: condensed, heavy, uppercase, fluid between 24px and 30px so it survives a 380px viewport without a media query.

func Paper ¶

func Paper() css.Color

Paper is the page surface: cool manila stock. Deliberately not cream — cream plus a serif plus terracotta is a different (and by now very familiar) look, and Atlas is industrial paperwork, not a stationery brand.

func PaperSunk ¶

func PaperSunk() css.Color

PaperSunk is the recessed shade of paper: table zebra stripes, the console rail, input-ish regions. It is one step of value, not a new hue, so a stripe reads as "same paper, pressed" rather than as a second surface.

func PlacardBar ¶

func PlacardBar() []css.Rule

PlacardBar is the inked dock-tag bar with the punched hole and the perforated tear edge, for callers composing their own placard body. LanePlacard is the shape you almost always want.

Place it directly on Paper — the punch and the perforation are painted in the paper token, so on a Recess background they will read a shade off.

func PlacardBg ¶

func PlacardBg() css.Color

PlacardBg and PlacardFg are the lane placard's bar and text colors.

They are exported so a caller composing a custom placard body (see PlacardBar) stays on these two tokens rather than reaching for Ink/Paper. That distinction matters precisely in dark mode: light-mode placard-bg IS ink, so Ink() would look correct in review and then render a full-brightness bar in a dark UI.

func PlacardFg ¶

func PlacardFg() css.Color

func PrimaryActionOnly ¶

func PrimaryActionOnly() css.Color

PrimaryActionOnly is safety yellow, and the name is awkward on purpose.

There is exactly ONE primary action per view, and this is its color. Written at a call site that is not that action — css.Bg(design.PrimaryActionOnly()) on a badge, an icon, a chart series — the name reads as a lie, which is the whole mechanism. The previous design used this hue as one of three ornamental accents and consequently had no primary action anywhere.

In practice you should not need this at all: use ButtonPrimary, which is the only primitive that spends it.

func PrintOnly ¶

func PrintOnly() []css.Rule

PrintOnly reveals an element only in print.

Freight paperwork has a footer the screen does not need and the paper cannot do without: who printed it, when, from which hub, and the document id. A printed page that cannot be traced back to its source is not paperwork, it is a photocopy.

html.Div(html.Props{Class: design.Class(design.PrintOnly(), design.Data(design.StepMicro))},
    html.Text("RCV-ILLINOIS-001 · IL-HUB · PRINTED 2026-07-26"))

func Prose ¶

func Prose(parseStep TypeStep) []css.Rule

Prose is the proportional role: every sentence a human wrote to be read.

The brief calls this role "Body". It is exported as Prose because design.Body() reads like the <body> element, and because "prose" names the thing being styled — running text — which is the test a caller should apply: if it is a sentence, it is Prose; if it is a machine fact, it is Data.

func ProseCell ¶

func ProseCell() []css.Rule

ProseCell is the ONE documented exception to "every table cell is mono": a cell holding a sentence — an operator note, a rejection reason, a product description.

It exists because the alternative is worse. Without it, a 30-word note in mono either blows the column out or wraps into a wall of fixed-width text, and someone eventually "fixes" that by making the whole table proportional, which costs the column alignment the table was chosen for. One opt-out, named for what it is.

func RailCode ¶

func RailCode() []css.Rule

RailCode is the mono route code at the trailing edge of a rail item ("RCV", "PO", "INV", "XFER"). Hidden in the narrow horizontal strip.

This is the mark that makes the rail read as a manifest column rather than as a generic nav: RailLink is already justify-between, so a label plus a RailCode puts every code in the same trailing column, and a column of fixed-advance-width codes aligns. It is the same argument the package makes for putting SKUs in mono, applied to the frame.

func RailGroupLabel ¶

func RailGroupLabel() []css.Rule

RailGroupLabel is a section label inside the rail ("INVENTORY", "INBOUND", "SETTINGS"). It hides itself in narrow mode, where grouping no longer reads.

func RailLink ¶

func RailLink() []css.Rule

RailLink and RailLinkCurrent are the rail's navigation items. Exactly two states: there is no hover-only "active-ish" third style, because the only question a rail item answers is "am I here or not".

Pair RailLinkCurrent with aria-current="page" on the element — the inset bar is a visual marker and carries no semantics on its own.

func RailLinkCurrent ¶

func RailLinkCurrent() []css.Rule

func RailPlate ¶

func RailPlate() []css.Rule

RailPlate is the rail's head block: which console this is and which hub it is speaking for. Pair Eyebrow with a Data code inside it, or call RailPlateBlock for the assembled shape.

It carries the rail's only structural mark besides the perforation, and that mark is a hairline on purpose. See the bundle for the argument against a 2px rule here.

func RailPlateBlock ¶

func RailPlateBlock(parseName string, parseHubCode string) ui.Node

RailPlateBlock assembles the rail head: an eyebrow naming the console and a mono hub code under it.

design.RailPlateBlock("Operations console", "IL-HUB")

It is a component for the same reason LanePlacard is: the two-line eyebrow/code pairing is the thing that makes the rail read as a placard column, and three call sites reassembling it by hand is three chances to ship a rail with a bold label and no code, which is just a nav header again. Both strings are caller-supplied — the design system does not know which hub you are standing in.

func RailPlateCode ¶

func RailPlateCode() []css.Rule

RailPlateCode is the hub code on the rail plate: mono, ink, slightly tracked. It is the loudest thing in the rail and it is still only 13px — the rail's job is to be unmistakably Atlas, not to be seen first.

func RailWidth ¶

func RailWidth() css.Length

RailWidth is the console rail's width as a typed length, for callers that need to reserve or offset by it.

func Recess ¶

func Recess() []css.Rule

Recess is pressed paper: a filter bar, a raw payload, a diff, a form region.

Use it for content that is INPUT to the page rather than output of it. Do not use it to group things a second time inside a Surface — that is the nested-card move wearing a different background, and the reason Recess has no border or radius is to make that misuse look wrong immediately.

func ScreenOnly ¶

func ScreenOnly() []css.Rule

ScreenOnly hides an element in print. It is the escape hatch that lets this package keep its global print layer tiny.

Use it on chrome: a filter bar, a pagination row, a toolbar, a "show all" affordance, a live search box, a toast region. Do NOT use it on a form the operator filled in — the whole point of printing a receiving document is the values that were typed into it, and the design system has no way to tell those two Recess blocks apart. That judgement is the caller's, which is why this is a primitive and not a heuristic.

html.Div(html.Props{Class: design.Class(design.Recess(), design.Cluster(design.Space3), design.ScreenOnly())}, filters…)

func SectionTitle ¶

func SectionTitle() []css.Rule

SectionTitle is a heading inside a page region. There is no third heading level: if a page needs one, it needs to be two pages or two Surfaces.

func SignalFgOnly ¶

func SignalFgOnly() css.Color

SignalFgOnly is the label color for the one primary action, and like PrimaryActionOnly the name is awkward on purpose: it is the ONLY correct foreground for a signal-yellow fill and it is correct for nothing else.

Do not substitute Ink(). Ink inverts between themes and signal does not, so Ink-on-signal measures 9.18:1 in light and 1.36:1 in dark. This token is pinned near-black in BOTH themes, which is the whole point of it existing.

func SplitRow ¶

func SplitRow(parseGap css.Length) []css.Rule

SplitRow is a Cluster whose children push apart: a title on the left, actions on the right, collapsing to a wrapped stack when there is no room.

It exists because "header row with actions" appears on nearly every Atlas page and hand-rolling it invites a justify-between that does not wrap, which is a horizontal scrollbar at 380px.

func Stack ¶

func Stack(parseGap css.Length) []css.Rule

Stack is a vertical flow with a uniform gap: the other answer to "these need separating".

Gap, not margin, deliberately. Margins collapse, they double up between siblings, they need :last-child resets, and they leak out of their container. A flex gap does none of that, so vertical rhythm becomes a property of the container — one place to change it — instead of a property each child has to remember.

Pass a Space constant. Any css.Length compiles, but an off-scale value mints another hashed class and puts the page slightly out of rhythm.

func StatusChip ¶

func StatusChip(parseTone StatusTone) []css.Rule

StatusChip is the status badge, driven by a semantic tone rather than a color.

html.Span(html.Props{Class: design.Class(design.StatusChip(design.ToneException))}, "SHORT 4")

Supply the label yourself — the words are domain vocabulary, and Atlas's are better than any generic set ("SHORT 4", "HELD AT HUB", "CLOSED CLEAN"). Color is a second channel on top of the words, never the only channel: a chip whose meaning is carried by hue alone fails for a colorblind operator and in a printed manifest.

func StatusException ¶

func StatusException() css.Color

StatusException is oxide: a discrepancy, a short shipment, a failed check, a flag. It is a STATUS SEMANTIC, never decoration — the name says "exception" and not "red" so that using it for a decorative accent reads as a false claim about the data. Prefer StatusChip / StatusValue with ToneException, which is how a status is supposed to reach the screen.

func StatusValue ¶

func StatusValue(parseTone StatusTone) []css.Rule

StatusValue tones a bare value rather than wrapping it in a chip: a negative on-hand quantity in a table cell, an overdue promise date, a variance figure.

It sets color and weight only, so it composes over a table cell without disturbing the cell's alignment or family. Use it when the number IS the status — a chip beside a number that already says "-4" is redundant, and a dense manifest cannot afford redundancy.

Same contract as everything in this file: a tone, never a color.

func StatusVerified ¶

func StatusVerified() css.Color

StatusVerified is verify green: approved, confirmed, received clean, closed clean. Same contract as StatusException — a semantic, not a palette entry. Green on an Atlas screen is a claim that something was checked and passed.

func StorefrontHeader ¶

func StorefrontHeader() []css.Rule

StorefrontHeader is the public shell's sticky header bar. Pair it with StorefrontHeaderInner for the width-constrained row inside.

func StorefrontHeaderInner ¶

func StorefrontHeaderInner() []css.Rule

StorefrontHeaderInner is the centered row inside StorefrontHeader. Unlike the console's content column this one IS capped: the storefront is a document, and a document's header should align with the document.

func StorefrontMain ¶

func StorefrontMain() []css.Rule

StorefrontMain is the public content column: capped, centered, with generous between-section spacing (Space7, versus the console's Space5 — the storefront is read, the console is scanned).

func Surface ¶

func Surface() []css.Rule

Surface is the one flat paper plane: hairline border, 2px radius, no shadow, no gradient. Use it once per page region.

Do not nest it. See the file comment for why the alternatives (Divider, Stack) are the right instinct instead.

func SurfaceFlush ¶

func SurfaceFlush() []css.Rule

SurfaceFlush is Surface without padding, for content that should reach the hairline: a data table, a full-width list, a lane placard row.

This is not a second card style. It is the same plane with the gutter removed, because a dense table inside 16px of padding wastes the density it was chosen for.

func Table ¶

func Table() []css.Rule

Table is the dense manifest table. Apply it to the <table> element; thead, tbody, th and td are styled for you, so the markup stays plain and semantic.

html.Div(html.Props{Class: design.Class(design.SurfaceFlush())},
    html.Div(html.Props{Class: design.Class(design.TableScroll())},
        html.Table(html.Props{Class: design.Class(design.Table())}, …),
    ),
)

func TableScroll ¶

func TableScroll() []css.Rule

TableScroll is the horizontal scroll container a wide table needs on a narrow viewport. This is how a 14-column manifest survives 380px: the table keeps its columns and the container scrolls, rather than the table reflowing into an unreadable stack of label/value pairs.

An overflow container with no tab stop is a keyboard trap in reverse — the overflowing content is unreachable without a mouse — so give the element role="region", an aria-label, and tabindex="0":

html.Div(html.Props{
    Class: design.Class(design.TableScroll()),
    Role:  "region",
    Raw:   map[string]any{"tabIndex": 0},   // NOT Props.TabIndex — see below
    Aria:  map[string]string{"label": "Discrepancy lines"},
}, table)

The tabindex has to go through Raw. html.Props silently omits a zero-valued TabIndex (html/html.go:59), and zero is precisely the value a scroll region needs, so Props{TabIndex: 0} renders no attribute at all and the region stays unreachable. This was found by asserting on rendered markup, not by reading the API. (Note the SSR serializer emits the Raw key verbatim, so the markup reads tabIndex="0"; HTML attribute names are case-insensitive, so that is correct, just unusual to see.)

func TokenNames ¶

func TokenNames() []string

TokenNames returns every custom property this design system defines, in declaration order. Install emits exactly this set, and TestEveryReferencedTokenIsDefined walks it to prove no primitive references a name that :root never defines.

That test exists because of a specific, expensive class of bug: var(--typo) resolves to nothing, the declaration is dropped, and the element silently inherits — so a misspelled token looks like a layout bug, not a typo. A var(--name, fallback) would hide it even better. This package uses no fallbacks and proves the names instead.