COMPONENT REFERENCE

DESIGN SYSTEM

Canonical reference for governed ERP.AI and Neo public-site primitives. Use it to check ownership, states, token names, aliases, and migration rules before adding a new button, menu, card, hero, icon, or section pattern.

Review Buttons Inspect Tokens
ERP.AI BRUTALIST TOKENS
Radius
0
Border
1PX
Chrome
SHARED
Owner
@LAB/CHROME
01 PRINCIPLES

Visible Structure, Sparse Accent, No Soft Corners

The system reads like an engineering catalog. Borders carry layout, red carries action, and typography separates operator labels from body prose.

GRID

Sections Stay Flat

Page sections are full-width bands with capped inner content. Cards are reserved for repeated items and framed tools.

CTA

One Primary Action

The red button is the dominant choice. Secondary actions use beige or ghost treatment based on weight.

ICON

Tabler, Not Glyphs

Arrows, checks, carets, and utility symbols render as icons so scale, stroke, and placement are controllable.

02 GOVERNANCE

Where The Primitive Lives

Shared primitives are documented once, styled once, and reused through aliases while old templates migrate. App CSS can place a primitive, but cannot redefine it.

SOURCE

Button Macro

packages/chrome/src/_includes/macros/button.njk

  • Emits .btn plus variant, size, loading, and icon-only classes.
  • Use for forms, tools, compact chrome controls, and standard actions.
SOURCE

Shared CTA CSS

packages/chrome/src/assets/css/chrome.css

  • Owns .system-cta-*, .system-menu*, .system-meta-row*, and migration aliases.
  • Use for hero CTAs, download menus, release rows, and shared chrome affordances.
APP CSS

Layout Context Only

apps/web-lab/src/assets/css/components.css
apps/web-neo/src/assets/css/components.css

  • May define page sections, local grids, cards, and preview exceptions.
  • Must use core tokens and avoid hardcoded CTA colors, arrows, or spacing.
03 BUTTONS

Action Hierarchy

Primary, secondary, ghost, menu, loading, and icon-only actions must be visually distinct before a visitor reads the label, with accessible states built in.

Primitive Class Use
Base primary .btn--primary Main command in a tool, form, or compact UI surface.
Base secondary .btn--secondary Neutral peer action with lower color weight.
Base outline .btn--outline Utility control, icon-only button, or low-risk action.
Hero primary CTA .system-cta-primary One dominant conversion action per hero or action group.
Hero secondary CTA .system-cta-secondary Second human choice with the same footprint as primary.
Ghost/menu CTA .system-cta-ghost Tertiary command, low-weight menu trigger, or inline CTA.
States

Hover and focus must use tokenized color, border, shadow, and outline values. Disabled buttons set aria-disabled or disabled, loading buttons use aria-busy, and icon-only buttons require an accessible name.

PRIMARY
Download For macOS

Main conversion action. Red surface, hard shadow, icon sized to the label.

TERTIARY

Menu trigger or low-emphasis command. Text treatment, no box.

NAV CTA
Start Free

Compact chrome action. It can be red because it sits outside content hierarchy.

ICON ONLY

Use for tool controls when the icon is already familiar.

LOADING

Loading actions set aria-busy, show the spinner, and block repeat activation.

04 ICONS

Large, Unboxed System Marks

Icons can stand alone when they describe a concept, metric, or section. Keep them unboxed unless the element is an actual button or tool control.

API Surface

Large outline icon, no square frame, no decorative card chip.

Governance

Use the icon as a label anchor, then let text carry the detail.

Automation

Stroke weight remains Tabler default. Size changes, stroke does not.

Operations

Use boxed icon buttons only for clickable controls.

05 QUOTES

Pullquotes And Rule Notes

Quote treatments use the established web-lab pattern: decorative glyph, serif italic copy, and mono attribution. Rules and audit notes use compact callouts instead of masquerading as quotes.

PULLQUOTE

Your agent's relationship with ERP.AI is a bearer token and an HTTP call.

The BYOA principle

Use inside editorial sections when a sentence deserves a deliberate dwell point.

RULE NOTE

Use when the content is operational guidance rather than an editorial sentence.

06 EYEBROWS

Section Labels And Subpage Brackets

Eyebrows are structure, not decoration. ERP and CRM feature pages use a boxy bracket for page identity, while section and card labels stay lighter.

