Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(lci-theme): add ae-c-lci-new.css — brand-accurate color and typography pass

Browse Source 
New parallel theme (data-theme='AE_c_LCI_new') based on the LCI Brand
Guidelines (March 2023, leanconstruction.org). The current ae-c-lci.css
is untouched. Both can coexist.

To activate for review: add @import './ae-c-lci-new.css' to app.css and
add 'AE_c_LCI_new' as a theme option in e_app_theme.svelte /
e_app_sys_bar.svelte / e_app_url_builder.svelte.

Changes vs current theme:
- Primary blue: anchored to #3a5997 (oklch 39% 0.14 264°) — was too
  light (47%) and undersaturated (C=0.11). Pantone Surf the Web.
- Secondary: rebuilt from 3-stop LCI scale (#d4e7f7 → #3598dc → #173378),
  hue shifted from 264° to 245° (brighter sky-blue direction).
- Tertiary purple: corrected to #8f44ad oklch(43% 0.20 309°) — was too
  light (52.73%) and low chroma (0.17). Pantone Dewberry.
- Success teal: minor tweak to #1bbc9d oklch(68% 0.14 175°). Pantone Mint Leaf.
- Error red: corrected to #df3527 oklch(53% 0.27 28°) — was too light
  (59.32%) and undersaturated (C=0.21). Pantone Cherry Tomato.
- Typography: heading-font-family → Proxima Nova/Montserrat (brand spec);
  base-font-family → Palatino/serif (brand spec). See file for Montserrat
  Google Fonts note and app-UI override guidance.
- Heading color: primary-500 (LCI blue) per brand guide PDF.
- Surface: hue shifted from 196° (teal, wrong direction) to 248° (blue).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-16 18:36:40 -04:00
parent 50d346a36c
commit ed8e7e57c0
1 changed files with 346 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
src/ae-c-lci-new.css Normal file
View File

@@ -0,0 +1,346 @@
/* ============================================================
* LCI Theme — NEW VERSION (for review/approval before swap)
* Source: LCI Brand Guidelines, March 2023 — leanconstruction.org
*
* Current live version: src/ae-c-lci.css ← DO NOT TOUCH YET
* Theme selector: data-theme="AE_c_LCI_new"
*
* TO ACTIVATE FOR TESTING: change the app's theme setting from
* 'AE_c_LCI' to 'AE_c_LCI_new'. Both files can coexist safely
* (different data-theme selectors, no conflicts).
*
* TO GO LIVE: change app theme to 'AE_c_LCI_new', move this file
* to ae-c-lci.css (old file → ~/tmp/agents_trash), update the
* selector back to 'AE_c_LCI', and remove this comment block.
*
* ============================================================
* KEY CHANGES FROM CURRENT VERSION
* ============================================================
*
* 1. PRIMARY BLUE — anchored to the official LCI blue #3a5997.
* Old primary-500: oklch(47% 0.11 262°) — too light, undersaturated.
* New primary-500: oklch(39% 0.14 264°) ≈ #3a5997 (RGB 58/90/152,
* CMYK 87/71/13/1, Pantone 19-3952 TCX "Surf the Web").
* Effect: buttons, links, and key UI chrome will read as the correct
* LCI navy rather than the current washed-out periwinkle.
*
* 2. SECONDARY — rebuilt from LCI's three-stop blue secondary palette.
* Light: #d4e7f7 (RGB 212/231/247) → near secondary-50
* Mid: #3598dc (RGB 53/152/220) → secondary-500
* Dark: #173378 (RGB 23/51/120) → near secondary-950
* The hue shifted from ~264° to ~245° to capture the brighter,
* more turquoise-leaning LCI blue correctly.
*
* 3. TERTIARY (Purple) — corrected to LCI Dewberry #8f44ad.
* Old: oklch(52.73% 0.17 315°) — too light, low chroma.
* New: oklch(43% 0.20 309°) — darker, more saturated.
* Pantone 18-3533 TCX "Dewberry".
*
* 4. SUCCESS (Teal) — minor adjustment, was already close.
* #1bbc9d (RGB 27/188/157), Pantone 15-5728 TCX "Mint Leaf".
*
* 5. ERROR (Red) — corrected to LCI Cherry Tomato #df3527.
* Old: oklch(59.32% 0.21 29°) — too light (6 pts), low chroma.
* New: oklch(53% 0.27 28°) — correctly saturated, richer red.
* Pantone 17-1563 TCX "Cherry Tomato".
*
* 6. WARNING — not in LCI brand guide. Keeping warm amber as a
* UI convention (slightly adjusted from current).
*
* 7. TYPOGRAPHY — added per brand guide (p.12):
* Headings: 'Proxima Nova', 'Montserrat', system-ui, sans-serif
* Body: 'Palatino Linotype', 'Palatino', 'Book Antiqua', serif
*
* NOTE on Proxima Nova: it is a licensed font (Adobe/Fontspring).
* Montserrat is the free Google Fonts alternative — load it via
* <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
* in app.html if it isn't already present.
*
* NOTE on body serif: Palatino is the LCI print/content spec. In
* a data-dense web app interface, the serif can feel heavy. If the
* client prefers the clean UI look, override --base-font-family
* to 'Proxima Nova', 'Montserrat', system-ui, sans-serif — which
* keeps the brand font for both headings and body, just sans-serif.
*
* 8. HEADING COLOR — set to primary-500 (LCI blue) per the brand
* guide PDF, where all section headings are printed in LCI blue.
*
* 9. SURFACE — subtle hue shift from 196° (teal, wrong direction)
* to 248° (blue, aligned with LCI's blue-dominant identity).
* ============================================================ */
[data-theme='AE_c_LCI_new'] {
--text-scaling: 1.067;
--base-font-color: var(--color-surface-950);
--base-font-color-dark: var(--color-surface-50);
/* LCI brand body font: Palatino (serif). See note above re: web app use. */
--base-font-family: 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
--base-font-size: inherit;
--base-line-height: inherit;
--base-font-weight: normal;
--base-font-style: normal;
--base-letter-spacing: 0em;
/* LCI brand heading font: Proxima Nova (fallback: Montserrat).
Heading color: LCI blue — as shown in the brand guide PDF. */
--heading-font-color: var(--color-primary-500);
--heading-font-color-dark: var(--color-primary-300);
--heading-font-family: 'Proxima Nova', 'Montserrat', system-ui, sans-serif;
--heading-font-weight: bold;
--heading-font-style: normal;
--heading-letter-spacing: inherit;
--anchor-font-color: var(--color-primary-500);
--anchor-font-color-dark: var(--color-primary-300);
--anchor-font-family: inherit;
--anchor-font-size: inherit;
--anchor-line-height: inherit;
--anchor-font-weight: inherit;
--anchor-font-style: inherit;
--anchor-letter-spacing: inherit;
--anchor-text-decoration: none;
--anchor-text-decoration-hover: underline;
--anchor-text-decoration-active: none;
--anchor-text-decoration-focus: none;
--spacing: 0.25rem;
--radius-base: 0.375rem;
--radius-container: 0.75rem;
--default-border-width: 1px;
--default-divide-width: 1px;
--default-ring-width: 1px;
--body-background-color: var(--color-surface-50);
--body-background-color-dark: var(--color-surface-950);
/* ----------------------------------------------------------
* PRIMARY — LCI Brand Blue
* #3a5997 | RGB 58/90/152 | CMYK 87/71/13/1
* Pantone 19-3952 TCX "Surf the Web"
*
* Anchored at primary-500. Old version was too light (47%)
* and undersaturated (C=0.11). Correct value is ~L39%, C0.14.
* ---------------------------------------------------------- */
--color-primary-50: oklch(94% 0.03 264deg);
--color-primary-100: oklch(88% 0.05 264deg);
--color-primary-200: oklch(79% 0.07 264deg);
--color-primary-300: oklch(68% 0.09 264deg);
--color-primary-400: oklch(56% 0.12 264deg);
--color-primary-500: oklch(39% 0.14 264deg); /* ≈ #3a5997 — LCI primary blue */
--color-primary-600: oklch(33% 0.13 265deg);
--color-primary-700: oklch(27% 0.12 265deg);
--color-primary-800: oklch(21% 0.11 266deg);
--color-primary-900: oklch(15% 0.09 266deg);
--color-primary-950: oklch(10% 0.07 267deg);
--color-primary-contrast-dark: var(--color-primary-950);
--color-primary-contrast-light: var(--color-primary-50);
--color-primary-contrast-50: var(--color-primary-contrast-dark);
--color-primary-contrast-100: var(--color-primary-contrast-dark);
--color-primary-contrast-200: var(--color-primary-contrast-dark);
--color-primary-contrast-300: var(--color-primary-contrast-dark);
--color-primary-contrast-400: var(--color-primary-contrast-dark);
--color-primary-contrast-500: var(--color-primary-contrast-light);
--color-primary-contrast-600: var(--color-primary-contrast-light);
--color-primary-contrast-700: var(--color-primary-contrast-light);
--color-primary-contrast-800: var(--color-primary-contrast-light);
--color-primary-contrast-900: var(--color-primary-contrast-light);
--color-primary-contrast-950: var(--color-primary-contrast-light);
/* ----------------------------------------------------------
* SECONDARY — LCI Secondary Blue Scale
* Light: #d4e7f7 | RGB 212/231/247 | CMYK 15/3/0/0 → near -50
* Mid: #3598dc | RGB 53/152/220 | CMYK 71/28/0/0 → -500
* Dark: #173378 | RGB 23/51/120 | CMYK 100/92/24/10 → near -950
*
* Hue shifted from 264° (primary direction) to 245° to correctly
* capture the brighter, more sky-blue character of this palette.
* ---------------------------------------------------------- */
--color-secondary-50: oklch(93% 0.03 245deg); /* ≈ #d4e7f7 — LCI light blue */
--color-secondary-100: oklch(88% 0.05 246deg);
--color-secondary-200: oklch(82% 0.08 246deg);
--color-secondary-300: oklch(74% 0.11 246deg);
--color-secondary-400: oklch(67% 0.15 245deg);
--color-secondary-500: oklch(60% 0.17 245deg); /* ≈ #3598dc — LCI medium blue */
--color-secondary-600: oklch(52% 0.16 248deg);
--color-secondary-700: oklch(43% 0.15 252deg);
--color-secondary-800: oklch(34% 0.14 257deg);
--color-secondary-900: oklch(26% 0.14 262deg);
--color-secondary-950: oklch(18% 0.12 265deg); /* ≈ #173378 — LCI dark navy */
--color-secondary-contrast-dark: var(--color-secondary-950);
--color-secondary-contrast-light: var(--color-secondary-50);
--color-secondary-contrast-50: var(--color-secondary-contrast-dark);
--color-secondary-contrast-100: var(--color-secondary-contrast-dark);
--color-secondary-contrast-200: var(--color-secondary-contrast-dark);
--color-secondary-contrast-300: var(--color-secondary-contrast-dark);
--color-secondary-contrast-400: var(--color-secondary-contrast-dark);
--color-secondary-contrast-500: var(--color-secondary-contrast-dark);
--color-secondary-contrast-600: var(--color-secondary-contrast-dark);
--color-secondary-contrast-700: var(--color-secondary-contrast-light);
--color-secondary-contrast-800: var(--color-secondary-contrast-light);
--color-secondary-contrast-900: var(--color-secondary-contrast-light);
--color-secondary-contrast-950: var(--color-secondary-contrast-light);
/* ----------------------------------------------------------
* TERTIARY — LCI Accent Purple / Dewberry
* #8f44ad | RGB 143/68/173 | CMYK 53/84/0/0
* Pantone 18-3533 TCX "Dewberry"
*
* Old: oklch(52.73% 0.17 315°) — too light by ~10pts, low chroma.
* New: oklch(43% 0.20 309°) — matches the actual LCI purple.
* ---------------------------------------------------------- */
--color-tertiary-50: oklch(94% 0.04 315deg);
--color-tertiary-100: oklch(87% 0.07 313deg);
--color-tertiary-200: oklch(79% 0.10 312deg);
--color-tertiary-300: oklch(70% 0.14 311deg);
--color-tertiary-400: oklch(60% 0.18 310deg);
--color-tertiary-500: oklch(43% 0.20 309deg); /* ≈ #8f44ad — LCI Dewberry purple */
--color-tertiary-600: oklch(37% 0.18 308deg);
--color-tertiary-700: oklch(31% 0.16 307deg);
--color-tertiary-800: oklch(24% 0.14 306deg);
--color-tertiary-900: oklch(18% 0.11 304deg);
--color-tertiary-950: oklch(12% 0.08 302deg);
--color-tertiary-contrast-dark: var(--color-tertiary-950);
--color-tertiary-contrast-light: var(--color-tertiary-50);
--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
/* ----------------------------------------------------------
* SUCCESS — LCI Teal / Mint Leaf
* #1bbc9d | RGB 27/188/157 | CMYK 73/0/51/0
* Pantone 15-5728 TCX "Mint Leaf"
*
* Old version was close (L71% vs correct ~L68%). Minor
* adjustment; hue and chroma were already accurate.
* ---------------------------------------------------------- */
--color-success-50: oklch(96% 0.05 178deg);
--color-success-100: oklch(90% 0.07 177deg);
--color-success-200: oklch(85% 0.09 176deg);
--color-success-300: oklch(80% 0.11 176deg);
--color-success-400: oklch(74% 0.12 175deg);
--color-success-500: oklch(68% 0.14 175deg); /* ≈ #1bbc9d — LCI Mint Leaf teal */
--color-success-600: oklch(61% 0.13 173deg);
--color-success-700: oklch(54% 0.12 172deg);
--color-success-800: oklch(46% 0.10 170deg);
--color-success-900: oklch(38% 0.09 168deg);
--color-success-950: oklch(29% 0.07 165deg);
--color-success-contrast-dark: var(--color-success-950);
--color-success-contrast-light: var(--color-success-50);
--color-success-contrast-50: var(--color-success-contrast-dark);
--color-success-contrast-100: var(--color-success-contrast-dark);
--color-success-contrast-200: var(--color-success-contrast-dark);
--color-success-contrast-300: var(--color-success-contrast-dark);
--color-success-contrast-400: var(--color-success-contrast-dark);
--color-success-contrast-500: var(--color-success-contrast-dark);
--color-success-contrast-600: var(--color-success-contrast-dark);
--color-success-contrast-700: var(--color-success-contrast-light);
--color-success-contrast-800: var(--color-success-contrast-light);
--color-success-contrast-900: var(--color-success-contrast-light);
--color-success-contrast-950: var(--color-success-contrast-light);
/* ----------------------------------------------------------
* WARNING — Warm amber (UI convention; not in LCI brand guide)
* LCI does not specify a warning/caution color. Using standard
* amber that doesn't conflict with the brand palette.
* ---------------------------------------------------------- */
--color-warning-50: oklch(97% 0.04 85deg);
--color-warning-100: oklch(94% 0.06 82deg);
--color-warning-200: oklch(91% 0.09 80deg);
--color-warning-300: oklch(88% 0.12 78deg);
--color-warning-400: oklch(85% 0.14 76deg);
--color-warning-500: oklch(80% 0.15 73deg);
--color-warning-600: oklch(73% 0.14 70deg);
--color-warning-700: oklch(67% 0.13 67deg);
--color-warning-800: oklch(60% 0.12 63deg);
--color-warning-900: oklch(53% 0.12 59deg);
--color-warning-950: oklch(46% 0.11 54deg);
--color-warning-contrast-dark: var(--color-warning-950);
--color-warning-contrast-light: var(--color-warning-50);
--color-warning-contrast-50: var(--color-warning-contrast-dark);
--color-warning-contrast-100: var(--color-warning-contrast-dark);
--color-warning-contrast-200: var(--color-warning-contrast-dark);
--color-warning-contrast-300: var(--color-warning-contrast-dark);
--color-warning-contrast-400: var(--color-warning-contrast-dark);
--color-warning-contrast-500: var(--color-warning-contrast-dark);
--color-warning-contrast-600: var(--color-warning-contrast-light);
--color-warning-contrast-700: var(--color-warning-contrast-light);
--color-warning-contrast-800: var(--color-warning-contrast-light);
--color-warning-contrast-900: var(--color-warning-contrast-light);
--color-warning-contrast-950: var(--color-warning-contrast-light);
/* ----------------------------------------------------------
* ERROR — LCI Cherry Tomato
* #df3527 | RGB 223/53/39 | CMYK 7/93/99/1
* Pantone 17-1563 TCX "Cherry Tomato"
*
* Old: oklch(59.32% 0.21 29°) — too light by 6pts, chroma too
* low (0.21 vs correct ~0.27). The LCI red should read as a
* strong, saturated signal red — not a muted tomato-orange.
* ---------------------------------------------------------- */
--color-error-50: oklch(90% 0.06 38deg);
--color-error-100: oklch(84% 0.10 34deg);
--color-error-200: oklch(78% 0.14 32deg);
--color-error-300: oklch(72% 0.18 30deg);
--color-error-400: oklch(65% 0.23 29deg);
--color-error-500: oklch(53% 0.27 28deg); /* ≈ #df3527 — LCI Cherry Tomato */
--color-error-600: oklch(46% 0.24 28deg);
--color-error-700: oklch(39% 0.21 28deg);
--color-error-800: oklch(31% 0.17 28deg);
--color-error-900: oklch(24% 0.13 28deg);
--color-error-950: oklch(16% 0.09 28deg);
--color-error-contrast-dark: var(--color-error-950);
--color-error-contrast-light: var(--color-error-50);
--color-error-contrast-50: var(--color-error-contrast-dark);
--color-error-contrast-100: var(--color-error-contrast-dark);
--color-error-contrast-200: var(--color-error-contrast-dark);
--color-error-contrast-300: var(--color-error-contrast-dark);
--color-error-contrast-400: var(--color-error-contrast-dark);
--color-error-contrast-500: var(--color-error-contrast-light);
--color-error-contrast-600: var(--color-error-contrast-light);
--color-error-contrast-700: var(--color-error-contrast-light);
--color-error-contrast-800: var(--color-error-contrast-light);
--color-error-contrast-900: var(--color-error-contrast-light);
--color-error-contrast-950: var(--color-error-contrast-light);
/* ----------------------------------------------------------
* SURFACE — near-neutral with subtle LCI blue tint
*
* Old version used hue 196° (teal direction). Shifted to 248°
* to align with the LCI blue identity without being distracting.
* surface-50 stays pure white (brand spec: white is a primary
* color in the LCI palette).
* ---------------------------------------------------------- */
--color-surface-50: oklch(100% 0 none);
--color-surface-100: oklch(97.5% 0.003 248deg);
--color-surface-200: oklch(95% 0.005 248deg);
--color-surface-300: oklch(92% 0.007 250deg);
--color-surface-400: oklch(89% 0.008 250deg);
--color-surface-500: oklch(86% 0.008 250deg);
--color-surface-600: oklch(78% 0.008 252deg);
--color-surface-700: oklch(69% 0.007 254deg);
--color-surface-800: oklch(60% 0.006 256deg);
--color-surface-900: oklch(50% 0.005 258deg);
--color-surface-950: oklch(40% 0.004 260deg);
--color-surface-contrast-dark: var(--color-surface-950);
--color-surface-contrast-light: var(--color-surface-50);
--color-surface-contrast-50: var(--color-surface-contrast-dark);
--color-surface-contrast-100: var(--color-surface-contrast-dark);
--color-surface-contrast-200: var(--color-surface-contrast-dark);
--color-surface-contrast-300: var(--color-surface-contrast-dark);
--color-surface-contrast-400: var(--color-surface-contrast-dark);
--color-surface-contrast-500: var(--color-surface-contrast-dark);
--color-surface-contrast-600: var(--color-surface-contrast-dark);
--color-surface-contrast-700: var(--color-surface-contrast-dark);
--color-surface-contrast-800: var(--color-surface-contrast-dark);
--color-surface-contrast-900: var(--color-surface-contrast-light);
--color-surface-contrast-950: var(--color-surface-contrast-light);
}