/* ========================================================================== CloudServus — Brand Design Tokens For: client portal / internal apps that should match cloudservus.com Generated 2026-08-31 from the live production site. Every value below was read off www.cloudservus.com, not reconstructed. Contrast ratios are computed (WCAG 2.1 relative luminance) and noted inline so you can defend each choice in an accessibility review. HOW TO USE Drop this file in, then reference the custom properties. Don't hard-code hexes in your components — point at the tokens so a future brand change is one file, not a find-and-replace. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPEFACE The site uses ONE face: Open Sans. (The live page also link-loads Poppins and Fraunces, but no stylesheet ever references them — they're leftovers from the parent marketplace theme. Don't carry them over.) Weights actually in use: 400, 600, 700, 800. -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap'); :root { --cs-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ------------------------------------------------------------------------ 2. BRAND CORE — the identity colors. These are fixed. ------------------------------------------------------------------------ */ --cs-navy: #00213C; /* primary brand navy — site background */ --cs-navy-deep: #04121F; /* deepest navy, footer / high contrast */ --cs-navy-raised: #081F36; /* raised navy surface */ --cs-navy-panel: #0A2440; /* panel / card navy */ --cs-orange: #F98023; /* brand orange — THE accent. Use sparingly. */ --cs-blue: #004191; /* primary brand blue */ --cs-blue-light: #7FB3F5; /* light blue accent (on dark only) */ --cs-blue-bright: #4A9EE8; /* ------------------------------------------------------------------------ 3. ORANGE — READ THIS BEFORE YOU USE IT The marketing site puts WHITE text on the orange fill. That combination measures 2.58:1, which fails WCAG AA for body text (4.5:1) and also fails the large-text floor (3:1). It survives on a landing page because the buttons are big and short-lived. It will not survive a portal accessibility review — and CloudServus sells into state & local government, where Section 508 / WCAG AA is often a procurement requirement. The fix costs nothing and keeps the exact brand orange: put NAVY on the orange fill instead of white. navy #00213C on orange #F98023 = 6.35:1 PASS AA white #FFFFFF on orange #F98023 = 2.58:1 FAIL For orange as TEXT or a LINK on a light background, #F98023 is far too light (2.58:1 on white). Use the darkened text variant below. ------------------------------------------------------------------------ */ --cs-orange-on-fill: #00213C; /* label color for orange buttons — 6.35:1 */ --cs-orange-text: #A85416; /* orange for text/links on light — 5.32:1 */ --cs-orange-hover: #E0701A; /* fill hover state */ --cs-orange-tint: rgba(249,128,35,.12); /* icon tiles, subtle fills */ --cs-orange-ring: rgba(249,128,35,.40); /* focus ring */ /* ------------------------------------------------------------------------ 4. PORTAL SURFACES — light content, navy chrome RECOMMENDED APPROACH, and the one thing here that isn't a straight copy of the .com: Don't rebuild the marketing site's all-dark navy look in a portal. The .com is dark because it's a short, image-led marketing page. A portal is dense, text-heavy, and people sit in it for an hour — dark navy behind data tables and forms is fatiguing and hurts scannability. What keeps it unmistakably CloudServus without that cost: - navy CHROME : sidebar, top bar, nav -> --cs-navy - light CANVAS : all content, tables, forms - orange : ONE primary action per view. Not every button. That reads as the same brand and stays usable. The dark tokens in section 6 are kept for marketing-style surfaces (a login screen, a hero banner) where the .com look genuinely belongs. ------------------------------------------------------------------------ */ --cs-surface: #FFFFFF; /* cards, panels, table rows */ --cs-canvas: #F4F7FB; /* app background behind cards */ --cs-surface-sunken: #EAF0F7; /* wells, table headers, hover rows */ --cs-border: #DCE5EF; /* hairlines, dividers, input borders */ --cs-border-strong: #C3D2E2; --cs-text: #00213C; /* body text on light — 16.37:1 AAA */ --cs-text-muted: #4A5D75; /* secondary text — 6.74:1 AA */ --cs-text-subtle: #5C6B80; /* timestamps, captions — 5.43:1 AA */ --cs-link: #004191; /* links on light — 9.70:1 AAA */ /* ------------------------------------------------------------------------ 5. STATUS — for tickets, tenders, health indicators. Not on the marketing site; chosen to sit alongside the brand and to clear 4.5:1 on white. Semantic color must never be the only signal — pair with an icon or a label. ------------------------------------------------------------------------ */ --cs-success: #1B7A4B; /* 5.34:1 on white / 4.97:1 on canvas */ --cs-warning: #96590B; /* 5.63:1 on white / 5.24:1 on canvas */ --cs-danger: #C0271C; /* 5.92:1 on white / 5.51:1 on canvas */ --cs-info: #004191; /* 9.70:1 on white / 9.04:1 on canvas */ /* ------------------------------------------------------------------------ 6. DARK SURFACES — the marketing look. Use for login screens / hero banners, NOT for dense app content. ------------------------------------------------------------------------ */ --cs-dark-bg: var(--cs-navy); --cs-dark-card: rgba(0,33,60,.60); /* verbatim from site */ --cs-dark-border: rgba(255,255,255,.08); /* verbatim from site */ --cs-dark-border-strong: rgba(255,255,255,.35); --cs-dark-text: #DDE8F5; /* on navy — 13.20:1 AAA */ --cs-dark-muted: #9FB3CC; /* on navy — 7.64:1 AAA */ --cs-dark-heading: #FFFFFF; /* on navy — 16.37:1 AAA */ /* ------------------------------------------------------------------------ 7. TYPE SCALE — measured from the live site. The fluid clamp() values are the marketing headings. In a portal you almost certainly want the fixed UI sizes instead. ------------------------------------------------------------------------ */ --cs-h1-marketing: clamp(40px, 5vw, 64px); --cs-h2-marketing: clamp(30px, 3.4vw, 43px); --cs-h3-marketing: clamp(28px, 3.2vw, 40px); --cs-text-xs: 12px; --cs-text-sm: 13px; /* densest UI label size used on the site */ --cs-text-base: 15px; --cs-text-md: 17px; --cs-text-lg: 20px; --cs-text-xl: 24px; --cs-weight-normal: 400; --cs-weight-semibold: 600; --cs-weight-bold: 700; /* buttons, UI labels */ --cs-weight-heavy: 800; /* headings */ --cs-leading-tight: 1.25; --cs-leading-body: 1.65; /* Headings are tightened; eyebrows/kickers are wide-tracked uppercase. Both are strong CloudServus signatures — carry them over. */ --cs-tracking-heading: -0.02em; --cs-tracking-eyebrow: 0.12em; /* ------------------------------------------------------------------------ 8. RADIUS / SPACING / MOTION — measured from the live site. ------------------------------------------------------------------------ */ --cs-radius-sm: 6px; --cs-radius: 8px; /* buttons, inputs — the site's default */ --cs-radius-md: 12px; /* icon tiles */ --cs-radius-lg: 16px; /* cards */ --cs-radius-xl: 24px; --cs-radius-pill: 999px; --cs-space-1: 4px; --cs-space-2: 8px; --cs-space-3: 12px; --cs-space-4: 16px; /* the site's standard button-group gap */ --cs-space-5: 20px; --cs-space-6: 24px; --cs-space-8: 32px; --cs-space-10: 40px; --cs-shadow-sm: 0 1px 2px rgba(0,33,60,.06); --cs-shadow: 0 2px 8px rgba(0,33,60,.08); --cs-shadow-lg: 0 18px 40px rgba(0,0,0,.45); /* verbatim; dark surfaces */ --cs-transition: .15s ease; /* the site's standard */ --cs-container: 1240px; /* site content max-width */ } /* Components (buttons, forms, tables, app shell) live in cloudservus-components.css, which depends on this file. */