One visual language for moving with certainty
Kramor DS is the design system behind the Kramor migration portal. It makes the hard parts of replatforming legible: what is staged, what is in flight, what is verified, and what still needs a person.
- Contrast checks
- 100/100
- Lowest text pair
- 4.82:1
- Italic styles
- 0
Wave 4 of 9
Catalog
Products, the variant matrix and multi-location stock
Record prd_48213 · Linen duvet set, queen
Principles
Certainty is visible
Every record shows where it sits in the five ledger stages. Status is always an icon and a word, never color alone.
Roman, always
Gate 38a: nothing is set in italics. Emphasis comes from weight, color and structure, and only upright faces are loaded.
Two modes, one contract
Light and dark read the same semantic tokens. Every text and control pair is computed against WCAG 2.2 AA.
Evidence over claims
One status vocabulary everywhere. Tested never looks like certified, and implemented never looks like tested.
AI suggests, people approve
Suggestions wear the insight color and say so. They never sit on an approval button or a destructive action.
Glass with a floor
Translucent chrome for depth, with solid fallbacks when blur is unavailable or the visitor prefers less transparency.
What is inside
Foundations
Brand palette, semantic roles, type scale, spacing, radii, elevation, glass and motion.
36 color tokens per mode
Components
Over 40 accessible primitives, from buttons and fields to dialogs, menus and the command palette.
6 component groups
Patterns
The portal shell, the status vocabulary, ledger stages, waves, value states and safety gates.
3 pattern guides
Templates
Overview, Connections, Studio, Validation, Recovery, Governance and Settings, ready to adapt.
7 portal screens
Tokens at a glance
Brand palette
- Modern Tech Navy#0B132B
- Electric Blue#1C64F2
- Signal Cyan#00F2FE
- Slate Dark Neutral#1E293B
Semantic roles
- Primary
- Signal
- Success
- Warning
- Danger
- Insight
- Neutral
100 of 100 documented pairs pass in light and dark, computed from the token values.
See every contrast checkQuick start
import { Button } from '@/components/kit/button'
import { StageBadge, StatusBadge } from '@/components/kit/status'
export const ApprovalRow = () => (
<div className='flex items-center gap-3 rounded-xl border bg-card p-4'>
<StageBadge stage='staged' />
<StatusBadge status='TESTED' />
<p className='text-ui text-muted-foreground'>Plan revision r14 is locked</p>
<Button className='ml-auto'>Approve revision</Button>
</div>
)