/* ============================================================ Vithuran Sam — Design System Tokens Drop this file into any HTML and use the CSS variables below. ============================================================ */ /* ---- Fonts (Google Fonts) ------------------------------------ */ @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---- Color: palette (Quantus 2025) ------------------------- */ --bg: #F5F3FF; /* "Blue Chalk" — page paper */ --bg-2: #E6E2F5; /* one shade darker, hairlines */ --surface: #FFFFFF; /* pure white card */ --ink: #18102B; /* "Haiti" — deep near-black with violet hint */ --ink-2: #3D335A; /* secondary text */ --ink-3: #7A6F95; /* tertiary / captions */ --accent: #834DFB; /* "Electric Violet" — primary pop */ --accent-2: #F0E100; /* "Turbo" — secondary pop */ /* ---- Color: project-card palette --------------------------- */ --card-haiti: #18102B; --card-turbo: #F0E100; --card-violet: #834DFB; --card-chalk: #F5F3FF; /* ---- Color: semantic --------------------------------------- */ --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-accent: var(--accent); --bg-page: var(--bg); --bg-surface: var(--surface); --border-hairline: var(--bg-2); /* ---- Type: family ------------------------------------------ */ --font-display: "DM Serif Display", "Times New Roman", Georgia, serif; --font-sans: "Syne", "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Type: scale (in px, fluid via clamp where helpful) ---- */ --fs-display-1: clamp(72px, 9vw, 168px); --fs-display-2: clamp(56px, 6vw, 112px); --fs-display-3: clamp(40px, 4.5vw, 72px); --fs-h1: clamp(40px, 4vw, 64px); --fs-h2: clamp(28px, 2.6vw, 40px); --fs-h3: 24px; --fs-body-lg: 20px; --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 12px; /* ---- Type: rhythm ------------------------------------------ */ --lh-display: 0.98; --lh-tight: 1.1; --lh-body: 1.55; --tr-display: -0.02em; --tr-tight: -0.01em; --tr-eyebrow: 0.12em; /* ---- Spacing scale (4px base) ------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ---- Radii ------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; /* project tiles */ --r-xl: 28px; /* hero / large cards */ --r-pill: 999px; /* ---- Shadow (used sparingly; cards rely on contrast) ------- */ --shadow-none: none; --shadow-soft: 0 1px 2px rgba(24, 16, 43, 0.04), 0 8px 24px rgba(24, 16, 43, 0.06); /* ---- Motion ------------------------------------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur: 300ms; --dur-slow: 600ms; /* ---- Layout ------------------------------------------------ */ --page-max: 1280px; --page-gutter: 24px; --card-inset: 24px; } /* ============================================================ Semantic / element-level rules Pages can opt-in by adding class="vs-base" to . ============================================================ */ html, body { background: var(--bg-page); color: var(--fg-1); } .vs-base, .vs-base * { box-sizing: border-box; } .vs-base { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display headings — DM Serif Display */ .vs-base h1, .vs-base .h1, .vs-base h2, .vs-base .h2, .vs-base h3, .vs-base .h3, .vs-base .display-1, .vs-base .display-2, .vs-base .display-3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-1); text-wrap: balance; margin: 0; } .vs-base .display-1 { font-size: var(--fs-display-1); } .vs-base .display-2 { font-size: var(--fs-display-2); } .vs-base .display-3 { font-size: var(--fs-display-3); } .vs-base h1, .vs-base .h1 { font-size: var(--fs-h1); } .vs-base h2, .vs-base .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); } .vs-base h3, .vs-base .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tr-tight); } /* Body */ .vs-base p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; } .vs-base .body-lg { font-size: var(--fs-body-lg); line-height: 1.45; } .vs-base .body { font-size: var(--fs-body); } .vs-base .small { font-size: var(--fs-small); color: var(--fg-2); } /* Eyebrow label */ .vs-base .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-2); display: inline-flex; align-items: center; gap: var(--s-2); } /* Accent word — used inside display headlines */ .vs-base .accent { color: var(--accent); font-style: italic; } /* Code */ .vs-base code, .vs-base pre { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); padding: 0.1em 0.4em; border-radius: var(--r-sm); } /* Buttons */ .vs-base .btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-body); letter-spacing: 0; height: 52px; padding: 0 var(--s-6); border-radius: var(--r-pill); background: var(--ink); color: #fff; border: 1px solid var(--ink); text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .vs-base .btn:hover { background: #2b2046; transform: translateY(-2px); } .vs-base .btn:active { transform: scale(0.98); } .vs-base .btn--secondary { background: transparent; color: var(--ink); } .vs-base .btn--secondary:hover { background: var(--ink); color: #fff; } .vs-base .btn--ghost { background: transparent; color: var(--ink); border-color: transparent; padding: 0; height: auto; } .vs-base .btn--ghost:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; background: transparent; } /* Cards */ .vs-base .card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s-7); } .vs-base .card--tile { border-radius: var(--r-lg); padding: var(--s-5); } /* Chip / pill */ .vs-base .chip { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-small); font-weight: 500; } .vs-base .chip--ink { background: var(--ink); color: #fff; } /* Selection */ ::selection { background: var(--accent); color: #fff; } /* Card tile color helpers (Quantus palette) */ .vs-base .tile--haiti { background: var(--card-haiti); color: #fff; } .vs-base .tile--turbo { background: var(--card-turbo); color: var(--ink); } .vs-base .tile--violet { background: var(--card-violet); color: #fff; } .vs-base .tile--chalk { background: var(--card-chalk); color: var(--ink); border: 1px solid var(--bg-2); }