/* ============================================================ GRIDWISE DESIGN TOKENS Import this once at the top of any Gridwise HTML artifact. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap'); /* ============================================================ TT NORMS PRO — primary display + UI family. Licensed brand font. Loaded locally from /fonts. Weight map (CSS numeric weight → TT Norms Pro cut): 100 Thin · 200 ExtraLight · 300 Light · 400 Normal (body) 500 Medium · 600 DemiBold · 700 Bold · 800 ExtraBold 900 Black · 950 ExtraBlack The "Regular" cut ships a touch heavier than "Normal"; we use Normal at 400 for body runs because that matches the foundry's own intent for paragraph weight. Swap to Regular manually if a specimen calls for it. ============================================================ */ /* --- Upright ---------------------------------------------------- */ @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/TT_Norms_Pro_Thin.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraLight.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/TT_Norms_Pro_Light.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/TT_Norms_Pro_Normal.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/TT_Norms_Pro_Medium.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/TT_Norms_Pro_DemiBold.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/TT_Norms_Pro_Bold.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraBold.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/TT_Norms_Pro_Black.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: normal; font-weight: 950; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraBlack.otf') format('opentype'); } /* --- Italic ----------------------------------------------------- */ @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/TT_Norms_Pro_Thin_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraLight_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/TT_Norms_Pro_Light_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/TT_Norms_Pro_Normal_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/TT_Norms_Pro_Medium_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/TT_Norms_Pro_DemiBold_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/TT_Norms_Pro_Bold_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraBold_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/TT_Norms_Pro_Black_Italic.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 950; font-display: swap; src: url('fonts/TT_Norms_Pro_ExtraBlack_Italic.otf') format('opentype'); } /* "Regular" cut — slightly heavier than Normal at the same 400. Exposed as its own family so specimens that specifically call for "TT Norms Pro Regular" can request it by name. */ @font-face { font-family: 'TT Norms Pro Regular'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/TT_Norms_Pro_Regular.otf') format('opentype'); } @font-face { font-family: 'TT Norms Pro'; font-style: italic; font-weight: 350; font-display: swap; src: url('fonts/TT_Norms_Pro_Italic.otf') format('opentype'); } :root { /* ---------- INK / SURFACE ---------------------------------- */ --gw-black: #000000; /* primary ink, heavy use */ --gw-white: #FFFFFF; /* primary surface */ --gw-slate-900: #111422; /* dark card surface (marketing) */ --gw-slate-800: #191B26; /* dark veil / overlay */ --gw-slate-700: #2D3040; /* header thumbnail bg */ --gw-slate-600: #444753; /* hairline stroke on dark */ --gw-slate-500: #5A5E73; /* muted body text */ --gw-slate-400: #8F92A6; /* tertiary text */ --gw-slate-300: #ACAFBF; /* disabled / placeholder */ --gw-slate-200: #EDEEF2; /* app background, divider */ --gw-slate-100: #F6F7F9; /* marketing canvas, muted surface */ /* ---------- BRAND ACCENT (gradient) ------------------------ */ /* Gridwise's brand accent is ALWAYS a red→blue gradient. Use 40 on dark backgrounds, 60 on light backgrounds. 45° diagonal is canonical; horizontal/vertical are variants. */ --gw-brand-40-from: #E6A881; /* warm rose */ --gw-brand-40-to: #8E9DE7; /* periwinkle */ --gw-brand-60-from: #CC485E; /* deep coral */ --gw-brand-60-to: #646EC9; /* deep blue */ --gw-brand-40: linear-gradient(45deg, #E6A881 0%, #8E9DE7 100%); --gw-brand-60: linear-gradient(45deg, #CC485E 0%, #646EC9 100%); --gw-brand-40-h: linear-gradient(90deg, #E6A881 0%, #8E9DE7 100%); --gw-brand-40-v: linear-gradient(180deg, #E6A881 0%, #8E9DE7 100%); --gw-brand-60-h: linear-gradient(90deg, #CC485E 0%, #646EC9 100%); --gw-brand-60-v: linear-gradient(180deg, #CC485E 0%, #646EC9 100%); /* ---------- UTILITY COLORS --------------------------------- */ /* Function-bearing colors. 40 for dark mode, 60 for light mode. */ --gw-success-40: #8ECB80; --gw-success-60: #72C262; --gw-warning: #FFD45B; /* single value, both modes */ --gw-error-40: #EC6B81; --gw-error-60: #CC485E; --gw-info-40: #8A9CFD; --gw-info-60: #3B69EB; /* INFO BLUE — used for emphasis */ --gw-accent-40: #8E9DE7; --gw-accent-60: #646EC9; --gw-image-process:#111422; /* image overlay tint */ /* ---------- DATA VIZ (graphs/charts only) ------------------ */ /* 6 hues × 3 shades. Use Default by default; Light/Dark for ranges. */ --gw-data-a-light: #809DEB; /* blue */ --gw-data-a: #5773D9; --gw-data-a-dark: #2F52B0; --gw-data-b-light: #A1E6EA; /* teal */ --gw-data-b: #61CFD6; --gw-data-b-dark: #2B9FA6; --gw-data-c-light: #E9F3B8; /* lime */ --gw-data-c: #CDE263; --gw-data-c-dark: #A3BC23; --gw-data-d-light: #FFC26A; /* amber */ --gw-data-d: #FFB03A; --gw-data-d-dark: #CC8111; --gw-data-e-light: #F4A5B2; /* rose */ --gw-data-e: #D66C70; --gw-data-e-dark: #A3293D; --gw-data-f-light: #92D89E; /* green */ --gw-data-f: #6BC179; --gw-data-f-dark: #369846; /* ---------- SHADOW / STROKE -------------------------------- */ --gw-stroke-hair: rgba(115,119,140,0.5); /* default hairline */ --gw-stroke-card: rgba(68,71,83,1); /* hairline on dark */ --gw-shadow-card: 0 4px 12px rgba(25,27,38,0.06); --gw-shadow-lift: 0 8px 24px rgba(25,27,38,0.08); /* ---------- TYPE ------------------------------------------- */ --gw-font-display: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gw-font-meta: 'Barlow', system-ui, sans-serif; /* Display scale — marketing, editorial, blog heroes */ --gw-display-xl: 96px; /* hero numerals, poster-scale */ --gw-display-lg: 80px; /* section openers */ --gw-display-md: 60px; /* blog post titles */ --gw-display-sm: 48px; /* 2x1 blog card */ --gw-display-xs: 36px; /* social 1x1 */ /* UI scale — product / app */ --gw-ui-xl: 24px; /* screen titles, numeric stats */ --gw-ui-lg: 20px; /* secondary titles */ --gw-ui-md: 16px; /* body & primary buttons */ --gw-ui-sm: 13px; /* swipe drawer labels */ --gw-ui-xs: 9px; /* bottom nav */ /* Meta — Barlow, always 24px, medium. The ONE Barlow use-case. */ --gw-meta: 24px; /* Weights */ --gw-w-regular: 400; --gw-w-medium: 500; --gw-w-bold: 700; /* Letter spacing + line height */ --gw-ls-display: -0.020em; /* tight headline */ --gw-ls-ui: -0.010em; /* tight UI */ --gw-lh-display: 1.04; --gw-lh-ui: 1.5; /* ---------- SPACING (8px baseline) ------------------------- */ --gw-space-1: 4px; --gw-space-2: 8px; --gw-space-3: 12px; --gw-space-4: 16px; --gw-space-5: 24px; --gw-space-6: 32px; --gw-space-7: 40px; --gw-space-8: 56px; --gw-space-9: 80px; --gw-space-10: 100px; /* ---------- RADII ------------------------------------------ */ --gw-radius-sm: 4px; --gw-radius-md: 10px; --gw-radius-lg: 12px; /* mobile card — most common */ --gw-radius-xl: 16px; --gw-radius-full: 999px; /* ---------- DOT GRID (signature mark) ---------------------- */ --gw-dot-size: 12px; /* each dot tile */ --gw-dot-gap: 8px; --gw-dot-color: #F6F7F9; } /* ---------------------------------------------------------------- BASE TYPOGRAPHY CLASSES Add these to elements; do not re-declare font sizes inline. ---------------------------------------------------------------- */ .gw-display-xl { font: var(--gw-w-medium) var(--gw-display-xl)/var(--gw-lh-display) var(--gw-font-display); letter-spacing: var(--gw-ls-display); color: var(--gw-black); } .gw-display-lg { font: var(--gw-w-medium) var(--gw-display-lg)/var(--gw-lh-display) var(--gw-font-display); letter-spacing: var(--gw-ls-display); color: var(--gw-black); } .gw-display-md { font: var(--gw-w-medium) var(--gw-display-md)/1.1 var(--gw-font-display); letter-spacing: var(--gw-ls-display); color: var(--gw-black); } .gw-display-sm { font: var(--gw-w-medium) var(--gw-display-sm)/1.25 var(--gw-font-display); letter-spacing: var(--gw-ls-display); color: var(--gw-black); } .gw-display-xs { font: var(--gw-w-medium) var(--gw-display-xs)/1.25 var(--gw-font-display); letter-spacing: var(--gw-ls-display); color: var(--gw-black); } .gw-ui-xl { font: var(--gw-w-bold) var(--gw-ui-xl)/1.25 var(--gw-font-display); letter-spacing: var(--gw-ls-ui); color: var(--gw-black); } .gw-ui-lg { font: var(--gw-w-bold) var(--gw-ui-lg)/1.3 var(--gw-font-display); letter-spacing: var(--gw-ls-ui); color: var(--gw-black); } .gw-ui-md { font: var(--gw-w-medium) var(--gw-ui-md)/1.5 var(--gw-font-display); color: var(--gw-black); } .gw-ui-md-b { font: var(--gw-w-bold) var(--gw-ui-md)/1.5 var(--gw-font-display); color: var(--gw-black); } .gw-ui-sm { font: var(--gw-w-medium) var(--gw-ui-sm)/1.23 var(--gw-font-display); color: var(--gw-black); } .gw-ui-xs { font: var(--gw-w-medium) var(--gw-ui-xs)/1.33 var(--gw-font-display); color: var(--gw-black); } .gw-meta { font: var(--gw-w-medium) var(--gw-meta)/1.25 var(--gw-font-meta); letter-spacing: 0; color: var(--gw-black); text-transform: none; } .gw-meta-url { font: var(--gw-w-bold) var(--gw-meta)/1.15 var(--gw-font-display); color: var(--gw-black); } /* ---------------------------------------------------------------- UTILITY — dot-grid texture (the Gridwise signature overlay) Size via width/height; color via --gw-dot-color. ---------------------------------------------------------------- */ .gw-dotgrid { background-image: radial-gradient(circle, var(--gw-dot-color) 1.5px, transparent 2px); background-size: 20px 20px; background-position: 0 0; } .gw-dotgrid-tight { background-image: radial-gradient(circle, var(--gw-dot-color) 1.5px, transparent 2px); background-size: 16px 16px; } /* ---------------------------------------------------------------- RESET (minimal, so artifacts opt-in) ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--gw-font-display); color: var(--gw-black); background: var(--gw-white); -webkit-font-smoothing: antialiased; }