/* ============================================================================ MANEJER — DESIGN TOKENS · "E Company Light" ---------------------------------------------------------------------------- The single source of truth for the product's visual system. Extracted from the two founder-approved reference implementations: · demo/e-company-light/index.html admin console (13 px density) · demo/f-booking-company/index.html customer mobile (14 px density) Prose + rationale: docs/design-tokens-draft.md ONE SYSTEM, LIGHT FIRST. Dark mode is a future derivation of these role names, never a parallel palette (see the doc, §9). HOW TO USE tokens.css declares custom properties and nothing else — no selectors that paint. It is safe to load first, alone, and in any page. FOUR HOUSE RULES THIS FILE ENFORCES 1. Colours have jobs. Four roles — act / select / warn / stop — and every one of them has exactly one meaning. A colour used for a second job is a bug, not a variation. 2. No magic numbers. Every px, ms and ratio a screen needs is named here. If a screen needs a number that is not in this file, add it here first. 3. Colour is never the only carrier of state. Tokens make that possible (each role ships a fill, a border and an ink); components.css makes it true (every role class also carries a glyph or a word). 4. Motion reports state changes. Nothing loops, pulses or breathes, so there are no "ambient" duration tokens — only the three below. ========================================================================== */ :root{ /* ========================================================================== 1 · SURFACES — warm neutral, flat, low contrast between planes The warmth is a green-leaning grey, not cream. Panels sit on a slightly deeper chrome and the BORDER does the separating, not a shadow gradient. Never pure #ffffff: barn offices have sunlight on the screen, and a warm white keeps the four accent hues honest across an eight-hour shift. ====================================================================== */ --srf-app: #e9e6de; /* app chrome behind everything — "the desk". Console background, mobile scroll ground. Darkest plane. */ --srf-panel: #fbfaf6; /* cards, calendar grid, nav, top bar, app bar, table body — the default reading surface */ --srf-sunken: #f2f0e8; /* gutters, closed regions, disabled fills, readouts, segmented-control track, input prefixes */ --srf-hover: #efede4; /* hover on nav rows, list rows, chips, quiet buttons */ --srf-overlay: #fefdfa; /* popovers, menus, modals, sheets, event blocks — the only near-white, reserved for floating layers */ /* ========================================================================== 2 · INK — one ramp, verified against every surface above Ratios below are computed against --srf-app (#e9e6de), the DARKEST body ground in the system, so they are the worst case. Everything that carries meaning clears WCAG AA 4.5:1 on every surface in §1. ====================================================================== */ --ink-max: #1e211c; /* headings, event titles, figures, table numbers. 13.06:1 on app · 15.59:1 on panel */ --ink: #34372f; /* body text, input values, labels that matter. 9.71:1 on app · 11.60:1 on panel */ --ink-muted: #5f6257; /* secondary text, hints, meta lines, placeholders, disabled labels, ruler labels. 4.99:1 on app · 5.96:1 on panel · 5.20:1 on --stop-soft (the worst tint). Clears AA on all nine surfaces in this file. NOTE: the console demo used #6a6d61, which is 4.24:1 on --srf-app and 4.41:1 on --stop-soft — below AA. The mobile demo already carried the corrected value; the kit standardises on it so one token is safe everywhere. */ --ink-faint: #8a8d81; /* NON-TEXT ONLY — icon strokes, decorative dividers, a wordmark's secondary lockup (WCAG 1.4.3 exempts logotypes). 2.71:1 on app. If a human has to READ it, it is --ink-muted or darker. Using this for a label is a bug. */ --ink-invert: #fbfaf6; /* text on --act, --stop, and the toast's --ink-max ground. 7.61:1 on act · 6.82:1 on stop · 15.59:1 on ink-max */ /* ========================================================================== 3 · LINES — three decorative weights + one interactive weight ====================================================================== */ --line-hair: #e8e5da; /* 15-minute ruler, row separators inside a card */ --line: #ddd9cd; /* panel borders, hour rules, table row rules */ --line-strong: #c9c5b6; /* card edges that must read as an edge, event borders, header underline, avatar rings */ --line-field: #7d8172; /* THE BOUNDARY OF AN INTERACTIVE CONTROL: inputs, selects, textareas, checkboxes, radios, switch tracks, secondary buttons. 3.83:1 on panel · 3.20:1 on app · ≥3.12:1 on every surface and tint in this file, so it satisfies WCAG 1.4.11 (non-text contrast). WHY A NEW TOKEN: the demos drew field borders in --line-strong, which is 1.66:1 on --srf-panel. On a control whose fill is near-identical to its ground, the border is the ONLY thing identifying the control, so 1.66:1 fails. Decorative edges (cards, panels) are unaffected and keep --line-strong; nothing in the approved demos changes appearance except form controls. */ --tick: rgba(52,55,47,.24); /* per-resource slot boundaries in the calendar — a structural rule, also the hit-target edge. Alpha so it survives any fill under it. */ /* ========================================================================== 4 · ROLES — four colours, four jobs, nothing decorative Each role ships three or four values: the solid (fills and icons), the pressed step, the tint (backgrounds) and the line (tint borders). A role used for a second job is a bug. ====================================================================== */ /* ACT — "this commits something": primary buttons, now-line, confirmed / completed states, active navigation, ✓ marks, checked controls. Racing green: the equestrian world's own institutional colour, neither SaaS-default blue nor AI-default terracotta, and it holds next to amber and brick without competing. There is deliberately no separate "done" hue — completion is --act plus a check glyph. */ --act: #1d5b48; /* 7.61:1 vs panel — safe as text and as a fill */ --act-press: #16473a; /* :active / :hover on a solid act surface */ --act-soft: #e5f0e9; /* tint: confirmed rows, active nav row, chosen slot */ --act-line: #a8cabc; /* border for --act-soft grounds */ /* SELECT — "this is the thing you picked / the thing focus is on": focus rings, selected rows, chosen day, chosen slot, hovered empty slot, informational banners, the lesson kind bar. Blue because every OS the user already knows uses blue for selection. */ --sel: #2f5d86; /* 6.63:1 vs panel */ --sel-soft: #e5ecf3; --sel-line: #a9c1d6; /* WARN — "allowed, but it costs something and it gets recorded": soft conflicts, out-of-hours bookings, low stock, credit burn. Amber. NEVER used for text — see --warn-ink. */ --warn: #b07d12; /* 3.47:1 vs panel — FILLS AND ICONS ONLY */ --warn-ink: #7d5406; /* the text colour of the warn role. 6.40:1 on panel · 5.96:1 on --warn-soft */ --warn-soft: #fbf1dc; --warn-line: #e2c489; /* STOP — "this cannot happen, or it destroys something": hard conflicts, cancellations, destructive confirmations, negative cari balances, validation errors. Brick, not fire-engine red. */ --stop: #a12f26; /* 6.82:1 vs panel — safe as text and as a fill */ --stop-press: #8a2820; /* :active / :hover on a solid stop surface. 8.36:1 against --ink-invert */ --stop-soft: #f8e7e3; --stop-soft-press: #f4dcd7; /* :hover on a --stop-soft surface. 5.45:1 against --stop */ --stop-line: #dfb0a7; /* Scrim behind modals and bottom sheets. One value; overlays never stack. */ --scrim: rgba(30,33,28,.44); /* --- On dark: the toast is the ONLY dark surface in a light-first product. Controls sitting on it borrow --ink-invert at alpha instead of a new palette. The border alpha is tuned to 3.41:1 against --ink-max so the button's boundary satisfies WCAG 1.4.11 there too. --- */ --on-dark-line: rgba(251,250,246,.38); --on-dark-hover: rgba(251,250,246,.12); /* ========================================================================== 5 · FOCUS — one ring, everywhere, no exceptions --sel is 5.56:1 against the darkest ground and 6.63:1 against the lightest, so the ring is visible on every surface without a second "outer" ring. Grouped controls (phone prefix + input) put the ring on the group with :focus-within; the ring is never removed, only moved. ====================================================================== */ --focus-w: 2px; --focus-offset: 2px; --focus-color: var(--sel); /* ========================================================================== 6 · SHAPE — small radii. A calendar is made of rectangles; rounding them heavily makes the time axis read as soft, which it is not. ====================================================================== */ --r-xs: 3px; /* chips, pins, focus-ring rounding, checkbox */ --r-sm: 5px; /* buttons, inputs, event blocks, nav rows, list rows */ --r-md: 8px; /* panels, cards, popovers, modals, sheet top corners */ --r-lg: 11px; /* the phone frame in mobile demos — one use, on purpose */ --r-pill: 99px;/* badges, meters, switch track */ /* ========================================================================== 7 · SPACE — 4-based, with a 2 px step for optical nudges in dense controls Console density target: 13 px body · 28 px control · 12 px card padding. Mobile density target: 14 px body · 52 px tap target · 12 px card padding. ====================================================================== */ --s-1: 2px; /* icon nudges, badge inner padding */ --s-2: 4px; /* inside chips and pins */ --s-3: 6px; /* gap between a button's icon and its label */ --s-4: 8px; /* control padding, list gaps */ --s-5: 12px; /* card padding, panel gutters */ --s-6: 16px; /* section padding, mobile screen margin */ --s-7: 20px; --s-8: 24px; /* panel padding, rail bottom */ --s-9: 32px; --s-10:40px; /* ========================================================================== 8 · ELEVATION — exactly two levels. Anything else is a border. No inset highlights, no double shadows, no raised/recessed optics: this is professional software, not a designer's showpiece. ====================================================================== */ --elev-1: 0 1px 2px rgba(42,44,38,.05), 0 6px 14px -8px rgba(42,44,38,.13); /* panels and cards, ALWAYS paired with 1px solid var(--line): the border carries the edge, the shadow only lifts it */ --elev-overlay: 0 2px 5px rgba(42,44,38,.09), 0 16px 34px -12px rgba(42,44,38,.26); /* popovers, menus, modals, sheets, toast — the only things allowed to float */ /* ========================================================================== 9 · MOTION — fast, mechanical, never ambient Three durations, one easing. Rules: · Motion always reports a state change. Nothing loops, pulses, breathes or drifts. There is no spinner and no shimmer in this system — a pending commit changes its LABEL ("Kaydediliyor…"), a loading list shows static skeleton blocks. · Never animate layout. Opacity, transform and colour only. · prefers-reduced-motion collapses every duration to 1 ms (bottom of this file) and components.css drops every translate/scale. ====================================================================== */ --t-fast: 120ms; /* hover, focus, chip / button / checkbox feedback */ --t-base: 160ms; /* popover and sheet open-close, axis switch, repaint */ --t-slow: 200ms; /* toast enter and exit */ --ease: cubic-bezier(.2,.8,.2,1); /* ========================================================================== 10 · TYPE — three faces, three jobs Archivo structural: wordmark, page and card titles, resource names. Instrument Sans everything a human reads as prose or a label. IBM Plex Mono EVERY time, duration, quantity, money amount, code and count. A column of times that does not align is a bug. All three carry full Latin Extended, so ı İ ş Ş ğ Ğ ç Ç ö Ö ü Ü â render. Turkish text is lang="tr". Number formatting is Turkish: decimal comma, thousands dot, currency after the number — 42,0 kg · 1.250,00 ₺ · −1.250,00 ₺. ====================================================================== */ --f-display: 'Archivo','Segoe UI',system-ui,sans-serif; --f-body: 'Instrument Sans','Segoe UI',system-ui,sans-serif; --f-data: 'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tracking */ --track-display: -.015em; /* Archivo at title sizes */ --track-tight: -.005em; /* Archivo at card-title sizes */ --track-wordmark: .055em; /* MANEJER */ --track-eyebrow: .09em; /* mono uppercase section labels */ --track-data: .01em; /* mono in dense rows */ /* --- Console scale (13 px body). Size / line-height pairs. --- */ --fs-display-lg: 19px; --lh-display-lg: 22px; /* page title */ --fs-display-md: 15px; --lh-display-md: 20px; /* wordmark */ --fs-display-sm: 14px; --lh-display-sm: 18px; /* card title, tenant name */ --fs-resource: 13px; --lh-resource: 16px; /* calendar column head names */ --fs-body: 13px; --lh-body: 19px; /* default console UI text */ --fs-body-strong:12.5px; --lh-body-strong:15px; /* buttons, event titles, inputs */ --fs-body-sm: 11.5px; --lh-body-sm: 14px; /* sub-lines, card prose */ --fs-label: 11px; --lh-label: 14px; /* form labels */ --fs-eyebrow: 10px; --lh-eyebrow: 12px; /* mono uppercase section label */ --fs-data: 12px; --lh-data: 16px; /* times, quantities, codes */ --fs-data-lg: 20px; --lh-data-lg: 24px; /* card figures (42,0) */ --fs-data-sm: 10.5px; --lh-data-sm: 13px; /* ruler labels, event times */ --fs-micro: 10px; --lh-micro: 12px; /* pins, lane labels */ /* --- Mobile scale. Same roles, one density step up: an arm's length away, outdoors, sometimes with a glove on. Only the roles that actually change get a token; everything else above is shared. --- */ --fs-m-figure: 30px; --lh-m-figure: 32px; /* "5" ders hakkın kaldı */ --fs-m-readout: 24px; --lh-m-readout: 26px; /* readout figure */ --fs-m-title: 22px; --lh-m-title: 26px; /* screen greeting */ --fs-m-appbar: 18px; --lh-m-appbar: 22px; /* app-bar title */ --fs-m-heading: 16px; --lh-m-heading: 20px; /* card title */ --fs-m-body: 14px; --lh-m-body: 21px; /* default mobile UI text */ --fs-m-body-sm: 12.5px; --lh-m-body-sm: 18px; /* sub-lines, hints */ /* --- THE NO-ZOOM FLOOR. iOS Safari zooms the whole page in when focus lands on a form control whose text is smaller than 16 px, and the layout moves out from under the visitor's thumb. The two faces above never meet it, because they are drawn inside a native app; a page opened in a BROWSER does. Any input on a public web surface is sized from this token, not from --fs-m-body. It is a platform threshold, not a taste: 16 px is the number Safari checks, so it may not be tuned. --- */ --fs-nozoom: 16px; /* ========================================================================== 11 · CONTROL SIZE — console is dense, mobile is thumb-first ====================================================================== */ --ctl-h-sm: 24px; /* console: toolbar and inline-table buttons */ --ctl-h-md: 28px; /* console: THE default control height */ --ctl-h-lg: 36px; /* console: primary action in a modal footer */ --tap-sm: 44px; /* mobile: the smallest target the system allows, and only for a control inside a dense transient overlay (the toast's undo). Never for a form control. */ --tap: 52px; /* mobile: minimum finger target — buttons, list rows */ --tap-lg: 56px; /* mobile: list row a gloved thumb must hit reliably */ --box-sm: 18px; /* console checkbox / radio box */ --box-lg: 24px; /* mobile checkbox / radio box */ /* ========================================================================== 12 · LAYOUT — the persistent frame's widths and heights ⚠ NAME COLLISION, RESOLVED HERE. The console called its right rail --rail-w (304px) and the seyis mobile face called its hour gutter --rail-w (50px). One shared file cannot hold both, and "rail" alone never said which. Split into three self-describing names; nothing else changed. console right rail --rail-w 304px → --rail-context-w console hour gutter --gutter 62px → --gutter-time-console-w mobile hour gutter --rail-w 50px → --gutter-time-mobile-w ====================================================================== */ --topbar-h: 52px; /* console top bar. A frame height, not a control height — it is deliberately NOT in §11 next to --ctl-h-*, because nothing is clickable at 52 px; the controls INSIDE it are --ctl-h-md. Three console screens had grown their own copy of this number. */ --nav-w: 204px; /* console left nav; collapses to --nav-icon-w at 1279 px. The mobile faces have no persistent nav, so this token is console-only by construction. */ --nav-icon-w: 56px; /* the collapsed nav: icons only, labels CLIPPED (.sr-only recipe), never removed — a link with display:none on its only text node reports name="" to the a11y tree. The 1279 px break itself cannot live here: a media query cannot read a custom property. It is written in each console shell, against this token. */ --rail-context-w: 304px; /* console RIGHT rail: the selection-detail panel. Narrows at 1120 px, dropped at 900 px. */ --gutter-time-console-w: 62px; /* console day grid: the hour column down the left of the calendar */ --gutter-time-mobile-w: 50px; /* mobile agenda: the hour column down the left of the seyis day list */ --col-min-w: 148px; /* minimum resource-column width, Seyis axis */ --lane-min-w: 96px; /* minimum width PER CAPACITY LANE, Yer axis — a place column is capacity × this, so "3 şerit" is legible as geometry */ --phone-w: 390px; /* the viewport the mobile faces are designed at. The demo phone FRAME (its bezel radius and drop shadow) is presentation chrome and deliberately NOT a token — it lives in the demo page that draws it. */ /* ========================================================================== 13 · CALENDAR GEOMETRY — the calendar is the product, so it gets named values instead of magic numbers. In code these become tenant config or named constants; they are never typed inline. ====================================================================== */ --ppm: 1.4; /* px per minute → 84 px per hour. Tuned so a 45-minute lesson still holds four information lines. */ --day-start: 420; /* minutes from midnight — 07:00 */ --day-min: 720; /* minutes drawn — 12 h */ --ruler-step-min: 15; /* neutral base granularity, drawn in --line-hair */ --hour-step-min: 60; /* hour rule, drawn in --line */ /* ========================================================================== 14 · Z-LAYERS — one ladder for the whole product. A raw z-index in a screen is a bug: it means two layers are arguing without a referee. ====================================================================== */ --z-base: 0; /* normal flow */ --z-raised: 1; /* event blocks and cards lifting under the pointer */ --z-sticky: 6; /* sticky column heads and time gutters inside a scroller */ --z-nowline: 8; /* the now-line: above sticky ground, below every overlay */ --z-scrim: 30; /* modal and bottom-sheet backdrop */ --z-surface: 31; /* the modal / sheet panel itself */ --z-popover: 40; /* anchored popovers and menus */ --z-toast: 50; /* transient confirmations — above the thing they confirm */ --z-skip: 100; /* the skip-to-content link, above absolutely everything */ } /* ============================================================================ REDUCED MOTION — collapse the durations at the token level, so a component that forgot to opt in still obeys. components.css additionally removes every translate and scale; between the two, nothing moves. ========================================================================== */ @media (prefers-reduced-motion: reduce){ :root{ --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } } /* Manual override for demo pages that ship a "hareketi azalt" switch — the same collapse, driven by an attribute instead of the OS setting. */ [data-motion="reduce"]{ --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }