/** * asyn.ai Design System — CSS Custom Properties * Version: 1.0.0 * * Usage: import or link this file in your project root. * @import 'asyn-tokens.css'; * * Google Fonts import (add to your or CSS entry point): * @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;700&display=swap'); */ /* ───────────────────────────────────────────────────────── COLOUR — Core Palette ───────────────────────────────────────────────────────── */ :root { /* Base */ --color-midnight: #0A0F1E; --color-white: #FFFFFF; --color-off-white: #F5F4F0; /* Signal (primary accent — teal) */ --color-signal-50: #E1F5EE; --color-signal-100: #9FE1CB; --color-signal-200: #5DCAA5; --color-signal-400: #1D9E75; /* ← primary */ --color-signal-600: #0F6E56; --color-signal-800: #085041; --color-signal-900: #04342C; /* Yield (secondary accent — gold) */ --color-yield-50: #FAEEDA; --color-yield-200: #EF9F27; --color-yield-400: #BA7517; /* ← primary */ --color-yield-600: #854F0B; --color-yield-800: #633806; /* Steel (neutral) */ --color-steel-50: #F1EFE8; --color-steel-100: #D3D1C7; --color-steel-200: #B4B2A9; /* ← primary */ --color-steel-400: #888780; --color-steel-600: #5F5E5A; --color-steel-800: #444441; --color-steel-900: #2C2C2A; /* Slate (mid-dark surfaces) */ --color-slate: #2C3347; --color-slate-light: #3D4560; --color-slate-dark: #1E2438; --color-muted: #8A90A0; } /* ───────────────────────────────────────────────────────── COLOUR — Semantic (dark mode, the default) ───────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg-primary: var(--color-midnight); --bg-secondary: var(--color-slate); --bg-surface: var(--color-slate-dark); --bg-card: var(--color-slate); --text-primary: var(--color-white); --text-secondary: var(--color-steel-200); --text-muted: var(--color-muted); --text-accent: var(--color-signal-400); --text-data: var(--color-signal-400); --border-subtle: var(--color-slate-light); --border-default: rgba(61, 69, 96, 0.8); --border-accent: var(--color-signal-400); --interactive-cta-bg: var(--color-signal-400); --interactive-cta-text: var(--color-midnight); --interactive-cta-hover: var(--color-signal-600); --interactive-link: var(--color-signal-400); --interactive-focus: var(--color-signal-200); } /* ───────────────────────────────────────────────────────── COLOUR — Semantic (light mode) ───────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-primary: var(--color-off-white); --bg-secondary: var(--color-steel-50); --bg-surface: var(--color-steel-50); --bg-card: var(--color-white); --text-primary: var(--color-midnight); --text-secondary: var(--color-steel-800); --text-muted: var(--color-steel-400); --text-accent: var(--color-signal-400); --text-data: var(--color-signal-400); --border-subtle: #DDDBD4; --border-default: rgba(10, 15, 30, 0.1); --border-accent: var(--color-signal-400); --interactive-cta-bg: var(--color-midnight); --interactive-cta-text: var(--color-white); --interactive-cta-hover: var(--color-slate); --interactive-link: var(--color-signal-600); --interactive-focus: var(--color-signal-400); } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Font Families ───────────────────────────────────────────────────────── */ :root { --font-display: 'Syne', 'Trebuchet MS', sans-serif; --font-serif: 'DM Serif Display', Georgia, serif; --font-mono: 'DM Mono', 'Consolas', monospace; --font-body: 'Syne', system-ui, sans-serif; } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Scale ───────────────────────────────────────────────────────── */ :root { --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 60px; --text-7xl: 72px; } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Weights ───────────────────────────────────────────────────────── */ :root { --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Line Heights ───────────────────────────────────────────────────────── */ :root { --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Letter Spacing ───────────────────────────────────────────────────────── */ :root { --tracking-tight: -0.04em; --tracking-normal: 0em; --tracking-wide: 0.08em; --tracking-wider: 0.16em; --tracking-widest: 0.24em; } /* ───────────────────────────────────────────────────────── TYPOGRAPHY — Composite Styles (utility classes) ───────────────────────────────────────────────────────── */ /* Display — Syne Bold */ .text-display-hero { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .text-display-xl { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .text-display-lg { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .text-display-md { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .text-display-sm { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); } /* Editorial — DM Serif Display, always italic */ .text-editorial-lg { font-family: var(--font-serif); font-size: var(--text-2xl); font-style: italic; font-weight: var(--weight-regular); line-height: var(--leading-snug); } .text-editorial-md { font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; font-weight: var(--weight-regular); line-height: var(--leading-normal); } .text-editorial-sm { font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; font-weight: var(--weight-regular); line-height: var(--leading-normal); } /* Body — Syne */ .text-body-lg { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); } .text-body-md { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); } .text-body-sm { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); } /* Mono — DM Mono */ .text-data-lg { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--text-data); } .text-data-sm { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--text-data); } .text-label-caps { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); } .text-label-sm { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); color: var(--text-muted); } /* ───────────────────────────────────────────────────────── SPACING ───────────────────────────────────────────────────────── */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; } /* ───────────────────────────────────────────────────────── BORDER RADIUS ───────────────────────────────────────────────────────── */ :root { --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; } /* ───────────────────────────────────────────────────────── BORDER WIDTH ───────────────────────────────────────────────────────── */ :root { --border-hairline: 0.5px; --border-thin: 1px; --border-accent: 2px; /* left-side accent bars */ } /* ───────────────────────────────────────────────────────── SHADOWS ───────────────────────────────────────────────────────── */ :root { --shadow-sm: 0 2px 8px rgba(10, 15, 30, 0.12); --shadow-md: 0 4px 16px rgba(10, 15, 30, 0.18); --shadow-lg: 0 8px 32px rgba(10, 15, 30, 0.24); } /* ───────────────────────────────────────────────────────── MOTION ───────────────────────────────────────────────────────── */ :root { --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); } /* ───────────────────────────────────────────────────────── GRID & LAYOUT ───────────────────────────────────────────────────────── */ :root { --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 40px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ───────────────────────────────────────────────────────── COMPONENT PATTERNS Ready-to-use component primitives matching the brand. ───────────────────────────────────────────────────────── */ /* Card — dark surface */ .card { background: var(--bg-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); } /* Card — with left accent bar */ .card-accented { background: var(--bg-card); border: var(--border-hairline) solid var(--border-subtle); border-left: var(--border-accent) solid var(--color-signal-400); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); } /* Tag / Pill */ .tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-signal-50); color: var(--color-signal-800); } /* CTA Button — primary */ .btn-primary { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); background: var(--interactive-cta-bg); color: var(--interactive-cta-text); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .btn-primary:hover { background: var(--interactive-cta-hover); } .btn-primary:focus-visible { outline: 2px solid var(--interactive-focus); outline-offset: 2px; } /* CTA Button — ghost */ .btn-ghost { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); background: transparent; color: var(--color-signal-400); border: var(--border-thin) solid var(--color-signal-400); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); cursor: pointer; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); } .btn-ghost:hover { background: var(--color-signal-400); color: var(--color-midnight); } /* Data metric */ .metric { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .metric-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); } /* Divider */ .divider { border: none; border-top: var(--border-hairline) solid var(--border-subtle); margin: var(--space-6) 0; }