Design System for Calispec
The shared visual language for managing the full lifecycle of gauges, fixtures, calibration events, inspection processes and metrology studies — one calm interface, one accent colour, one set of components.
Core Design Principles
Six immutable design rules that govern every component, screen layout, and metrology interaction across Calispec.
Calispec Blue is the only interactive accent. Colour is strictly reserved for state and data.
Enterprise screens carry high data density. 14px body text, 36–40px controls, 16–24px padding.
Surfaces separate with a 1px border and hairline shadow. Soft top highlights, never glows.
A primitive is built once and reused. Pages choose a variant; they never restyle a primitive.
Transitions are brief (140–300ms) and removed for people who prefer reduced motion.
Every colour-coded value (status, criticality, charts) also carries text, an icon, or a pattern.
Colour Palette
One interactive accent — Calispec Blue. Every other colour has a single job: state, status or data. The same word always has the same colour.
Typography Scale
Inter throughout — weights 400, 500, 600. Headings and controls use slightly negative tracking; small uppercase labels use positive tracking. No weight above 600 in body text or controls.
Layout & Spacing
An 8px base grid with a 4px half-step. Every screen shares the same rhythm so pages feel identical to move through.
4
8
12
16
20
24
32
48
| Sidebar | 272px · 56px collapsed |
| Header | 64px |
| Main gutters | 16px · 24px from 640px |
| Section gap | 32px |
| Card grids | 1 / 2 / 3 columns · 16px gap |
| Form fields | 2 columns · 1 on mobile |
Radius, Elevation & Motion
Small radii for controls, softer ones for surfaces. Depth comes from a border and a hairline shadow — never a glow.
Every animation stops under prefers-reduced-motion.
Button Variants
One shared button with three emphasis levels. Pages choose a variant and size — they never override radius, weight or size. 14px / 400 / −0.02em, 5px radius.
One Primary per view; the primary action is right-most with 8px between buttons. Icon-only buttons need an aria-label and a tooltip.
Identification
Application
Technical
Safety
Documents
Form Elements
Consistent inputs improve accuracy and support audit-ready data entry. 36px controls, 10px radius, a blue hover and focus ring.
Badges, Status & Criticality
Never colour alone: every state also carries text, an icon or an arrow.
Cards & Containers
Cards organise data, metrics and workflows with one structure: header, body, supporting rows, call to action. Hover the module cards to see the cursor-following dots.
Add Fixture
Register a new fixture record.
Add Stock
Receive components into a store location.
Management Dashboard
Fleet-wide counts and workload at a glance.
PDF Designer
Design document templates.
Form Engine
Configure form layouts and fields.
Email Rules
Schedule digests and reports.
The hover dots take the colour of the card's icon — blue, green, red, violet or orange.
Calispec standardises on the Lucide icon library in outline style with 1.5 stroke for navigation and cards, and 1.8 stroke for stat tiles.
Total Count
Calibration Due
Inventory Items
80021Weld fixture – front bumper
Identification
Identity, ownership and sourcing of this fixture- Fixture code
- 00001
- Name
- WELD FIXTURE – FRONT BUMPER
- Criticality
- HIGH
- Status
- DRAFT
- Manufacturer
- —
- Created at
- 10/4/2026
Tables & Pagination
One table language for logs and one for the line items inside a record, plus a single shared pagination bar.
Fixture code | Name | Category | Status | Criticality | |
|---|---|---|---|---|---|
| 80021 | WELD FIXTURE – FRONT BUMPER | WELDING | Active | HIGH | |
| 80022 | CHECKING FIXTURE – DOOR PANEL | INSPECTION | Calibration | MEDIUM | |
| 80023 | DRILL JIG – BRACKET | MACHINING | Scrapped | LOW |
The page box appears only when there are more than 50 pages. Inactive controls use #9CA3AF; the current page is outlined in blue.
Overlays & Screens
Menus and dialogs reuse the same surfaces, radii and buttons.
Discard saved draft?
This resets every field in the form. This can't be undone.
Component Stack & Libraries
Built for scalable enterprise metrology and calibration software, combining lightweight headless libraries with Calispec's single-accent design language.
shadcn/ui
UI Primitives & PatternsAccessible headless UI primitives adapted with Calispec tokens (--blue, --radius-*, --shadow-*) for strict copy-paste control without bloated runtime dependencies.
Lucide Icons
Official IconographyThe official icon library for Calispec in outline style. Standard stroke widths: 1.5 for controls, navigation, and cards; 1.8 for high-emphasis stat tiles.
TanStack Table
Data Grid ArchitectureEnterprise data grid architecture built for TanStack Table, powering high-density metrology lists, sorting pipelines, and sticky headers.