06 PERIOD CLOSE

Feature Hero Bracket

Box plus domain chip plus plain label. Used on ERP and CRM feature subpage heroes.

02 AGENTS

Section Eyebrow

Dark numeric chip with text label. Used above section headings inside feature pages.

AR COLLECTIONS AGENT

Card Eyebrow

Baseline-aligned monogram and mono label. Kept quieter than the card title.

WORKING SPEC

System Badge

Small signal mark plus label. Good for page state or compact metadata rows.

07 TOKENS

Color As Signal

Accent colors are named by function. Each visible sample below uses the token directly, so drift is obvious during review.

BACKGROUND --background
FOREGROUND --foreground
BORDER --border
SIGNAL RED --red
PROCESS GREEN --grn
CAUTION YELLOW --ylw
TRACE PURPLE --pur
SURFACE DIM --surface-dim
08 TYPE

Readable Small Text Has A Floor

The system has no freehand tiny copy. Use the text tokens by role: 12px is the preferred small-text floor, 9px is the absolute communication minimum, and 8px is decorative only.

Token Size Use Sample
--fs-micro 8px Decorative-only ticks, counters, or nonverbal marks. Not communicative text.
--fs-caption 9px Absolute minimum for communicative text: badges, footnotes, and very short notes. MINIMUM TEXT
--fs-label 10px Short labels and compact operator cues. SHORT LABEL
--fs-chip 11px Chip labels, compact tags, and dense card metadata. COMPACT TAG
--fs-xs 12px Preferred floor for small readable UI text and metadata. Small readable UI text
--fs-body 16px Default body copy, documentation prose, and page communication. Default body text
09 CODE

Code Blocks And Inline Commands

Code examples use semantic <pre><code> wrappers so the shared scrollbar primitive applies automatically. Inline code stays compact and tokenized.

TERMINAL BLOCK
example.sh scrolls on overflow 
# Register your agent
curl -X POST https://api.erpai.studio/v1/agents \
  -H "Authorization: Bearer $KEY" \
  -d '{"name":"collections-agent","scope":"ar:write"}'

Use for commands, API examples, config fragments, and export snippets. Keep the frame one pixel and let <pre> own horizontal scrolling.

INLINE CODE

Inline commands such as pnpm --filter web-lab build, file references such as components.css, and class names such as .system-cta-primary use mono text without becoming chips.

SYNTAX SIGNAL
# muted comment "quoted value" --token-name

Use color sparingly. Comments mute, strings take caution yellow, and token names can use the red signal.

10 CARDS

Frames Are Tools, Not Page Sections

A framed element should communicate a repeated object, a tool, or a selectable unit. Page sections themselves stay unframed.

BASE

Generic Card

Bordered surface for simple repeated objects. Hover can lift, but the shape stays sharp.

AR AGENT CARD

Collections

ERP/CRM agent listing treatment with quiet eyebrow, headline, summary, and dashed metadata row.

12H SAVEDVIEW
STAGE 01

Build Setting It Up

Long-form skill documentation card. Heavier frame and hard shadow for prose stages, with enough inset for reading rhythm.

FRAMED TOOL

Download Menu

Tool surfaces can be boxed because they contain direct manipulation or selectable rows.

CATALOG

App Tile

Dense catalog cards carry product identity, pricing metadata, and status at scanning speed.

SCOPED EXCEPTION

Preview Card

Allowed only inside .live-dashboard: softer app-preview vocabulary, scoped and contained so it does not leak into marketing pages.

11 HEROES

Hero Families

Hero variants should be chosen by page job. The system has enough range without inventing a new hero shape for every page.

FOR HUMANS APPS
FOR AGENTS API

Catalog Split Hero

Homepage only. Two audience halves, hoverable panels, catalog entry point.

API-FIRST HEADLESS
SAAS

Standard hero-atsh with panel, stats, CTA, and supporting prose.

Standard Marketing Hero

Used by pricing, proto, BYOA, startups, contact, and focused marketing pages.

WORKING SPEC BUILD
SYSTEMS

Monumental Editorial Hero

Single-column, high whitespace, cinematic reveal. Used when the page needs a strong thesis.

01 PIPELINE
FEATURE
SUBPAGE

ERP/CRM Feature Hero

Centered product subpage hero with bracket eyebrow, highlighted title segment, and microcopy ticks.