/* ========================================================================== THE DESIGNERS HUB — Design tokens Every value below is read from the Figma file "Projects (Copy) (Copy)" (file key 1j981v3IJWIVFmhHBsoD1m) via the Figma API — not from any image. Source frames: "home page" #2129:1470 (desktop 1440), "tablet home" #2129:6058 (768), "главная моб" #2129:3893 (390), plus the file's shared text/fill styles. ========================================================================== */ /* --- Fonts ------------------------------------------------------------------- Three real families are used across the file: Inter — headings, body, UI labels (the home page is almost all Inter) Open Sans — button labels; body copy on some pages Noto Serif SC — serif accent used on other pages Weights listed are the ones the file actually uses. The font stylesheet is linked from the document , not @import-ed here. An @import hides the fonts behind this file's own download, adding a round trip to the critical path and lengthening the fallback-font flash. --------------------------------------------------------------------------- */ :root { /* --- Brand / accent (Figma fills) --- */ --gold: #D8A025; /* fill_9221294c — primary accent, buttons, highlights */ --gold-deep: #C8962A; /* fill_e63de094 — darker gold, strokes/hover */ --sage: #AFC4A2; /* fill_e53abb68 — support green */ /* --- Neutrals (Figma fills, dark → light) --- */ --black: #000000; /* fill_34dc0314 */ --ink: #2D2D2D; /* fill_a0db506e — primary dark surface + body text */ --ink-2: #292828; /* used on a home-page graphic */ --grey-900: #1A1A1A; --grey-800: #1E1E1E; --grey-700: #333333; --grey-500: #5A5A5A; /* fill_a0eb1b89 — muted text */ --grey-400: #888888; --grey-300: #AAA8A8; /* fill_3386bc3f — inactive nav item */ --grey-250: #CDCDCD; /* fill_b900ba69 */ --grey-200: #D9D9D9; /* fill_fef61db7 */ --line: #DDDDDD; /* hairline borders */ --cream-line: #EDE7DF; /* cream border */ --bg: #F8F8F8; /* fill_73aea8e7 — page background */ --cream: #FDF6EE; /* fill_29039b39 — cream surface */ --white: #FFFFFF; /* fill_658ab2fa */ /* --- Semantic aliases --- */ --color-page-bg: var(--bg); --color-text: var(--ink); --color-text-muted: var(--grey-500); --color-text-invert: var(--white); --color-surface-dark: var(--ink); --color-accent: var(--gold); --color-accent-hover: var(--gold-deep); --color-border: var(--line); /* --- Type families --- */ --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-button: 'Open Sans', system-ui, sans-serif; --font-serif: 'Noto Serif SC', Georgia, serif; /* --- Type scale (desktop, verified on home page #2129:1470) --- name family / weight / size / line-height / case Figma style */ --fs-h1: 36px; /* Inter 700, 1.06em, UPPER — "ясер h1 комп" */ --lh-h1: 1.06; --fs-h2: 32px; /* Inter 600, UPPER — style_8a02f089 */ --fs-h2-center: 32px; /* Inter 500, UPPER, centered — style_6c346f24 */ --fs-stat: 28px; /* Inter 400, centered — style_57655f97 */ --fs-lead: 18px; /* Inter 400 — style_60f779ee */ --fs-lead-light:18px; /* Inter 300, centered — style_104279f1 */ --fs-body: 16px; /* Inter 400, 1.04em — style_b4395bfb */ --lh-body: 1.04; --fs-body-light:16px; /* Inter 300, 1.04em — style_a4d26c47 */ --fs-label: 16px; /* Inter 500, 1.04em — style_bf1c0177 */ --fs-eyebrow: 14px; /* Inter 600, UPPER — style_afe4b35e */ --fs-button: 14px; /* Open Sans 700, UPPER — style_24c5280d */ --fs-meta: 12px; /* Inter 400 — style_c487cf45 */ /* --- Font weights --- */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* --- Grid / layout --- Figma frames are fixed at 1440 / 768 / 390. On the desktop frame the content column sits inside ~80px side margins (content ≈ 1280). */ --container-max: 1280px; --page-pad-desk: 80px; --page-pad-tab: 40px; --page-pad-mob: 20px; /* Design frame widths (reference) */ --frame-desktop: 1440px; --frame-tablet: 768px; --frame-mobile: 390px; /* --- Spacing scale --- */ --space-4: 4px; --space-8: 8px; --space-11: 11px; /* icon-row gap seen on home page */ --space-16: 16px; /* card inner column gap (EL-8cb9b1b4) */ --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-80: 80px; /* --- Radii (Figma borderRadius) --- */ --radius-2: 2px; /* case-study cards, step cards */ --radius-4: 4px; /* --- Strokes --- */ --stroke-1: 1px; --stroke-15: 15px; /* thick framed-panel border used in hero/feature blocks */ /* --- Buttons (component 1262:297 / 2129:1375) --- */ --btn-pad-y: 17px; --btn-pad-x: 55px; --btn-gap: 8px; --btn-h: 52px; /* --- Motion --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 200ms; } /* --- Breakpoints ------------------------------------------------------------ Figma defines three fixed frames (390 / 768 / 1440). The switch points below are the standard interpretation of those frames — flagged as an interpretation, since Figma pins layouts at exact widths, not ranges. mobile : up to 767px (390 frame) tablet : 768–1199px (768 frame) desktop : 1200px and up (1440 frame, 1280 content) --------------------------------------------------------------------------- */