/* ───────────────────────────────────────────────────────────────────────────── INKLINE · design tokens (single source of truth — everything else derives) Flat ink, one accent, one continuous line, generous space. No second hue. No gradients. No glow. No grain. No pure black or white. Two themes, same brand: ink (default, dark) · paper (light) Switch with — components only use the semantic tokens (--ik-bg, --ik-text, …), never the raw palette, so they follow. Mirrored in tokens.json — change both together. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── core palette (raw — reference these only to define semantics) ─────── */ --ik-ink: #090A0C; /* the ground. never use #000 */ --ik-paper: #F6F3EC; /* the page / the chalk. never use #fff */ --ik-dim: #C9C4B8; /* secondary line & text on ink */ --ik-faint: #8E897D; /* edges, hairlines, tertiary text on ink */ --ik-marker: #FF5A2D; /* THE accent. one per view, on the one thing that matters */ --ik-marker-text: #C4360F; /* marker for small text on paper (AA 4.9:1) */ --ik-marker-deep: #B8380F; /* a darker marker: the base a filled marker button rests on */ /* raised surfaces + rules per ground */ /* secondary / disabled text per ground — the only greys the UI text uses */ --ik-text-2-ink: #A9A497; --ik-text-3-ink: #6E6A60; --ik-text-2-paper: #625E54; --ik-text-3-paper: #A29D90; /* raised surfaces on ink: true neutral (R = G = B) — no blue cast, no brown cast */ --ik-ink-1: #121212; --ik-ink-2: #1B1B1B; --ik-ink-rule: #272727; --ik-paper-1: #FBF9F4; --ik-paper-2: #EFEBE1; --ik-paper-rule: #DDD8CB; /* ── extension colours: OPT-IN, emphasis only (growth · wins · questions) ── Not part of the core brand. Never decoration, never used to tell kinds apart (that is what shapes are for). Introduced in ICOR × Inkline. */ --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; /* ── type ───────────────────────────────────────────────────────────────── */ --ik-font-display: "Bricolage Grotesque", system-ui, sans-serif; /* headlines, big numbers — 700/800, tight tracking */ --ik-font-body: "Instrument Sans", system-ui, sans-serif; /* everything you read */ --ik-font-hand: "Caveat", cursive; /* short human notes, always in marker */ --ik-fs-display: clamp(52px, 8vw, 88px); --ik-fs-h1: clamp(34px, 5vw, 48px); --ik-fs-h2: 28px; --ik-fs-h3: 20px; --ik-fs-body: 16px; --ik-fs-small: 14px; --ik-fs-label: 11px; --ik-fs-hand: 26px; --ik-track-display: -0.035em; --ik-track-heading: -0.022em; --ik-track-label: 0.1em; --ik-track-label-tight: 0.06em; /* ── space (4pt grid) ───────────────────────────────────────────────────── */ --ik-s-1: 4px; --ik-s-2: 8px; --ik-s-3: 12px; --ik-s-4: 16px; --ik-s-5: 20px; --ik-s-6: 24px; --ik-s-7: 32px; --ik-s-8: 48px; --ik-s-9: 72px; --ik-s-10: 120px; /* ── shape ──────────────────────────────────────────────────────────────── */ --ik-r-xs: 6px; /* tags, kbd */ --ik-r-sm: 8px; /* row leads, checkboxes */ --ik-r-btn: 10px; /* buttons (compact) */ --ik-r-md: 14px; /* buttons (touch), menus, toasts, tab items */ --ik-r-lg: 18px; /* cards */ --ik-r-xl: 26px; /* hero, sheets */ --ik-r-pill: 999px; --ik-hair: 1px; /* every outline is this thin */ --ik-gutter-float: 8px; /* every floating panel stays this far inside the screen (Inkline.place) */ /* layers (UI-3): one scale instead of literal z-indexes — a toast is never under a dialog, a tooltip never under a menu */ --ik-z-raised: 1; --ik-z-sticky: 20; --ik-z-dock: 50; --ik-z-float: 90; --ik-z-pop: 100; --ik-z-modal: 200; --ik-z-tip: 300; --ik-z-toast: 400; --ik-z-drag: 500; /* focus (UI-5): one ring, never thinner than 1.5px (the hairline drops to .5px on sharp screens) */ --ik-focus-w: 1.5px; /* touch (UI-6): every control is at least this big to a finger, whatever it looks like */ --ik-target: 44px; --ik-glass-blur: blur(24px) saturate(180%); /* how much the glass (.ik-tabbar--glass) softens what scrolls under it */ /* phone geometry (UI-8): the side rail, and the dock — the tab bar and its gap — that floating pieces sit above */ --ik-rail-w: 252px; --ik-dock: 0px; --ik-bar: 0px; --ik-topbar-h: 56px; /* --ik-topbar-h: the phone top bar (the admin tool sits under it) · --ik-bar: an editor bar on the page (set by inkline.css); bottom-floating pieces lift above it */ /* breakpoints, named (used in @media as plain numbers): phone ≤ 560 · tablet ≤ 860 · laptop ≤ 1180 */ --ik-stroke-glyph: 1.8px; /* glyph units: a 12px glyph ≈ 1px line; larger sizes thin it down */ --ik-stroke-line: 1.5px; /* diagram line */ --ik-stroke-marker: 2.5px; /* the marker tracing progress */ /* ── depth: NEVER a blur, NEVER a grey underline ───────────────────────────── · filled buttons rest on a darker version of their own colour (--ik-sink tall) · everything else is flat: a thin outline (--ik-outline) or a fill, and when pressed it moves INTO the surface (fill sinks + a hard 2px inner top edge) */ --ik-sink: 4px; /* height of a filled button's tonal base */ --ik-outline: color-mix(in srgb, var(--ik-faint) 34%, transparent); /* the thin outline (02.1: lighter — a line you notice second) */ /* ── motion: everything gives back. springs, not eases. ─────────────────── */ /* PRESS = spring(stiffness 720, damping 20, mass 0.6) · ~18% overshoot */ --ik-press: 320ms linear(0, 0.025, 0.091, 0.187, 0.303, 0.429, 0.557, 0.681, 0.795, 0.896, 0.982, 1.052, 1.105, 1.143, 1.166, 1.177, 1.177, 1.169, 1.154, 1.135, 1.114, 1.091, 1.068, 1.047, 1.028, 1.011, 0.997, 0.986, 0.978, 0.972, 0.969, 0.968, 0.969, 0.971, 0.974, 0.978, 0.982, 0.986, 0.99, 0.993, 0.997, 0.999, 1.002, 1.003, 1.005, 1.005, 1.006, 1.006, 1); /* SOFT = spring(stiffness 220, damping 22) · pills sliding, sheets, layout moves */ --ik-soft: 500ms linear(0, 0.016, 0.057, 0.117, 0.189, 0.267, 0.349, 0.431, 0.51, 0.585, 0.654, 0.717, 0.773, 0.823, 0.866, 0.902, 0.933, 0.959, 0.979, 0.995, 1.008, 1.017, 1.023, 1.028, 1.03, 1.031, 1.031, 1.03, 1.028, 1.026, 1.023, 1.021, 1.018, 1.016, 1.013, 1.011, 1.009, 1.007, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1, 1, 0.999, 1); --ik-quick: 160ms cubic-bezier(0.2, 0.9, 0.25, 1); /* colour / opacity changes */ --ik-trace: 900ms cubic-bezier(0.3, 0.7, 0.2, 1); /* the marker drawing a line */ --ik-fly: 640ms linear(0, 0.012, 0.045, 0.094, 0.154, 0.222, 0.295, 0.37, 0.446, 0.52, 0.592, 0.66, 0.724, 0.783, 0.837, 0.886, 0.929, 0.966, 0.998, 1.024, 1.044, 1.058, 1.067, 1.071, 1.071, 1.068, 1.062, 1.054, 1.045, 1.036, 1.026, 1.018, 1.01, 1.004, 0.999, 0.996, 0.994, 0.994, 0.995, 0.996, 0.998, 0.999, 1); /* Holista fly-out: a soft arrival with one small overshoot */ --ik-slide: 500ms cubic-bezier(0.32, 0.72, 0, 1); /* iOS's own glide (15z-d): a sheet rising, a page pushed — fast out, long settle, no overshoot (a sheet never lifts off the bottom) */ } /* ═══ INK — the default ground (dark) ═════════════════════════════════════ */ :root, :root[data-theme="ink"] { --ik-bg: var(--ik-ink); --ik-surface: var(--ik-ink-1); --ik-surface-2: var(--ik-ink-2); --ik-text: var(--ik-paper); --ik-text-2: var(--ik-text-2-ink); /* meta, captions (AA 8:1) */ --ik-text-3: var(--ik-text-3-ink); /* disabled / decorative only */ --ik-rule: var(--ik-ink-rule); --ik-line: var(--ik-faint); /* outlines that must be seen */ --ik-solid: var(--ik-paper); /* solid controls invert with the ground */ --ik-on-solid: var(--ik-ink); --ik-on-solid-accent: #C4360F; /* accent text/icons ON a solid surface (paper here) */ --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 60%, transparent); /* hard inner top edge of something pressed in */ --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-paper) 7%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 62%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .30), 0 6px 12px -2px rgb(0 0 0 / .30), 0 22px 36px -8px rgb(0 0 0 / .38), 0 52px 80px -18px rgb(0 0 0 / .42); /* a card floating toward you: a tight contact shadow, then ever longer and softer ones, as if it stood far out of the screen */ --ik-float-up: 0 2px 3px rgb(0 0 0 / .28), 0 10px 18px -2px rgb(0 0 0 / .32), 0 34px 52px -8px rgb(0 0 0 / .40), 0 72px 110px -20px rgb(0 0 0 / .46); --ik-sage: #86A97A; --ik-sage-ink: #A9C79E; --ik-sage-tint: #1E2A1B; --ik-ochre: #EDB742; --ik-ochre-ink: #EDC46B; --ik-ochre-tint: #2C2412; --ik-slate: #7FA0BD; --ik-slate-ink: #A4C1DA; --ik-slate-tint: #17222C; /* the four ICOR circles (framework, tool set, category picker) */ --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #D9826B; /* glass (post-release 01): the ONE translucent, blurred material — the phone's floating tab bar (.ik-tabbar--glass), as iOS draws its own */ --ik-glass: color-mix(in srgb, var(--ik-ink) 56%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-paper) 24%, transparent); color-scheme: dark; } /* ═══ PAPER — the light ground ════════════════════════════════════════════ */ :root[data-theme="paper"] { --ik-bg: var(--ik-paper); --ik-surface: var(--ik-paper-1); --ik-surface-2: var(--ik-paper-2); --ik-text: var(--ik-ink); --ik-text-2: var(--ik-text-2-paper); /* AA 5.8:1 */ --ik-text-3: var(--ik-text-3-paper); /* disabled / decorative only (2.4:1 — never for content) */ --ik-rule: var(--ik-paper-rule); --ik-outline: color-mix(in srgb, var(--ik-faint) 44%, transparent); --ik-line: var(--ik-faint); --ik-solid: var(--ik-ink); --ik-on-solid: var(--ik-paper); --ik-on-solid-accent: #FF5A2D; --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 16%, transparent); --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker-text); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-ink) 5.5%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 38%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .14), 0 6px 12px -2px rgb(0 0 0 / .16), 0 22px 36px -8px rgb(0 0 0 / .22), 0 52px 80px -18px rgb(0 0 0 / .26); --ik-float-up: 0 2px 3px rgb(0 0 0 / .16), 0 10px 18px -2px rgb(0 0 0 / .20), 0 34px 52px -8px rgb(0 0 0 / .26), 0 72px 110px -20px rgb(0 0 0 / .30); --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #C0583B; --ik-glass: color-mix(in srgb, var(--ik-paper) 62%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-ink) 8%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --ik-fly: 1ms linear; --ik-press: 1ms linear; --ik-soft: 1ms linear; --ik-quick: 1ms linear; --ik-trace: 1ms linear; --ik-slide: 1ms linear; } } /* the member's own choice beats the device (UI-4): ; absent = follow the device */ :root[data-motion="reduce"] { --ik-fly: 1ms linear; --ik-press: 1ms linear; --ik-soft: 1ms linear; --ik-quick: 1ms linear; --ik-trace: 1ms linear; --ik-slide: 1ms linear; } @media (max-width: 860px) { :root { --ik-dock: calc(80px + env(safe-area-inset-bottom, 0px)); } } /* native tab bar mode (post-release 01): inside the iPhone and iPad app the app draws iOS's own tab bar. The app sets and --ik-native-tabbar-h (the bar's height above the home indicator, 49px on iPhone; 0 when the web view ends above the bar); the web bar is not drawn and the dock is the native bar + the safe area + 12px */ :root[data-ik-native-tabbar] { --ik-dock: calc(var(--ik-native-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); } :root[data-ik-rail] { --ik-rail-w: 80px; } /* ═══ HAIRLINE — on sharp screens an outline is one device pixel (02.1) ══════ */ @media (min-resolution: 2dppx) { :root { --ik-hair: .5px; } }