/* design-language-gsp-xp.css — the "GSP XP" DESIGN LANGUAGE. Ben Hippler (Group CIO), 2026-08-20: "the design that you have made here, which is like SAP Windows XP style. Please save this design as an additional design language. As a matter of fact, for the test portal, use this design for the test portal... I want to see how this would look if we use this as a design theme for everything." This is a DESIGN LANGUAGE, not a themes.css accent theme: it remaps the core token set (paper/ink/type/shape) portal-wide. It activates ONLY under , which the root layout sets from the lane's PORTAL_DESIGN_LANGUAGE env — set on the TEST lane only. Production keeps the letterbox language untouched. Canonical reference implementation of the language's semantic components lives in the strategy app's strategy-xp.css (gsp-* classes). */ [data-ds-language="gsp-xp"] { /* palette — Windows-XP era: warm grey chrome, white work surfaces, XP-blue accent */ --paper: #ffffff; --paper-2: #ece9d8; --ink: #000000; --ink-soft: #1a1a1a; --ink-mute: #444444; --ink-faint: #777777; --hairline: #aca899; --baobab: #0a5bc4; --baobab-2: #0a246a; --baobab-bg: #d6dff7; --baobab-on: #ffffff; --signal-amber: #b58f2a; --signal-amber-bg: #f7e8b5; --signal-grass: #4a7c2f; --signal-grass-bg: #d3ecc9; /* type — dense system faces, no display serif */ --mmd-font-display: Tahoma, "Segoe UI", Verdana, sans-serif; --mmd-font-ui: Tahoma, "Segoe UI", Verdana, sans-serif; --mmd-font-mono: "Courier New", ui-monospace, monospace; --font-display: var(--mmd-font-display); --font-ui: var(--mmd-font-ui); --font-mono: var(--mmd-font-mono); /* shape — square chrome, hard edges */ --radius-sm: 0px; --radius: 0px; } /* chrome density: XP never wasted vertical space */ [data-ds-language="gsp-xp"] body { font-size: 13px; } /* The letterbox layer hardcodes font families and rounded chrome in many places, so tokens alone barely change the page. The language therefore also restyles the ELEMENT level — still DS-owned, no per-app forks. */ [data-ds-language="gsp-xp"] body, [data-ds-language="gsp-xp"] button, [data-ds-language="gsp-xp"] input, [data-ds-language="gsp-xp"] select, [data-ds-language="gsp-xp"] textarea { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; } [data-ds-language="gsp-xp"] h1, [data-ds-language="gsp-xp"] h2, [data-ds-language="gsp-xp"] h3, [data-ds-language="gsp-xp"] .module-title { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; font-weight: 700; letter-spacing: 0; } [data-ds-language="gsp-xp"] h1, [data-ds-language="gsp-xp"] .module-title { font-size: 18px; } [data-ds-language="gsp-xp"] .ds-button, [data-ds-language="gsp-xp"] .ds-input, [data-ds-language="gsp-xp"] .ds-select, [data-ds-language="gsp-xp"] .ds-textarea, [data-ds-language="gsp-xp"] .ds-pop, [data-ds-language="gsp-xp"] .ds-table-section { border-radius: 0; } [data-ds-language="gsp-xp"] .ds-button { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; text-transform: none; letter-spacing: 0; border: 1px solid var(--ds-c-blue-31); background: linear-gradient(180deg, var(--ds-c-white-01) 0%, var(--ds-c-yellow-11) 47%, var(--ds-c-amber-12) 100%); color: var(--ds-c-black-02); box-shadow: inset 1px 1px 0 var(--ds-c-white-01); } [data-ds-language="gsp-xp"] .ds-button:hover { background: linear-gradient(180deg, var(--ds-c-white-01) 0%, var(--ds-c-amber-08) 47%, var(--ds-c-amber-16) 100%); } [data-ds-language="gsp-xp"] .ds-button-primary { background: linear-gradient(180deg, var(--ds-c-blue-24) 0%, var(--ds-c-blue-32) 100%); color: var(--ds-c-white-01); border-color: var(--ds-c-blue-32); } [data-ds-language="gsp-xp"] .sb, [data-ds-language="gsp-xp"] .shell > .sb { background: linear-gradient(180deg, var(--ds-c-blue-24) 0%, var(--ds-c-blue-32) 100%); }