The foundations shared across every Clopos product — colour, typography, spacing, elevation and interaction rules. Each product extends these in its own design-system block.
Full light + auto-dark colour styles: Primary, Secondary, Grey, Basic, Product, Systems.
Role-based colour API (--color-*) → primitives. The main reference for building components.
Desktop (Inter) + iOS (SF Pro) type scales — Headline → Overline, every weight, 1:1 from source.
Padding & gap t-shirt scales (xs → 9xl) — visual, live from tokens.
Corner radii (xs → 6xl + full), elevation shadows and focus rings — visual.
Page side padding, grid gutter, and the POS/Kiosk terminal layout — visual.
6 sizes × 12 states × icon-only (144 variants) · Inter · Terminal radius override.
Open button →16 types × 3 sizes × label outside/inside — text, password, select, date/range/time, search×3, textarea, tag. Error + Success.
Open input →Dropdown atoms — SelItem · CheckItem · CheckOptItem · DropdownGroupItem · 4 sizes. Compose into Select menu.
Open select items →Combobox · Select & MultiSelect · 1:1 Mantine · rounded dropdown · selected = check + primary-light · searchable · grouped.
Open select menu →Th/Td cells · 2 header types × sort · 12 body cell types · status/badge schemes · assembled table · customize panel. 1:1 Mantine + spec.
Open table →Loading placeholder · shimmer · shapes (line/circle/rect) · list/card/modal/page compositions.
Open skeleton →Selection-control atoms · checked/indeterminate/selected · error · disabled · sizes sm/md/lg · label + description. Used everywhere.
Open checkbox & radio →1:1 Mantine · on/off toggle · sizes sm/md/lg · label + description · inner ON/OFF labels · thumb icon.
Open switch →1:1 Mantine switchers · atoms (tab/segment states + variants) → molecules (tab list · control) · sizes 32/36/40.
Open tabs & segmented →Static label — filled/solid × 5 schemes × 3 sizes × type × shape. No interaction states.
Open badge →Interactive — Primary · Secondary · Tertiary · Outline · Inverse + hover/focus/active/disabled.
Open tag →Feedback banner — info · warning · error · success · announcement · rounded/terminal.
Open alert →Yeni UI variantları — Soft · Icon card · Toast (+progress / +stroke) · Solid · title-only · App (SF Pro).
Open POS v2 →Layout, buttons, colour & state, forms, language and the accessibility floor — do / don't.
The human-readable palette — every token, its hex and where it's used.
Import one file to get every token in a mockup: colour, type, spacing, radius.
tokens/tokens.css →Desktop admin · reporting components — date range, table columns, user menu, export modal, calendar, sidebar.
Open Back Office system →Desktop 1024×768 · shared CSS, terminal components.
Open POS system →Landscape 1920×1080 · dark high-contrast kitchen theme · order tickets, age colours, bump.
Open KDS system →Mobile 390×844 · Inter, React component set.
Open Manager system →Mobile · ordering & receipt components.
Open Waiter system →Portrait 1080×1920 · large touch components.
Open Kiosk system →Sandbox · experimental components.
Open General system →