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.
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.
Total Fixtures
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 |
Bill of Materials
Components and quantities that make up this fixture| Item # | Part code | Name | Requirement | Criticality | Quantity | UOM |
|---|---|---|---|---|---|---|
| 1 | P-1001 | LOCATING PIN | MANDATORY | HIGH | 4 | NOS |
| 2 | P-1002 | CLAMP ASSEMBLY | MANDATORY | MEDIUM | 2 | NOS |
| 3 | P-1003 | BASE PLATE | OPTIONAL | LOW | 1 | NOS |
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.
Calispec Blue is the only interactive accent. Colour is for state and data.
A 1px border and a hairline shadow. Highlights, never glows.
Pages choose a variant and size; primitives are never restyled.