/* =========================================================================== THRIVEAI DESIGN SYSTEM =========================================================================== This file IS the design system. Every page on thriveai.com loads it, and it is the only place the palette, the type rules and the corner radius are defined. See ../../DESIGN.md for the written rules and how to add a page. Why it exists: ploy.css is a precompiled Tailwind build whose neutrals all ship with warm chroma (hue 50-83). That warmth is what read as the "warm Claude look". The design zeroes it: white paper, near-black ink, one copper accent, grotesque type, and square corners. Overriding the tokens flips every compiled utility class at once, which is why this is a dozen custom properties rather than a rewrite of ploy.css. Two rules for any new page: 1. Load /assets/ploy.css then /assets/swiss.css, in that order. 2. Put class="text-black dark" on . The tokens are scoped under .dark / .light, and a page carrying neither renders black. Verify with: python3 scripts/audit-design.py =========================================================================== */ :root, html.dark, [data-theme="dark"] { --ploy-background-primary: #fff; --ploy-neutral-primary: #fff; --ploy-neutral-primary-s1: #fff; --ploy-neutral-primary-s3: #d8d8d8; /* hairline */ --ploy-neutral-primary-s4: #bdbdbd; --ploy-neutral-primary-100: #f2f2f2; --ploy-neutral-primary-500: #7a7a7a; /* mono labels */ --ploy-neutral-primary-700: #4a4a4a; /* secondary body */ --ploy-neutral-inverse-950: #111; /* headings */ --ploy-neutral-inverse-800: #333; /* body */ --ploy-background-inverse: #111; --ploy-text-inverse: #fff; --ploy-border-primary: #d8d8d8; --ploy-input-background: #1a1a1a; --ploy-text-on-accent-primary: #fff; /* Tinted panel for callouts, cards and the tool stage. */ --panel: #f7f7f7; /* Corners. Swiss has none. The single exception is the byline portrait, which is a circle by request; it uses --portrait-radius, not this. */ --radius: 0; --portrait-radius: 9999px; } /* Grotesque only. ploy.css points h1-h4 at Cormorant Garamond, which is the least Swiss thing available. */ h1, h2, h3, h4 { font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 600; letter-spacing: -0.025em; } /* Swiss has no rounded corners. ploy.css and the page stylesheets round buttons, inputs and cards; this squares all of them in one place rather than chasing each utility class. Anything pressable, any input, any panel. Two deliberate exceptions, both circles rather than rounded rectangles: the byline portrait and the bullet dots in the contact list. */ .nav-cta, .sw-btn, .cf-submit, .btn, .tl-btn, .tl-seg, .tl-cta, .tl-cta a, .tl-card, .tl-tool, .tl-drop, .contact-card, .contact-form input, .contact-form select, .contact-form textarea, .related-card, .article-shot, .article-shot img, header a[class*="rounded"], nav a[class*="rounded"], main a[class*="rounded"], footer a[class*="rounded"], button, [class*="rounded"] { border-radius: var(--radius) !important; } /* The header CTA's white text comes from a Tailwind utility that lives inside @layer utilities, so any unlayered rule on the page can outrank it. Stating it here, unlayered like the rest of this file, makes it deterministic. */ .nav-cta { color: var(--ploy-text-on-accent-primary); } body { -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- footer */ /* The site footer is the same markup on every page. ploy.css only ships the three-column variant of the grid utility, so the real layout is here, in the one stylesheet every ploy.css page loads. It previously lived in article.css and in the home page's inline