/* ========================================================================== MySkydrol 2.0 — Design Tokens Sketch Development Services · Zach Smyth v0.2 · Sep 1 2026 ✅ VALUES BELOW MARKED [BUILD] WERE EXTRACTED FROM THE RUNNING QA BUILD on Sep 1 2026 by reading computed CSS. They are what the product actually renders today — not approximations. Stack: Vue + Vuetify. Every "current" color below resolves through Vuetify's theme config, which means a token pass is a change to one theme object — not a per-component edit. ========================================================================== */ :root { /* ====================================================================== CURRENT — as built. Do not change without telling the dev team. ====================================================================== */ /* --- Brand ------------------------------------------------------------ */ --berry: #B20077; /* [BUILD] "Eastman-Berry". Primary actions, active nav, links, avatar. THE brand color. */ /* --- Declared text tokens (found in the build's own stylesheet) -------- */ --text-primary: #212121; /* [BUILD] declared as --text-primary */ --text-secondary: #616161; /* [BUILD] declared as --text-secondary */ --text-critical: #B22126; /* [BUILD] declared as --text-critical */ /* --- Typography -------------------------------------------------------- */ --font-primary: "sofia-pro", "Sofia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-secondary: "Apparat", Georgia, serif; /* [BUILD] declared as --font-family-primary and --font-family-secondary. Both are licensed faces — prototypes need either the webfont files or an approved fallback. */ /* --- Surfaces & lines -------------------------------------------------- */ --surface: #FFFFFF; /* [BUILD] */ --surface-sunken: #F5F5F5; /* [BUILD] page background */ --line: #E0E0E0; /* [BUILD] default border */ --line-strong: #BDBDBD; /* [BUILD] */ --line-heavy: #808080; /* [BUILD] */ --app-bar-height: 64px; /* [BUILD] */ /* --- Status pills — as built ------------------------------------------- */ /* ⚠️ These are unmodified Material Design palette values, not brand colors. Radius 9999px · 14px/700 · padding 0 12px */ --pill-new-fg: #0D47A1; /* [BUILD] Material Blue 900 */ --pill-new-bg: #E3F2FD; /* [BUILD] Material Blue 50 */ --pill-accepted-fg: #5D4037; /* [BUILD] Material Brown 700 ⚠️ see notes */ --pill-accepted-bg: #FFE0B2; /* [BUILD] Material Orange 100 */ --pill-delivered-fg: #388E3C; /* [BUILD] Material Green 700 */ --pill-delivered-bg: #E8F5E9; /* [BUILD] Material Green 50 */ /* --- Radius — as built -------------------------------------------------- */ --r-pill: 9999px; /* [BUILD] status chips, 20 instances */ --r-round: 50%; /* [BUILD] avatars */ --r-card: 4px; /* [BUILD] only 3 instances */ --r-button: 0px; /* [BUILD] ⚠️ buttons are square while chips are fully round — the two most common interactive elements disagree about the product's shape language. */ /* --- Type scale in use — as built --------------------------------------- */ /* 14/400 ×140 · 16/400 ×77 · 14/700 ×31 · 14/500 ×30 · 16/500 ×12 34/400 ×8 · 16/700 ×6 · 21/500 ×6 · 24/500 ×4 · 24/700 ×3 20/700 ×1 · 17/700 ×1 ⚠️ Seven sizes with 17/20/21/24 clustered. That's accumulation, not a scale — the clearest single piece of evidence for a token pass. */ /* ====================================================================== PROPOSED — Tier 0 token pass. Layout-neutral, Vuetify-theme-level. Nothing below changes a component's structure, size, or position. ====================================================================== */ /* --- Berry ramp -------------------------------------------------------- */ /* One brand color isn't enough for text, fill, border, hover and tint. All derived from the real #B20077. */ --berry-900: #4C0033; --berry-800: #75004F; --berry-700: #940063; --berry-600: #B20077; /* = current --berry, unchanged */ --berry-500: #C92A90; --berry-300: #E58FC6; --berry-100: #F9E0EF; --berry-050: #FDF3F9; /* --- Critical, separated from brand ------------------------------------ */ /* ⚠️ #B22126 (critical) and #B20077 (brand) sit at nearly the same lightness in the same warm family. In a product where red means "the airline is REQUIRED to act" per Boeing/Airbus, the primary action color must not be confusable with it — especially under protanopia/deuteranopia, where they converge further. Proposal: push critical cooler and darker, away from berry. */ --critical-700: #8E1219; --critical-600: #B3121B; /* replaces #B22126 */ --critical-100: #FCE8EA; /* --- Condition semantics ------------------------------------------------ */ /* Red = past an airframe-manufacturer limit → action REQUIRED. Amber = Eastman courtesy flag approaching a limit → NO obligation. These differ in kind, not degree. Treated distinctly, not as a ramp. */ --state-required: var(--critical-600); --state-required-bg: var(--critical-100); --state-advisory: #A86503; --state-advisory-bg: #FDF2DE; --state-normal: #1F7A44; --state-normal-bg: #E7F4EC; /* --- Status pills, rebuilt on brand-adjacent neutrals -------------------- */ /* Same shape, same size, same position. Brown-on-orange for a neutral "Accepted" state is the weakest color in the product. */ --pill-new-fg-p: #1B4F8A; --pill-new-bg-p: #E8F1FA; --pill-accepted-fg-p: #6B4B14; --pill-accepted-bg-p: #FAF0DC; --pill-delivered-fg-p: var(--state-normal); --pill-delivered-bg-p: var(--state-normal-bg); /* --- Hydraulic line identity ------------------------------------------- */ /* NOT arbitrary chart colors — these name physical hydraulic lines on the aircraft: Blue (01), Yellow (02), Green (03), Unknown (04). Must stay literal and must never be reused for anything else. */ --line-blue: #2F6FD0; --line-yellow: #C99A06; --line-green: #17845A; --line-unknown: #7A7F8C; /* --- Neutral ramp ------------------------------------------------------- */ /* Slightly warm, so berry sits in the same family rather than fighting a cold gray. Anchored on the existing #212121 / #616161 / #E0E0E0. */ --ink-900: #1A1418; --ink-800: #212121; /* = current --text-primary */ --ink-700: #3F3A3E; --ink-600: #616161; /* = current --text-secondary */ --ink-500: #857F84; --ink-400: #ABA5AA; --ink-300: #CFC9CE; --ink-200: #E0E0E0; /* = current border */ --ink-100: #F0EDEF; --ink-050: #F5F5F5; /* = current page background */ --white: #FFFFFF; /* --- Type scale, proposed ------------------------------------------------ */ /* Six steps replacing seven ad-hoc sizes. 14 and 16 stay exactly where they are — they carry 90% of the UI — so the vast majority of screens don't shift at all. Only the clustered display sizes resolve. */ --t-display: 700 32px/1.12 var(--font-primary); /* was 34/400 */ --t-h1: 700 24px/1.2 var(--font-primary); /* was 24/500 + 24/700 */ --t-h2: 600 20px/1.28 var(--font-primary); /* absorbs 20 + 21 */ --t-h3: 600 16px/1.4 var(--font-primary); /* was 16/700 + 17/700 */ --t-body: 400 14px/1.6 var(--font-primary); /* unchanged */ --t-body-lg: 400 16px/1.6 var(--font-primary); /* unchanged */ --t-label: 600 11px/1.4 var(--font-primary); --track-label: 0.08em; /* --- Tabular numerals ---------------------------------------------------- */ /* The single highest impact-to-effort change available. Every lab value in this product sits in a column being compared vertically against a spec. Apply to all numeric cells: font-variant-numeric: tabular-nums; */ --font-num: var(--font-primary); --num-feature: tabular-nums; /* --- Space (8pt) --------------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* --- Radius, proposed ----------------------------------------------------- */ /* Resolves the square-button / round-pill contradiction. Buttons and inputs pick up the 4px already used on cards. Chips stay pills — that's correct for status. Nothing resizes. */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 9999px; /* --- Elevation ------------------------------------------------------------ */ /* Borders first, shadow second; shadows tinted with the brand hue rather than pure black so depth belongs to the palette. */ --e-1: 0 1px 2px rgba(76, 0, 51, 0.05); --e-2: 0 2px 4px rgba(76, 0, 51, 0.05), 0 4px 12px rgba(76, 0, 51, 0.05); --e-3: 0 8px 24px rgba(76, 0, 51, 0.09), 0 2px 6px rgba(76, 0, 51, 0.05); --e-4: 0 24px 60px rgba(76, 0, 51, 0.14), 0 6px 16px rgba(76, 0, 51, 0.06); --border: 1px solid var(--ink-200); --ease: cubic-bezier(0.4, 0, 0.2, 1); /* --- Focus ---------------------------------------------------------------- */ /* No consistent focus treatment exists in the build today. Missing states are the loudest "unfinished" signal in any product, and this is pure token work. */ --focus-ring: 0 0 0 3px var(--berry-100); --focus-edge: var(--berry-600); }