/* ============================================================ MERION — Design System Foundations Colors + Typography tokens Font: Figtree (Google Fonts) — the single brand typeface. Link it in HTML: ============================================================ */ :root { /* ---------- PRIMARY PALETTE ---------- */ --gunmetal-primary: #081A1F; /* foundation: text, structural elements, dark backgrounds */ --gunmetal-secondary: #021217; /* deeper near-black, secondary dark fills */ --white: #FFFFFF; --gray: #ECF2F2; /* light neutral background / hairline borders */ /* Cyan — the brand's signature accent. "Dark"/"Light" denotes the background it sits ON, not the color's value. */ --cyan-dark: #00FFD4; /* bright aqua — accent + glow, use ON dark backgrounds */ --cyan-light: #31A592; /* deep teal — accent, use ON light backgrounds */ /* ---------- NEON SOLUTION ACCENTS ---------- */ /* One neon is assigned per blockchain solution/product to brand it. Use sparingly. */ --neon-lime-dark: #D4FF00; /* on dark backgrounds */ --neon-lime-light: #829C00; /* on light backgrounds */ --neon-pink: #ED145B; --neon-violet: #5F37FF; --neon-magenta: #FF00FF; --neon-orange: #FF8C00; /* ---------- SEMANTIC (LIGHT THEME — default) ---------- */ --bg: var(--white); --bg-subtle: var(--gray); --fg1: var(--gunmetal-primary); /* primary text */ --fg2: rgba(8,26,31,0.62); /* secondary text */ --fg-muted: rgba(8,26,31,0.40); /* tertiary / captions */ --accent: var(--cyan-light); /* teal accent on light bg */ --hairline: var(--gray); /* 1px structural dividers/borders */ --border-strong: rgba(8,26,31,0.12); /* ---------- TYPE TOKENS ---------- */ --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing: body runs at +2%, all-caps identifiers at +16% */ --ls-body: 0.02em; --ls-caps: 0.16em; /* Line-heights */ --lh-tight: 1.0; /* display / titles */ --lh-body: 1.8; /* body copy — generous, airy */ /* Type scale (px) */ --fs-display: 100px; /* hero display, all-caps */ --fs-h1: 48px; --fs-h2: 40px; /* section titles (Figtree Medium) */ --fs-h3: 24px; --fs-body-lg: 20px; /* primary body (Figtree Light) */ --fs-body: 18px; --fs-sm: 16px; --fs-label: 14px; /* all-caps identifiers (Figtree Medium, +16%) */ /* ---------- RADII / SHAPE ---------- */ /* Corners carry a gentle radius — modern and approachable, while keeping the structural, geometric character. */ --radius-sm: 8px; /* small controls, chips, inputs */ --radius-card: 16px; /* default — cards & surfaces */ --radius-lg: 24px; /* larger panels */ --radius-pill: 999px; /* ---------- ELEVATION ---------- */ /* Flat by default. The brand's only "elevation" is the cyan GLOW applied to key words/elements on dark backgrounds. */ --shadow-soft: 0 2px 24px rgba(0,0,0,0.06); --glow-cyan: 0 0 24px rgba(0,255,212,0.5), 0 0 64px rgba(0,255,212,0.25); --glow-cyan-strong: 0 0 16px rgba(0,255,212,0.85), 0 0 48px rgba(0,255,212,0.5), 0 0 96px rgba(0,255,212,0.15); } /* ---------- DARK THEME ---------- */ /* Apply on or any container: class="theme-dark" */ .theme-dark { --bg: var(--gunmetal-primary); --bg-subtle: var(--gunmetal-secondary); --fg1: var(--white); --fg2: rgba(255,255,255,0.57); --fg-muted: rgba(255,255,255,0.40); --accent: var(--cyan-dark); /* bright aqua glows on dark */ --hairline: #11343D; /* dark teal hairline */ --border-strong: rgba(255,255,255,0.16); } /* ---------- CYAN THEME ---------- */ /* Full-bleed cyan background, gunmetal text. class="theme-cyan" */ .theme-cyan { --bg: var(--cyan-dark); --bg-subtle: #00E6BF; --fg1: var(--gunmetal-primary); --fg2: rgba(8,26,31,0.70); --fg-muted: rgba(8,26,31,0.50); --accent: var(--gunmetal-primary); --hairline: rgba(8,26,31,0.18); --border-strong: rgba(8,26,31,0.24); } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .m-display { font-family: var(--font); font-weight: var(--fw-light); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-body); color: var(--fg1); } .m-h1 { font-family: var(--font); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg1); } .m-h2 { font-family: var(--font); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--fg1); } .m-h3 { font-family: var(--font); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: 1.3; color: var(--fg1); } .m-body-lg { font-family: var(--font); font-weight: var(--fw-light); font-size: var(--fs-body-lg); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--fg1); } .m-body { font-family: var(--font); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.6; letter-spacing: var(--ls-body); color: var(--fg1); } /* Emphasis inside body copy */ .m-emph { font-weight: var(--fw-semibold); } /* All-caps identifier / section label / kicker */ .m-label { font-family: var(--font); font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg1); } /* The signature: a key word that glows cyan on a dark background */ .m-glow { color: var(--cyan-dark); text-shadow: var(--glow-cyan); }