/** * Pr.IA — Brand CSS Variables & Typography System * Version 1.0 · 2025 * ───────────────────────────────────────────────── * Import this file in your project to use the * official Pr.IA design tokens. * * Google Fonts import (add to your ): * */ /* ───────────────────────────────────── 1. BRAND COLORS ───────────────────────────────────── */ :root { /* ── Backgrounds ── */ --pria-bg-void: #05060D; /* Main app background */ --pria-bg-surface: #08090F; /* Cards, panels */ --pria-bg-elevated: #0C0E18; /* Elevated surfaces */ --pria-bg-light: #F0EDE6; /* Light mode background */ --pria-bg-cream: #E8E4D8; /* Light mode surface */ /* ── Blue — Primary Brand Color ── */ --pria-blue-100: #A8CFFF; /* Highlight / gradient start */ --pria-blue-200: #7BB8FF; /* Dot separator color */ --pria-blue-300: #5599FF; /* Mid gradient */ --pria-blue-400: #3377EE; --pria-blue-500: #2255EE; /* Primary interactive */ --pria-blue-600: #1A44DD; --pria-blue-700: #0A2EC8; /* Gradient end / dark blue */ --pria-blue-800: #071EA0; --pria-blue-900: #040F6A; /* Deepest navy */ /* ── Gradient — IA Mark (use on gradient text/fill) ── */ --pria-gradient-ia: linear-gradient(135deg, #A8CFFF 0%, #5599FF 40%, #0A2EC8 100%); --pria-gradient-pr: linear-gradient(180deg, #FFFFFF 0%, #7A788A 100%); --pria-gradient-dot: linear-gradient(135deg, #7BB8FF 0%, #2255EE 100%); --pria-gradient-bg: linear-gradient(135deg, #0B1E6A 0%, #071244 100%); /* ── Text ── */ --pria-text-primary: #E8E4D8; /* Main text on dark */ --pria-text-secondary: rgba(232, 228, 216, 0.55); --pria-text-muted: rgba(232, 228, 216, 0.25); --pria-text-dark: #0A0C1C; /* Main text on light */ /* ── Borders ── */ --pria-border-subtle: rgba(255, 255, 255, 0.06); --pria-border-default: rgba(255, 255, 255, 0.10); --pria-border-strong: rgba(85, 153, 255, 0.30); /* ── Status ── */ --pria-success: #5BDE9A; --pria-error: #FF5B5B; --pria-warning: #FFB347; } /* ───────────────────────────────────── 2. TYPOGRAPHY ───────────────────────────────────── */ :root { /* Typefaces */ --font-brand: 'DM Sans', sans-serif; /* Wordmark, headings, body */ --font-ui: 'Space Grotesk', sans-serif; /* Labels, captions, tags */ /* ── Type Scale ── */ --text-display: clamp(40px, 6vw, 72px); /* Hero / Display */ --text-h1: clamp(28px, 4vw, 48px); /* Page title */ --text-h2: clamp(22px, 3vw, 36px); /* Section title */ --text-h3: clamp(18px, 2.5vw, 26px); /* Sub-section */ --text-h4: 20px; /* Card title */ --text-body-lg: 17px; /* Large body */ --text-body: 15px; /* Default body */ --text-body-sm: 13px; /* Small body */ --text-label: 11px; /* Labels / tags */ --text-caption: 10px; /* Captions / timestamps */ --text-micro: 9px; /* Metadata */ /* ── Font Weights ── */ --weight-thin: 200; /* Pr — wordmark thin */ --weight-light: 300; /* Body light */ --weight-regular: 400; /* Default body */ --weight-bold: 700; /* Headings */ --weight-black: 900; /* IA — wordmark black */ /* ── Line Heights ── */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; /* ── Letter Spacing ── */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.08em; --tracking-wider: 0.14em; --tracking-widest: 0.28em; /* Labels / uppercase */ } /* ───────────────────────────────────── 3. WORDMARK RULES The Pr.IA wordmark must always follow these weight and spacing rules. ───────────────────────────────────── */ /* Wordmark container */ .pria-wordmark { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--font-brand); line-height: 1; } /* "Pr" — always weight 200 */ .pria-wordmark__pr { font-weight: 200; background: var(--pria-gradient-pr); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; opacity: 0.88; } /* "." separator dot — use CSS or SVG circle */ .pria-wordmark__dot { display: inline-block; width: 0.08em; height: 0.08em; border-radius: 50%; background: var(--pria-gradient-dot); margin: 0 0.01em 0.05em; flex-shrink: 0; } /* "IA" — always weight 900 */ .pria-wordmark__ia { font-weight: 900; background: var(--pria-gradient-ia); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.05em; } /* Light background variant */ .pria-wordmark--light .pria-wordmark__pr { background: none; -webkit-text-fill-color: var(--pria-text-dark); opacity: 0.65; } .pria-wordmark--light .pria-wordmark__dot { background: linear-gradient(135deg, #3A7AEE, #0828A8); } .pria-wordmark--light .pria-wordmark__ia { background: linear-gradient(135deg, #3A7AEE, #0828A8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Monochrome white (e.g. on blue bg) */ .pria-wordmark--mono .pria-wordmark__pr, .pria-wordmark--mono .pria-wordmark__ia { background: none; -webkit-text-fill-color: #FFFFFF; opacity: 1; } .pria-wordmark--mono .pria-wordmark__pr { opacity: 0.45; } .pria-wordmark--mono .pria-wordmark__dot { background: #FFFFFF; } /* ───────────────────────────────────── 4. LOGO SIZE TOKENS ───────────────────────────────────── */ :root { --logo-hero: 140px; /* Hero sections, splash */ --logo-display: 96px; /* Page headers */ --logo-large: 72px; /* Section headers */ --logo-medium: 48px; /* Cards, footers */ --logo-small: 32px; /* Navbar default */ --logo-xs: 24px; /* Compact navbar, mobile */ --logo-micro: 20px; /* Minimum — do not go below */ } /* ───────────────────────────────────── 5. SPACING & LAYOUT ───────────────────────────────────── */ :root { --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; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; } /* ───────────────────────────────────── 6. COMPONENT TOKENS ───────────────────────────────────── */ :root { /* Buttons */ --btn-bg-primary: var(--pria-gradient-bg); /* linear-gradient */ --btn-bg-solid: var(--pria-blue-500); --btn-text: #FFFFFF; --btn-radius: var(--radius-md); --btn-padding: 12px 24px; /* Cards */ --card-bg: rgba(255, 255, 255, 0.03); --card-border: var(--pria-border-subtle); --card-radius: var(--radius-lg); /* Input */ --input-bg: rgba(255, 255, 255, 0.04); --input-border: var(--pria-border-default); --input-radius: var(--radius-sm); --input-text: var(--pria-text-primary); /* Nav */ --nav-height: 60px; --nav-bg: rgba(5, 6, 13, 0.92); --nav-border: var(--pria-border-subtle); --nav-logo-size: var(--logo-small); }