Design system
Industrial precision, with nothing decorative pretending to be data.
The Gritnox visual system is built around machined surfaces, restrained lime, technical typography and explicit evidence states. This page is the live reference for the shared implementation.
01 · Direction
Three rules keep the interface credible
Data first
Visual hierarchy follows the procurement decision: identity, evidence, offer, action.
One accent
Lime marks attention and evidence. It is not a background decoration.
Visible boundaries
Thin rules, compact radii and explicit labels make uncertainty easier to read.
02 · Tokens
Color carries structure and status
Graphite
Headers, primary actions, technical surfaces
Controlled lime
Emphasis, active markers, evidence accents
Machined white
Page field and quiet contrast
Pure surface
Records, forms and comparison tables
Steel
Secondary copy and metadata
Subtle line
Structural borders and dividers
Strong line
Input and control boundaries
Verified
Reviewed or recorded evidence states
Caution
Claimed, partial or stale states
Stop
Rejected relationships and failures
03 · Voice
IBM Plex Sans for reading. IBM Plex Mono for evidence.
Find the right part.
Equivalence is not identity.
Nordwell NB-6205-2RS
Typed specifications retain units and value types.
SUPPLIER SKU · LAST CONFIRMED
Sans serif
Product copy, descriptions and controls.
A canonical record should be useful before it is persuasive.
Monospace
Identifiers, timestamps, references and technical labels.
NB-6205-2RS / RFQ-2026-A1B2
04 · Structure
Compact radii, visible rules, deliberate spacing
Spacing scale
Radius
2px default; 3–6px for controls and cards.
Borders
One-pixel rules create density without shadows.
05 · Interaction
Actions communicate priority without becoming loud
Button hierarchy
Primary action, evidence action, secondary action and quiet control.
Badge tones
Always paired with a textual label.
06 · Evidence
Statuses retain their original meaning
Fitment evidence
A claim is never styled as verification.
Availability
Stock state is offer-specific commercial data.
Exact match
NB-6205-2RS
Identifier-led result
Evidence
4 states
Never collapsed
Currency
Mixed
Not silently converted
07 · Records
Forms and comparison tables favor reviewability
Input anatomy
Visible labels, strong boundaries and supporting text.
Offer comparison
Supplier-specific terms remain columns, not hidden metadata.
| Supplier | Condition | Lead | Price |
|---|---|---|---|
| Halvorsen | New | 7 d | BDT 12,400 |
| Arclight | Refurbished | 14 d | USD 84 |
Loading
Preserve geometry while data resolves.
Empty
Explain the absence, then offer a next step.
No parts found
Try a shorter identifier or browse by equipment.
Error
State the failure and recovery path.
Catalog unavailable
The demo catalog is temporarily unavailable.
08 · Workspace
Operational dashboards favor density, rhythm and repeatability
236px / 56px
Desktop sidebar and dashboard header. Mobile navigation becomes a dismissible drawer.
16px / 12px
Page rhythm and related-field gaps. Panels, metrics and records share the same compact scale.
104px
Minimum metric-card height with 9px mono labels and 22–24px values for fast scanning.
Record rhythm
Panels, metric cards and page headers use one shared frame.
Order volume
BDT 148,200
Responsive records
Stack mobile fields instead of forcing a fixed-width table.
09 · Access
Motion and focus are part of the system
Focus
Two-pixel system outline with a visible offset.
Keyboard focus is global and must remain visible in every component.
Reduced motion
Smooth scroll and transitions collapse when requested.
The stylesheet honors prefers-reduced-motion. Motion is never required to understand a state.