/* NORDA Field Systems — design tokens (źródło: Filip Banasiak Design System, sync z Claude Design) */ /* ============================================================ FONTS — Filip Banasiak Design System Geist (sans) + Geist Mono (mono accents). NOTE: Loaded from Google Fonts CDN. These are an inferred match for the live site's typography — confirm or replace with the real WOFF2 files and self-host here. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); /* ============================================================ COLORS — Filip Banasiak Design System Light / minimal. Warm off-white paper, near-black ink, restrained neutral scale. Monochrome-forward: the primary "accent" is ink on paper. Semantic tones are desaturated to sit quietly inside the minimal palette. ============================================================ */ :root { /* ---- Paper (surfaces, light to white) ---- */ --paper-0: #ffffff; /* pure white — raised cards on tinted bg */ --paper-50: #fafaf7; /* page background, the signature off-white */ --paper-100: #f4f3ee; /* subtle surface, hover fills */ --paper-200: #ecebe4; /* muted surface, input fills */ --paper-300: #e2e0d7; /* pressed / track fills */ /* ---- Ink (text + solids, near-black to grey) ---- */ --ink-900: #0c0c0b; /* primary text, solid buttons */ --ink-800: #1a1a18; --ink-700: #2c2c29; --ink-600: #4a4a45; --ink-500: #6b6b64; /* secondary text */ --ink-400: #8f8f86; /* muted / placeholder */ --ink-300: #b6b5aa; /* disabled text */ --ink-200: #d2d1c7; /* disabled surface edge */ /* ---- Lines & hairlines ---- */ --line: rgba(12, 12, 11, 0.10); /* default border */ --line-soft: rgba(12, 12, 11, 0.06); /* faint divider */ --line-strong: rgba(12, 12, 11, 0.18); /* emphasized border */ --line-ink: rgba(12, 12, 11, 0.85); /* full-contrast outline */ /* ---- Accent (monochrome-forward) ---- The brand's primary accent IS ink-on-paper. --accent-brand is an optional single hue — override it in one place to colorize links, focus rings and active states. Defaults to ink so the system stays monochrome until a real brand hue is confirmed from the site. */ --accent-brand: var(--ink-900); --accent-brand-weak: var(--paper-100); /* ---- Semantic (muted) ---- */ --success: #3f7d5b; --success-weak: #e9f1ea; --warning: #a9791f; --warning-weak: #f6efdc; --danger: #b23b3b; --danger-weak: #f6e4e2; --info: #3e6b91; --info-weak: #e4edf3; /* ---- Focus ---- */ --focus-ring: rgba(12, 12, 11, 0.55); /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ --bg-page: var(--paper-50); --bg-elevated: var(--paper-0); --bg-sunken: var(--paper-100); --surface-card: var(--paper-0); --surface-fill: var(--paper-100); --surface-fill-strong: var(--paper-200); --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-disabled: var(--ink-300); --text-inverse: var(--paper-50); --border-default: var(--line); --border-soft: var(--line-soft); --border-strong: var(--line-strong); --action-solid-bg: var(--ink-900); --action-solid-bg-hover:var(--ink-700); --action-solid-text: var(--paper-50); --link: var(--accent-brand); } /* ============================================================ TYPOGRAPHY — Filip Banasiak Design System Geist for everything; Geist Mono for labels, eyebrows, navigation marks (./), and metadata. Display type runs tight and confident; body stays calm and legible. ============================================================ */ :root { /* ---- Families ---- */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Weights ---- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* ---- Fluid display + heading sizes ---- */ --fs-display-xl: clamp(3.25rem, 1.6rem + 6.4vw, 6rem); /* @kind font */ --fs-display-l: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); /* @kind font */ --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* @kind font */ --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); /* @kind font */ --fs-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.625rem); /* @kind font */ --fs-h4: 1.25rem; /* @kind font */ /* ---- Body + utility sizes ---- */ --fs-body-lg: 1.125rem; /* @kind font */ --fs-body: 1rem; /* @kind font */ --fs-body-sm: 0.9375rem; /* @kind font */ --fs-caption: 0.8125rem; /* @kind font */ --fs-mono-label: 0.75rem; /* @kind font */ /* ---- Line heights ---- */ --lh-tight: 1.02; /* @kind font */ --lh-snug: 1.12; /* @kind font */ --lh-heading: 1.18; /* @kind font */ --lh-body: 1.6; /* @kind font */ --lh-relaxed: 1.72; /* @kind font */ /* ---- Letter spacing ---- */ --ls-display: -0.03em; /* @kind font */ --ls-heading: -0.02em; /* @kind font */ --ls-body: -0.005em; /* @kind font */ --ls-mono: 0.02em; /* @kind font */ --ls-eyebrow: 0.14em; /* @kind font */ /* ---- Semantic type aliases (font / weight / size / lh / ls) ---- */ --type-display: var(--fw-medium) var(--fs-display-xl)/var(--lh-tight) var(--font-sans); /* @kind font */ --type-h1: var(--fw-medium) var(--fs-h1)/var(--lh-heading) var(--font-sans); /* @kind font */ --type-h2: var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-sans); /* @kind font */ --type-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans); /* @kind font */ --type-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */ --type-eyebrow: var(--fw-medium) var(--fs-mono-label)/1 var(--font-mono); /* @kind font */ } /* ---- Optional helper classes (components may also map tokens directly) ---- */ .fb-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); } .fb-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); } /* ============================================================ SPACING & LAYOUT — Filip Banasiak Design System 4px base grid. Generous whitespace is core to the brand: sections breathe, content sits inside a calm measure. ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ --space-40: 10rem; /* 160 */ /* ---- Layout ---- */ --container-max: 1200px; /* @kind spacing */ --container-text: 680px; /* @kind spacing */ --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */ --section-y: clamp(4rem, 8vw, 8rem); /* @kind spacing */ /* ---- Component sizing ---- */ --control-h-sm: 2rem; /* @kind spacing */ --control-h: 2.75rem; /* @kind spacing */ --control-h-lg: 3.25rem; /* @kind spacing */ } /* ============================================================ RADIUS — Filip Banasiak Design System Soft but restrained. Cards and controls use gentle radii; pills for tags/avatars. A 0-radius "sharp" option exists for editorial, grid-aligned blocks. ============================================================ */ :root { --radius-0: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* default control / input */ --radius-lg: 16px; /* cards */ --radius-xl: 24px; /* large panels, media */ --radius-pill: 999px; /* ---- Semantic aliases ---- */ --radius-control: var(--radius-md); --radius-card: var(--radius-lg); --radius-media: var(--radius-xl); --radius-tag: var(--radius-pill); } /* ============================================================ ELEVATION — Filip Banasiak Design System Light-theme shadows stay whisper-soft and slightly warm. Most elevation comes from hairline borders; shadows are reserved for genuinely floating surfaces (menus, modals). ============================================================ */ :root { /* Layered, low-alpha, neutral-warm shadows */ --shadow-xs: 0 1px 2px rgba(12, 12, 11, 0.05); --shadow-sm: 0 1px 2px rgba(12, 12, 11, 0.05), 0 2px 6px rgba(12, 12, 11, 0.05); --shadow-md: 0 2px 4px rgba(12, 12, 11, 0.05), 0 8px 20px rgba(12, 12, 11, 0.07); --shadow-lg: 0 4px 8px rgba(12, 12, 11, 0.06), 0 18px 40px rgba(12, 12, 11, 0.10); --shadow-xl: 0 8px 16px rgba(12, 12, 11, 0.08), 0 30px 70px rgba(12, 12, 11, 0.14); /* Inset for pressed / sunken inputs */ --shadow-inset: inset 0 1px 2px rgba(12, 12, 11, 0.06); /* Focus ring (pair with outline-offset) */ --ring: 0 0 0 3px rgba(12, 12, 11, 0.14); /* ---- Semantic aliases ---- */ --elevation-card: var(--shadow-sm); --elevation-raised: var(--shadow-md); --elevation-overlay: var(--shadow-lg); --elevation-modal: var(--shadow-xl); } /* ============================================================ MOTION — Filip Banasiak Design System Framer-native feel: smooth, calm, confident. Quick fades and gentle eases — nothing bouncy or springy on UI. Hover transitions are short; entrances are a touch longer. ============================================================ */ :root { /* ---- Durations ---- */ --dur-instant: 80ms; /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 240ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ --dur-slower: 640ms; /* @kind other */ /* ---- Easing ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* ---- Common transition aliases ---- */ --transition-control: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); /* @kind other */ } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }