00Foundations

Design system

Tokens, type and components for Crackwits OS. Build modules against what is documented here — if something you need is missing, add it here first.

01Colour

One accent, used only for primary actions and active state. Everything else is carbon and elevation.

Carbon

The neutral ramp. Hue drifts as it lightens — warm magenta-tinted charcoals at the dark end, cool blue-tinted greys at the light end. Chroma never exceeds 0.015, so it reads as depth rather than colour.

carbon-25#f5f4f5

carbon-50

carbon-100#c5cbd4frenchgrey

carbon-200

carbon-300

carbon-400

carbon-500#51565bash

carbon-600#4a464a

carbon-700#3d3a3d

carbon-750#312f31charcoal

carbon-800#252325charcoaldark

carbon-850#1c1b1c

carbon-900#161516

carbon-950App canvas, dark theme

Accent

The one decisive colour. Primary actions and active state only — never decoration, never a background wash. If two accents appear on a screen, one of them is wrong.

accent-100

accent-200

accent-300

accent-400

accent-500#d7586cbringpink

accent-600Primary in the light theme

accent-700

accent-800

accent-900

Status

Deliberately quieter than the accent — lower chroma so a page of green ticks never out-shouts its primary button. Danger sits at hue 37 to stay readable against the accent's hue 13.

success-500#3fa795greensjade

warning-500#d99a3f

danger-500#d36342

info-500#5b8fc7

02Semantic tokens

What application and module code consumes. Never reach past these to a raw scale.

Surfaces

	`--background` on --foreground	The page canvas. One per screen.
	`--card` on --card-foreground	Content sitting on the canvas.
	`--popover` on --popover-foreground	Menus, popovers, command palette.
	`--muted` on --muted-foreground	Recessed rows, table headers, disabled fills.
	`--accent` on --accent-foreground	Hover and active surface. Not the brand accent.
	`--secondary` on --secondary-foreground	Secondary buttons and quiet chips.
	`--sidebar` on --sidebar-foreground	Navigation rail.

Action

	`--primary` on --primary-foreground	The primary action. One per view.
	`--destructive` on --destructive-foreground	Irreversible actions only.
	`--ring`	Focus ring. Never removed, never restyled per component.

Lines

	`--border`	Hairline separation. Elevation does the heavy lifting.
	`--border-strong`	Where a line genuinely has to be seen.
	`--input`	Form control outlines.

Status

	`--success` on --success-foreground	Completed, approved, healthy.
	`--warning` on --warning-foreground	Needs attention, not yet broken.
	`--danger` on --danger-foreground	Failed, rejected, over limit.
	`--info` on --info-foreground	Neutral context and hints.

Charts

	`--chart-1`	Categorical series 1 — the reporting module's ordering.
	`--chart-2`	Categorical series 2.
	`--chart-3`	Categorical series 3.
	`--chart-4`	Categorical series 4.
	`--chart-5`	Categorical series 5.
	`--chart-6`	Categorical series 6 — neutral, for 'other'.

03Typography

URW Geometric carries the display voice, Montserrat the working voice. Arabic swaps both for IBM Plex Sans Arabic.

Display — URW Geometric

Headings and numerals. Tight tracking, set in font-display.

Works. Words. Wonders.

text-display-xl64px / -0.035emLogin, marketing-weight moments

Works. Words. Wonders.

text-display-lg48px / -0.03emDashboard hero

Works. Words. Wonders.

text-display-md36px / -0.025emSection opener

Works. Words. Wonders.

text-display-sm28px / -0.02emPage title

Works. Words. Wonders.

text-display-xs22px / -0.015emCard and panel title

Interface — Montserrat

Body, controls, tables. Body sits at 14px.

Works. Words. Wonders.

text-lg18pxSub-heading

Works. Words. Wonders.

text-base16pxLong-form reading

Works. Words. Wonders.

text-sm14pxBody default — set on <body>

Works. Words. Wonders.

text-xs12pxMetadata, timestamps, help text

Works. Words. Wonders.

eyebrow11px / 0.14emSection labels, table headers

Arabic — IBM Plex Sans Arabic

Neither brand face carries Arabic. :lang(ar) swaps --font-sans and --font-display to this.

أعمال. كلمات. روائع.هذا نصّ تجريبي للتحقّق من الاتجاه والتباعد في الواجهة العربية.١٢٣٤٥٦٧٨٩٠ — 1234567890 — 12.750 KWD

Numerals

Tabular by default so currency and duration columns align. Never proportional in a table.

Tabular (default)

1,204.750 KWD88.000 KWD1,000,000.125 KWD

Proportional

1,204.750 KWD88.000 KWD1,000,000.125 KWD

04Elevation

Depth comes from surface lightness, not from outlines. Shadows are reserved for things that genuinely float.

Surfaces

Depth is lightness. Each step is one level further forward.

Canvas--backgroundThe page

Card--cardContent on the page

Popover--popoverFloating over content

Muted--mutedRecessed within a card

Shadows

Reserved for things that genuinely float. Not for separation.

shadow-raisedSits just off the surface

shadow-overlayPopovers, dropdowns, command palette

shadow-liftedDialogs, dragged items

Glass

Overlays, the command palette and sticky headers. Restrained.

.glass

05Spacing and radius

A 4px base step. Radius scales from a single token so a white-label theme is one value away.

Spacing

A 4px base step. Tailwind's default scale, unmodified.

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

16 · 64px

Radius

Everything scales from --radius. A white-label theme is one value away.

rounded-smChips, badges, checkboxes

rounded-mdInputs, buttons

rounded-lgCards, popovers — the base value

rounded-xlDialogs, sheets

rounded-2xlFeature panels

06Motion

150 to 250 milliseconds, always purposeful. Everything respects reduced motion.

Duration

Hover a row to see it. Anything past 250ms is a defect.

--duration-instant100ms

State flips: checkbox, toggle, hover tint

--duration-fast150ms

Menus, tooltips, popovers

--duration-base200ms

Dialogs, sheets, list entry

--duration-slow250ms

Page transitions. The ceiling.

Easing

--ease-brandcubic-bezier(0.22, 1, 0.36, 1)

Entering — fast out of the gate, soft landing

--ease-brand-incubic-bezier(0.55, 0, 1, 0.45)

Leaving — get out of the way quickly

Every transition above is disabled under prefers-reduced-motion: reduce, globally, in src/styles/base.css. Modules do not need to handle this themselves.

07Components

Every shadcn primitive, in each of its states, on the brand tokens.

Buttons

Every variant, at default size, plus each interactive state.

Status

Colour is never the only signal — pair the tone with a dot or a word.

ActiveAt riskBlockedInvitedIn reviewArchivedBadgeSecondaryOutlineDestructive

Overlays

Dialog, sheet, popover, dropdown, tooltip and the command palette.

Alerts

Two invitations expire tomorrow

Resend them before they lapse.

Google Workspace sign-in is unavailable

Staff can still sign in with email and password. Nothing else is affected.

Data

Dense and scannable. Numerals are tabular, money aligns to the inline end.

Project	Client	Status	Value (KWD)
Al Mulla rebrand	ALAl Mulla Group	On track	12,400.000
Zain campaign Q3	ZAZain	At risk	8,150.500
NBK portal	NBNBK	Blocked	31,000.000
Boubyan microsite	BOBoubyan Bank	Archived	4,275.250

Disclosure

Tabs keep a single screen honest. Three or four, never nine.

Loading and empty

No spinner-only states. Skeletons match the shape of what is coming.

No projects yet

Projects scope everything below the organisation. Create the first one to get moving.

08Patterns

The compositions modules are expected to reuse rather than reinvent.

Direction

Logical properties only. If a component breaks here, it is using a physical one.

01المشاريع

حملة زين للربع الثالث

اسم المشروع

على المسارمعرّض للخطر8,150.500 KWD

الحدّ الجانبي والحشو يستخدمان خصائص منطقية، لذا ينعكسان تلقائيًا.

Carbon

Accent

Status

Surfaces

Action

Lines

Status

Charts

Display — URW Geometric

Interface — Montserrat

Arabic — IBM Plex Sans Arabic

Numerals

Surfaces

Shadows

Glass

Spacing

Radius

Duration

Easing

Buttons

Status

Form controls

Overlays

Command Palette

Alerts

Data

Disclosure

How are permissions resolved?

Where does a module put its tables?

Loading and empty

No projects yet

Direction

حملة زين للربع الثالث