/* ========================================================= Brown Design System — Foundations Figma: /Page-1 (Mobile, Tablet, Web, 102, 103, 104) ========================================================= */ /* ---------- Fonts: Inter (primary), Roboto (card+button), Poppins (footer micro) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Poppins:wght@400;500&display=swap'); :root { /* ============= COLOR — NEUTRALS ============= */ /* The palette is near-monochrome: pure black → dark ink → mid-grey → page grey → white. Used liberally across hero type, buttons on black, cards, etc. */ --brown-black: rgb(0, 0, 0); /* pure black — logo, primary fills, about-section bg */ --brown-ink: rgb(10, 13, 16); /* near-black, used in logo gradient stop */ --brown-slate: rgb(29, 32, 37); /* headline text, BROWN wordmark */ --brown-graphite: rgb(70, 78, 90); /* logo gradient top */ --brown-muted: rgb(76, 84, 97); /* subtitle / supporting copy */ --brown-grey: rgb(116, 116, 116); /* meta text (e.g. CEO, job title) */ --brown-ash: rgb(145, 145, 145); /* placeholder/card backing grey */ --brown-hair: rgba(0, 0, 0, 0.12); /* hairline shadow stroke */ --brown-body: rgb(10, 10, 10); /* body copy, footer */ --brown-page: rgb(245, 245, 245); /* primary page background */ --brown-page-warm: rgb(247, 247, 247); /* secondary panel background */ --brown-card-bg: rgb(249, 249, 249); /* raised card surface */ --brown-white: rgb(255, 255, 255); /* cards, type on black */ /* ============= COLOR — ACCENT ============= */ /* A single electric action blue — used ONLY on primary CTA buttons. */ --brown-blue: rgb(47, 138, 228); /* CTA / primary action */ --brown-blue-ink: rgb(255, 255, 255); /* text on blue */ /* ============= COLOR — SEMANTIC ============= */ --fg-1: var(--brown-black); --fg-2: var(--brown-slate); --fg-3: var(--brown-muted); --fg-4: var(--brown-grey); --fg-on-dark: var(--brown-white); --bg-1: var(--brown-page); --bg-2: var(--brown-page-warm); --bg-card: var(--brown-white); --bg-inverse: var(--brown-black); --border-hairline: var(--brown-hair); --accent: var(--brown-blue); --accent-ink: var(--brown-blue-ink); /* ============= TYPE — FAMILIES ============= */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; /* hero, headlines, body */ --font-ui: 'Roboto', system-ui, -apple-system, sans-serif; /* buttons, card-face */ --font-micro: 'Poppins', system-ui, -apple-system, sans-serif; /* footer/legal */ /* ============= TYPE — SCALE ============= */ /* Hero scales by breakpoint: 56 (mobile) → 96 (web). */ --fs-hero-mobile: 56px; --fs-hero-web: 96px; --fs-display: 40px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-body-lg: 20px; --fs-body: 16px; --fs-body-sm: 14px; --fs-meta: 12px; --fs-micro: 10px; --fs-fine: 8px; /* ============= TYPE — WEIGHTS (used in Figma) ============= */ --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ============= TYPE — LINE HEIGHTS ============= */ --lh-tight: 1.0; --lh-hero: 1.07; /* e.g. 96→120, 56→60 */ --lh-heading: 1.47; /* 32→47 observed */ --lh-body: 1.4; /* 20→28 */ --lh-body-sm: 1.19; /* 16→19 */ /* ============= SPACING ============= */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 28px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; /* ============= RADII ============= */ --r-xs: 4px; /* buttons */ --r-sm: 8px; /* image tile (mobile) */ --r-md: 16px; /* card-face / visa card (mobile) */ --r-lg: 20px; /* large feature card, large image */ --r-xl: 28px; /* visa card (web) */ /* ============= SHADOWS ============= */ --shadow-hairline: 0 1px 2px 0 rgba(0,0,0,0.12); /* Stacked card shadow taken directly from the Visa mockup — 6 layers, near-black, very soft */ --shadow-lifted: 0 .76px .61px rgba(0,0,0,0.0197), 0 1.83px 1.47px rgba(0,0,0,0.0283), 0 3.45px 2.76px rgba(0,0,0,0.035), 0 6.15px 4.92px rgba(0,0,0,0.0417), 0 11.5px 9.2px rgba(0,0,0,0.0503), 0 27.5px 22px rgba(0,0,0,0.07); --shadow-lifted-sm: 0 .44px .35px rgba(0,0,0,0.0197), 0 1.05px .84px rgba(0,0,0,0.0283), 0 1.98px 1.59px rgba(0,0,0,0.035), 0 3.54px 2.83px rgba(0,0,0,0.0417), 0 6.6px 5.3px rgba(0,0,0,0.0503), 0 15.8px 12.7px rgba(0,0,0,0.07); /* ============= GRADIENTS ============= */ /* The only gradient in the system is on the logo mark — graphite → ink, top-to-bottom. */ --gradient-logo: linear-gradient(180deg, var(--brown-graphite) 0%, var(--brown-ink) 100%); } /* ========================================================= SEMANTIC TEXT CLASSES ========================================================= */ .t-hero { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-hero-web); line-height: var(--lh-hero); color: var(--fg-2); letter-spacing: -0.01em; text-wrap: balance; } .t-hero-mobile { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-hero-mobile); line-height: 60px; color: var(--fg-2); text-wrap: balance; } .t-display { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--fs-display); line-height: var(--lh-heading); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-1); } .t-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: 1.4; color: var(--fg-1); } .t-body { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body-sm); color: var(--fg-1); } .t-body-lg { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-3); } .t-meta { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-meta); line-height: 1; color: rgba(0,0,0,0.8); text-transform: uppercase; /* nav items use uppercase */ } .t-micro { font-family: var(--font-micro); font-weight: var(--fw-regular); font-size: var(--fs-meta); line-height: 1.33; color: var(--brown-body); } .t-card-name { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: 28px; line-height: 1; color: var(--brown-white); letter-spacing: 0.02em; } .t-card-label { font-family: var(--font-ui); font-weight: var(--fw-light); font-size: 17px; line-height: 1; color: var(--brown-white); } .t-about-eyebrow { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: 24px; line-height: 1.83; letter-spacing: -0.022em; color: var(--brown-white); text-transform: uppercase; } /* ========================================================= BUTTONS (electric-blue primary; only variant in source) ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); font-family: var(--font-ui); font-weight: var(--fw-medium); letter-spacing: -0.006em; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: var(--r-xs); box-shadow: var(--shadow-hairline); cursor: pointer; text-decoration: none; transition: filter .15s ease, transform .15s ease; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); filter: brightness(0.95); } .btn--big { height: 40px; padding: 8px 16px; font-size: 16px; line-height: 24px; min-width: 177px; } .btn--normal { height: 32px; padding: 6px 16px; font-size: 14px; line-height: 20px; min-width: 74px; } /* ========================================================= LINK / NAV ITEM ========================================================= */ .nav-link { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 12px; line-height: 1; color: rgba(0,0,0,0.8); text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em; transition: color .15s ease; } .nav-link:hover { color: var(--brown-black); }