[ 05:14:22 ] COMPONENT LIBRARY · LITERAL LABS REGISTERED · ® LL-DS-1.0
Components,
hard edges.
® LL-DS SERIAL · 7536U-141-778 · CYCLE 0421 OP·2 V1.0
HARD EDGES · 2 PX BORDERS · 0 RADIUS MONOSPACE LABELS · HOVER SHADOW REF: LL-DS
01 • Buttons
Variants Default · Orange · Black · Dark-blue · Bright-orange
Sizes xsmall · small · default · lg
States Default · Hover · Active · Disabled
Light variants Softer fill, coloured border
Neutral palette Off-white · Black · Grey
Full-width .is-fullwidth
Font: Ioskeley Mono → system monospace fallback · 0.75rem Case: Uppercase · letter-spacing 0.14em Border: 2px solid · colour-matched per variant Prefix: ▸ via ::before · suppressed on .has-icon Hover: translate(-2px, -2px) + 4px 4px 0 hard shadow Active: translate(0,0) + shadow none Disabled: opacity 0.4 · cursor not-allowed · no transform Sizes: xsmall 9px · small 10px · default 12px · lg 14px Use: CTAs, form submissions, modal actions, nav items
02 • Tags · Badges · Chips
Tags Status · category · state
Neutral Primary Brand Operational Degraded Blocked Draft
Tags in context Table cells · run status
Pass Review Fail In progress Live Archived
Badges Pill shape · same colour range
Cycle 0421 Field tested ® 01 Newcastle · UK v1.0 · Apr 2026
Chips Interactive filter · active state
All Inference Training Edge MCU
Dismissable chips With close affordance
Cortex-M4 × Industrial defects × Q2 2026 ×
Feature highlight With icon
AutoMLTag shape: border-radius 2px · 1px border · dot ::before Badge shape: border-radius 999px (pill) · same colour variants Chip shape: pill · interactive · hover + active + dismiss states Font: Ioskeley Mono · 0.6875rem · uppercase · letter-spacing 0.12em Semantic tokens: --success, --warning, --danger, --info (adapts to dark mode) Use: Status indicators, filter groups, metadata labels, taxonomy
03 • Section anatomy · ll-sep & ll-h
Live example The wrapper you are looking at right now
.ll-sep (structural wrapper)
N • Section title
.comp-body → .comp-row rows → .hdr-spec
ll-sep Structural section wrapper
<div class="ll-sep"> … </div> No visual styling. Groups .ll-h, .comp-body, and .hdr-spec into a single logical block.ll-h variants Section header label
01 • Standard section heading
02 • With · separators
03 • Section anatomy · ll-sep & ll-h
ll-sep: no CSS · structural grouping element only ll-h font: var(--mono-stack) · 0.6875rem · uppercase · letter-spacing 0.16em ll-h colour: var(--text-tertiary) · adapts to dark mode ll-h border: 1px solid var(--grey) on bottom · padding var(--grid-gutter-small) 0 ll-h ::before: 10×10px square · background var(--brand) · flex-shrink 0 Use: Every guide section · pairs with .comp-body and .hdr-spec
04 • Tables
Default .table · base variant
| Run ID | Model | Status | Accuracy |
|---|---|---|---|
| RUN-001 | ResNet-18 | Pass | 94.2% |
| RUN-002 | MobileNet-V3 | Review | 87.1% |
| RUN-003 | EfficientDet | Fail | 61.4% |
Modifiers .is-bordered · .is-striped · .is-narrow · .is-hoverable
.is-bordered
| Field | Type | Required |
|---|---|---|
| model_id | string | Yes |
| threshold | float | No |
.is-striped
| Device | Class | Latency |
|---|---|---|
| Cortex-M4 | MCU | 12 ms |
| Jetson Orin | Edge GPU | 2 ms |
| RPI 4 | SBC | 34 ms |
| i.MX RT1062 | MCU | 8 ms |
.is-narrow
| Key | Value |
|---|---|
| batch_size | 32 |
| epochs | 50 |
| lr | 0.001 |
Row colours tr.is-* · semantic & brand palette
| Class | Use case | Colour |
|---|---|---|
| .is-bright-orange | Highlight / featured | Bright orange |
| .is-bright-orange-ultralight | Soft highlight | Ultralight orange |
| .is-dark-blue | Header-level emphasis | Dark blue |
| .is-british-forest | Success / active | British forest |
| .is-literal-red-pale | Error / blocked | Red pale |
| .is-gold-pale | Warning / review | Gold pale |
| .is-off-white-dark | Alternate row / muted | Off-white dark |
Content table .content table · prose context
| Spec | Value |
|---|---|
| Border | 2px solid var(--ink) |
| Header bg | var(--ink) · off-white text |
| Header font | var(--mono-stack) |
| Corner radius | var(--rounded-corners) |
Cell modifiers .is-narrow · .is-selected · .is-vcentered
| # | Component | Status | Version |
|---|---|---|---|
| 1 | Button | Stable | v1.0 |
| 2 | Table | In progress | v1.0 |
Base class: .table · add modifiers as needed Modifiers: .is-bordered · .is-striped · .is-narrow · .is-hoverable · .is-fullwidth Row colours: tr.is-* · full brand palette · includes hover overrides on .is-hoverable Cell modifiers: .is-narrow (nowrap/min-width) · .is-selected (orange tint) · .is-vcentered Content table: .content table · 2px ink border · mono header · rounded corners Responsive: .table-container · overflow-x scroll on mobile Use: Data grids, run logs, spec sheets, config tables, comparison matrices
05 • Stacked card
Brand orange Hover to expand layers
Edge AI platform
Run models at the edge. No cloud dependency.
North Sea Blue palette · hover to expand
Model training
Scalable, reproducible training pipelines.
North Sea shades Deep · mid · pale
Deep
blue-900 / 950
Mid
blue-600 / 700
Pale
blue-100 / 200
Wrapper: .cta-stack-wrapper · set --stack-color as RGB triplet (no #) Layers: .cta-stack-layer · style="--layer: N" · 1 = nearest, 3 = furthest Expand: layers translateY downward · gap widens on :hover via --stack-gap-hover Opacity: each layer fades by --stack-opacity-step · outermost is most transparent Orange: --stack-color: 255, 96, 30 · matches --color-LiteralOrange-500 North Sea deep: --stack-color: 8, 38, 74 · --color-blue-900 North Sea mid: --stack-color: 33, 89, 157 · --color-blue-700 North Sea pale: --stack-color: 109, 167, 241 · --color-blue-400 Use: CTA cards, feature highlights, layered promotional blocks