/* ========================================================================== Silvaco design tokens Palette and typography per the Silvaco Brand Guidelines v1.0. The layout scale (grid, spacing, elevation, chrome heights) is carried over from the approved layout foundation unchanged. ========================================================================== */ /* ---------- Typefaces ---------- Primary · Univers — headings and brand statements. No licensed Univers webfont was supplied with this project, so the stack falls back to the closest neo-grotesques already present on the system. Drop UniversLTStd-*.woff2 into assets/fonts/ and uncomment the @font-face block below to switch it on. Secondary · Poppins — body copy, navigation, buttons, labels (SIL OFL 1.1, self-hosted from assets/fonts/). -------------------------------------------------------------------------- */ /* @font-face{font-family:"Univers";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/UniversLTStd-Roman.woff2") format("woff2")} @font-face{font-family:"Univers";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/UniversLTStd-Medium.woff2") format("woff2")} @font-face{font-family:"Univers";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/UniversLTStd-Bold.woff2") format("woff2")} */ @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/Poppins-400.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/Poppins-500.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/Poppins-600.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/Poppins-700.woff2") format("woff2")} :root{ /* Primary typeface — headings */ --sv-font-display:"Univers","Univers LT Std","Helvetica Neue",Helvetica,Arial,sans-serif; /* Secondary typeface — everything else */ --sv-font:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif; /* Alias kept so component CSS carried over from the layout foundation keeps resolving; it points at the secondary (interface) face. */ --ps-font:var(--sv-font); /* ---------- Brand core ---------- Blood Red #CF142B the accent. Used sparingly: primary CTA, active state, thin rules, data highlights, circuit nodes. Dark Red #AD2528 pressed/hover depth for the accent, and the logo. Charcoal #222220 the confident dark base. Dark Gray #606262 secondary surfaces and muted type. Pure White #FFFFFF the page canvas. -------------------------------------------------------------------- */ --sv-red:#cf142b; --sv-red-dark:#ad2528; --sv-charcoal:#222220; --sv-gray:#606262; --sv-white:#ffffff; /* ---------- Accent ramp (derived from Blood Red) ---------- Kept deliberately short. Red is an accent, never a surface wash. */ --ps-color-brand-000:#fdeaec; --ps-color-brand-100:#f8c6cc; --ps-color-brand-200:#f09aa4; --ps-color-brand-300:#e56a7a; --ps-color-brand-400:#dc3a51; --ps-color-brand-500:#cf142b; /* Blood Red */ --ps-color-brand-600:#ad2528; /* Dark Red */ --ps-color-brand-700:#8e1c20; --ps-color-brand-800:#6b1518; --ps-color-brand-900:#470e10; /* ---------- Cool technical neutrals ---------- The workhorse of the palette. Graphite through to near-white. */ --ps-color-neutral-1-000:#ffffff; --ps-color-neutral-1-500:#ffffff; /* page canvas — Pure White */ --ps-color-neutral-1-600:#e7e8e8; --ps-color-neutral-1-700:#c9cbcb; --ps-color-neutral-2-000:#fafbfb; /* faintest surface tint */ --ps-color-neutral-2-100:#f4f5f5; --ps-color-neutral-2-200:#eceded; --ps-color-neutral-2-300:#e1e3e3; /* hairline rules / card borders */ --ps-color-neutral-2-500:#c9cbcb; --ps-color-neutral-2-900:#454747; --ps-color-neutral-3-100:#b4b6b6; --ps-color-neutral-3-200:#8d9090; --ps-color-neutral-3-400:#4a4c4b; --ps-color-neutral-3-500:#222220; /* Charcoal — primary type */ --ps-color-neutral-3-600:#1c1c1a; --ps-color-neutral-3-700:#161614; --ps-color-neutral-3-900:#0e0e0d; /* near-black */ /* ---------- Secondary technical tones ---------- Quiet graphite/steel family. These carry the surfaces that were saturated in the source layout, so red never becomes a background. */ --ps-color-secondary-1-100:#e1e3e3; --ps-color-secondary-1-200:#c9cbcb; --ps-color-secondary-1-300:#a9acac; --ps-color-secondary-2-500:#3a3c3c; /* graphite chip */ --ps-color-secondary-2-800:#252727; /* mint in the source layout -> cool steel tint (selection / soft surface) */ --ps-color-secondary-3-000:#f6f8f8; --ps-color-secondary-3-400:#e8ebeb; --ps-color-secondary-3-500:#dfe3e3; --ps-color-secondary-4-700:#3f4241; /* dark band */ --ps-color-secondary-4-800:#2c2e2e; /* the "primary button" family -> Dark Gray */ --ps-color-secondary-5-400:#7a7c7c; --ps-color-secondary-5-500:#606262; /* Dark Gray */ --ps-color-secondary-5-600:#4d4f4f; --ps-color-secondary-5-700:#3a3c3c; --ps-color-secondary-7-100:#f8c6cc; /* ---------- Status ---------- */ --ps-color-success-800:#1f6b4a; --ps-color-problem-600:#ad2528; /* ---------- Gradients ---------- */ --ps-color-gradient-neutral-light:linear-gradient(180deg,#fafbfb 0%,#ffffff 100%); --ps-color-gradient-brand:linear-gradient(180deg,#cf142b 0%,#ad2528 100%); /* ---------- Recolour filters (for -based icons and logos) ---------- */ --ps-filter-neutral-1-500:brightness(0) invert(100%); --ps-filter-neutral-3-500:brightness(0) saturate(100%) invert(9%) sepia(4%) saturate(1013%) hue-rotate(22deg) brightness(97%) contrast(88%); --ps-filter-secondary-5-500:brightness(0) saturate(100%) invert(39%) sepia(6%) saturate(180%) hue-rotate(131deg) brightness(94%) contrast(88%); --ps-filter-brand-500:brightness(0) saturate(100%) invert(15%) sepia(85%) saturate(4718%) hue-rotate(346deg) brightness(96%) contrast(94%); --ps-filter-brand-600:brightness(0) saturate(100%) invert(14%) sepia(70%) saturate(3320%) hue-rotate(343deg) brightness(96%) contrast(94%); --ps-filter-brand-700:brightness(0) saturate(100%) invert(11%) sepia(63%) saturate(3459%) hue-rotate(342deg) brightness(93%) contrast(96%); /* ---------- Elevation ---------- */ --ps-shadow-bottom-sm:0 2px 6px 0 rgba(34,34,32,.10); --ps-shadow-bottom-md:0 8px 24px 0 rgba(34,34,32,.12); --ps-shadow-bottom-xl:0 32px 96px 0 rgba(34,34,32,.24); /* ---------- Layout grid (unchanged from the approved foundation) ---------- */ --ps-grid-max-width:2000px; --ps-grid-margin:24px; --ps-grid-gutter:16px; --ps-grid-columns:4; /* ---------- Chrome heights (unchanged) ---------- */ --ps-utility-menu-height:40px; --ps-global-nav-height:64px; --ps-global-nav-height-condensed:48px; } @media (min-width:640px){ :root{--ps-grid-margin:40px;--ps-grid-gutter:20px;--ps-grid-columns:12} } @media (min-width:1024px){ :root{--ps-grid-margin:64px;--ps-grid-gutter:20px;--ps-grid-columns:12} }