← Clopos Design

Kitchen Display System

UI kit for the kitchen screens (landscape 1920×1080) — a dark, high-contrast theme for at-a-distance reading. Foundations and components will live here, built on the global tokens and restyled for the kitchen.

Foundations

Colors

Full palette — grey · text · system (green/red/orange/blue/purple/brown/cyan) · white. Light + dark.

Open colors →

Semantic tokens

App tokens (background · surface · text · icon · status · border · primary + gradient). Light + dark · same Token | Light | Dark layout.

Open tokens →

Typography

Mazzard H · same scale & structure as the general DS (h1–h6 · subtitle · body · caption · overline, lh 150%).

Open type →

Brand pattern

Food line-art pattern (theme-aware via mask). Used full-bleed on the splash / launch screen.

Open SVG →

Components

Button

Atom — base .btn + sizes (34/40/32) + variants (gradient · slate · success · danger). Reused by Header & Order card.

Open button →

Header bar

Top bar 1404×64 — gradient buttons · tabs + count badges · clock · filter/wifi icons + intro variant.

Open header →

Order card

The core ticket — atoms (badge · buttons · slot · action) → molecules (product ×3) → organism (full card). 272px.

Open card →

Modifier card

Product with modifier selections in the content — each is title (secondary) → description (primary): “Ölçü seçimi → Kiçik ölçü”. 1:1 from spec.

Open modifier →

Input · email

340×49 field · 9 states (default · filled · focus · disabled · error ×3 · success ×2). Light-first, dark auto-swaps. Inter.

Open input →

Select & Multiselect

376px field · 7 states × 3 sizes (56/52/48) + 4 opened dropdowns (search / multiselect). Interactive.

Open select →

Order ticket

Header (no · source · timer), item rows with modifiers, bump action.

Planned

Board / station

Auto-fill grid, station tabs, counts, recall.

Planned