/* =============================================================================
HARTWELL × BEDROCK — BRAND SYSTEM
Single source of truth for type + color. Hand this one file to Claude Code.
HOW TO USE
1. Put this file in your project (e.g. /styles/brand-system.css).
2. In your HTML , load the fonts (see FONT LOADING block below) and
link this file:
3. Style with the tokens (var(--navy), var(--brass)…) and the role classes
(.h1, .lead, .body, .btn…). Examples at the bottom.
THE TWO HALVES
- COLORS → the 4 sacred brand colors + derived surfaces/text/states.
- TYPE → 3 fonts mapped to roles (headline, body, impact).
========================================================================== */
/* =============================================================================
FONT LOADING — paste this into your HTML (not into CSS):
========================================================================== */
:root{
/* ===========================================================================
COLOR · PART 1 — BRAND (sacred, never change these four)
======================================================================== */
--navy:#22303E; /* authority · default dark background · the CTA button */
--nude:#EBE2D3; /* warmth · primary text on dark · light backgrounds */
--ink:#242222; /* depth · the dark form card · darkest text on light */
--brass:#BCA06A; /* prestige · ACCENT ONLY (lines, labels, emphasis) */
/* ===========================================================================
COLOR · PART 2 — DERIVED (same 4 colors at different lightness)
Nothing new is invented — these are just tints/shades of the brand.
======================================================================== */
/* Surfaces — navy shades, for layering cards on a dark page */
--navy-900:#1A2530; /* deepest — page background behind cards */
--navy-800:#22303E; /* = brand navy — default section background */
--navy-700:#2A3947; /* raised card */
--navy-600:#2F3C4B; /* video-card tone (your #8) */
--navy-500:#3A4856; /* borders / dividers on navy */
/* Ink shades — for the dark form card and anything sitting on ink */
--ink-900:#1C1A1A; /* deepest */
--ink-800:#242222; /* = brand ink — form-card background (#9) */
--ink-700:#2E2B2B; /* pill bg inside form ("slightly lighter") */
--ink-600:#3A3636; /* input border / divider on ink */
/* Text tints — nude pulled toward the background for hierarchy */
--text-strong:#EBE2D3; /* = nude — headlines & primary text on dark */
--text-muted:#A49E96; /* secondary text · footer (your #10) */
--text-faint:#6E6A66; /* fine print, timestamps, disabled labels */
/* Brass tints — accent at different intensities (for hover/press) */
--brass-bright:#D4BC86; /* hover on brass elements */
--brass-dim:#8E7A50; /* pressed · brass on light bg */
/* Functional — the ONLY non-brand colors. Tiny doses, meaning only. */
--live:#D6584E; /* red status / "ticking" light (your #7) */
--success:#7FA86B; /* form success, checkmarks */
--error:#D6584E; /* validation errors */
--focus:#BCA06A; /* focus ring = brass (stays on-brand) */
/* ===========================================================================
TYPE · FONT FAMILIES
======================================================================== */
--font-display:"Fraunces", Georgia, serif; /* Hartwell voice: headlines, big numbers, quotes */
--font-sans:"Schibsted Grotesk", system-ui, sans-serif; /* workhorse: subheads, body, UI, buttons, labels */
--font-impact:"Archivo", "Schibsted Grotesk", sans-serif; /* Bedrock impact ONLY: product name, the "25", aggressive CTA */
}
/* =============================================================================
TYPE · ROLE CLASSES
Use these on elements directly:
,
, etc.
Colors are NOT baked in (except .eyebrow) so you can place any role on
navy or nude — set color with a token: style="color:var(--nude)".
========================================================================== */
/* Fraunces tuning: high contrast, refined (no soft, no wonk) */
.display,
.h1,.h2,.h3,.stat,.quote{
font-optical-sizing:auto;
font-variation-settings:"SOFT" 0,"WONK" 0;
}
.eyebrow{ /* kicker / pill label — the only role with a default color */
font-family:var(--font-sans); font-weight:600; font-size:13px;
letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.h1{ /* hero headline */
font-family:var(--font-display); font-weight:600;
font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.05; letter-spacing:-.015em;
}
.h2{ /* section headline */
font-family:var(--font-display); font-weight:600;
font-size:clamp(1.875rem,4.5vw,3rem); line-height:1.1; letter-spacing:-.01em;
}
.h3{
font-family:var(--font-display); font-weight:600;
font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; letter-spacing:-.005em;
}
.lead{ /* subheadline / intro paragraph */
font-family:var(--font-sans); font-weight:400;
font-size:clamp(1.1875rem,2.2vw,1.375rem); line-height:1.5;
}
.body{ /* default paragraph */
font-family:var(--font-sans); font-weight:400;
font-size:1.0625rem; line-height:1.6;
}
.body-sm{
font-family:var(--font-sans); font-weight:400;
font-size:.9375rem; line-height:1.55;
}
.caption{ /* footnote, micro-label, "toma 60 segundos" */
font-family:var(--font-sans); font-weight:500;
font-size:.8125rem; line-height:1.45; letter-spacing:.01em;
}
.btn{ /* button / CTA text */
font-family:var(--font-sans); font-weight:600;
font-size:.9375rem; letter-spacing:.04em; text-transform:uppercase;
}
.stat{ /* big number — $1M, $1T, the 25 */
font-family:var(--font-display); font-weight:700;
font-size:clamp(2.75rem,7vw,5rem); line-height:1; letter-spacing:-.02em;
}
.quote{ /* pull quote */
font-family:var(--font-display); font-style:italic; font-weight:500;
font-size:clamp(1.375rem,3vw,1.75rem); line-height:1.4;
}
.impact{ /* Bedrock-only heavy display */
font-family:var(--font-impact); font-weight:900;
font-size:clamp(2.25rem,5vw,4rem); line-height:.95;
letter-spacing:-.01em; text-transform:uppercase;
}
/* =============================================================================
OPTIONAL HELPERS — small conveniences, safe to delete
========================================================================== */
/* Headline gradient: nude → brass (for the hero H1, your #3) */
.text-gradient{
background:linear-gradient(120deg, var(--nude) 35%, var(--brass) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Brass emphasis inside body/subhead copy (use sparingly — the "$1T", "recession-proof") */
.accent{ color:var(--brass); }
/* Navy CTA button — the conversion button from the brand */
.cta{
font-family:var(--font-sans); font-weight:600; font-size:.9375rem;
letter-spacing:.04em; text-transform:uppercase;
background:var(--navy); color:var(--nude);
border:none; border-radius:10px; padding:16px 28px; cursor:pointer;
transition:background .15s ease;
}
.cta:hover{ background:var(--navy-700); }
/* =============================================================================
USAGE EXAMPLES (reference — delete before shipping)
-----------------------------------------------------------------------------
atención profesionales con $25k+ en ahorros
Cómo abrir tu propio negocio de Home Care…
Te lo montamos completo en 30 días.
Más de $1T en fondos anuales.