/*! Faceplate v1.0 — Christopher Biel's portable design system * TE-inspired · hard square edges · sage + terracotta · Manrope + IBM Plex Mono * Everything is prefixed `--fp-` / `.fp-` to avoid collisions in existing codebases. * Styles live in @layer fp.* so a project's own (unlayered) CSS always wins / can override. * Fonts are NOT imported here — see fonts.css (self-host) or add a Google Fonts . */ @layer fp.tokens, fp.base, fp.components, fp.utilities; /* ============================================================ TOKENS */ @layer fp.tokens { :root { /* base neutrals */ --fp-bg:#FFFFFF; --fp-surface:#F7F8F8; --fp-border:#E4E7E9; --fp-muted:#8A9097; --fp-body:#52585E; --fp-ink:#1C1E21; /* accent — sage */ --fp-sage:#5E7A50; --fp-sage-deep:#455C3A; /* small text / links on white (AA) */ --fp-sage-tint:#DCE5D2; --fp-sage-xl:#EFF3EA; /* complement — terracotta */ --fp-terra:#BB6240; --fp-terra-deep:#9E4F33; --fp-terra-tint:#F0D9CC; /* signature neutral — #CBCBCB reads as CB·CB·CB */ --fp-gray:#CBCBCB; /* data visualization (categorical) */ --fp-dv-1:#5E7A50; --fp-dv-2:#BB6240; --fp-dv-3:#D6A23C; --fp-dv-4:#2C7A78; --fp-dv-5:#8A6A53; --fp-dv-6:#9BA0A4; /* typography */ --fp-font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fp-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fp-text-xs:.75rem; --fp-text-sm:.875rem; --fp-text-base:1rem; --fp-text-h3:1.25rem; --fp-text-h2:1.5625rem; --fp-text-h1:2rem; --fp-text-display:2.5rem; --fp-leading:1.65; --fp-leading-tight:1.15; --fp-track-tight:-.02em; --fp-track-label:.12em; /* shape & structure */ --fp-radius:0; /* hard square edges — the Faceplate signature */ --fp-keyline:1.5px; /* structural border (ink) */ --fp-hairline:1px; --fp-rule:var(--fp-sage); /* spacing — 8px base */ --fp-space-1:.25rem; --fp-space-2:.5rem; --fp-space-3:1rem; --fp-space-4:1.5rem; --fp-space-5:2rem; --fp-space-6:3rem; --fp-space-7:4rem; } } /* ============================================================ BASE (opt-in) */ /* Apply class `fp` to a wrapper (or ) to adopt the base type/colors. Kept opt-in so Faceplate never restyles a host project globally. */ @layer fp.base { .fp { font-family:var(--fp-font-sans); color:var(--fp-ink); background:var(--fp-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .fp :where(p){ color:var(--fp-body); line-height:var(--fp-leading); } .fp :where(a):not([class]){ color:var(--fp-sage-deep); } } /* ============================================================ COMPONENTS */ @layer fp.components { /* --- type --- */ .fp-display{ font-weight:800; font-size:var(--fp-text-display); letter-spacing:var(--fp-track-tight); line-height:var(--fp-leading-tight); } .fp-h1{ font-weight:800; font-size:var(--fp-text-h1); letter-spacing:var(--fp-track-tight); line-height:1.15; } .fp-h2{ font-weight:700; font-size:var(--fp-text-h2); letter-spacing:-.01em; line-height:1.2; } .fp-h3{ font-weight:600; font-size:var(--fp-text-h3); line-height:1.3; } .fp-body{ font-size:var(--fp-text-base); line-height:var(--fp-leading); color:var(--fp-body); } .fp-mono{ font-family:var(--fp-font-mono); } .fp-label{ font-family:var(--fp-font-mono); font-weight:500; font-size:var(--fp-text-xs); letter-spacing:var(--fp-track-label); text-transform:uppercase; color:var(--fp-muted); } .fp-kicker{ font-family:var(--fp-font-mono); font-size:var(--fp-text-xs); letter-spacing:var(--fp-track-label); text-transform:uppercase; color:var(--fp-sage); } .fp-wordmark{ font-family:var(--fp-font-sans); font-weight:800; letter-spacing:var(--fp-track-tight); line-height:1; } /* accent rule under a heading */ .fp-rule{ display:block; height:3px; width:48px; background:var(--fp-rule); border:0; } /* monogram / mark plate (square, #CBCBCB by default) */ .fp-plate{ display:inline-grid; place-items:center; aspect-ratio:1; background:var(--fp-gray); color:var(--fp-ink); border-radius:var(--fp-radius); } .fp-plate--sage{ background:var(--fp-sage); color:#fff; } /* buttons */ .fp-btn{ display:inline-block; font-family:var(--fp-font-sans); font-weight:700; font-size:.8125rem; letter-spacing:.01em; padding:.62em 1.05em; border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius); background:var(--fp-bg); color:var(--fp-ink); cursor:pointer; text-decoration:none; line-height:1; } .fp-btn--solid{ background:var(--fp-sage); border-color:var(--fp-sage); color:#fff; } .fp-btn--terra{ background:var(--fp-terra); border-color:var(--fp-terra); color:#fff; } .fp-btn--ghost{ background:transparent; } /* chips & topical tags (chip + icon) */ .fp-chip{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--fp-font-mono); font-weight:600; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding:.32em .62em; border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius); } .fp-chip--sage{ background:var(--fp-sage-tint); } .fp-chip--terra{ background:var(--fp-terra-tint); } .fp-chip--gray{ background:var(--fp-gray); } .fp-chip svg{ width:1.05em; height:1.05em; } .fp-tag{ /* alias for a chip used as a category tag with an icon */ } /* card & panel */ .fp-card{ background:var(--fp-bg); border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius); padding:var(--fp-space-4); } .fp-panel{ background:var(--fp-surface); border:var(--fp-hairline) solid var(--fp-border); border-radius:var(--fp-radius); padding:var(--fp-space-4); } /* segmented control */ .fp-seg{ display:inline-flex; border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius); } .fp-seg > *{ font-family:var(--fp-font-mono); font-size:.75rem; padding:.42em .82em; border-right:var(--fp-keyline) solid var(--fp-ink); background:transparent; } .fp-seg > *:last-child{ border-right:0; } .fp-seg > .is-on, .fp-seg > [aria-selected="true"]{ background:var(--fp-ink); color:#fff; } /* dividers */ .fp-hr{ border:0; border-top:2px solid var(--fp-ink); } .fp-hr--dashed{ border:0; border-top:2px dashed var(--fp-ink); } .fp-hr--gray{ border:0; border-top:var(--fp-hairline) solid var(--fp-gray); } /* link */ .fp-link{ color:var(--fp-sage-deep); font-weight:600; text-decoration:none; border-bottom:2px solid var(--fp-sage-tint); } /* intensity bands (reversed surfaces for registers 03/04) */ .fp-band{ background:var(--fp-sage); color:#fff; } .fp-band--terra{ background:var(--fp-terra); color:#fff; } .fp-band--ink{ background:var(--fp-ink); color:#fff; } } /* ============================================================ UTILITIES */ @layer fp.utilities { .fp-square{ border-radius:0 !important; } .fp-c-ink{ color:var(--fp-ink); } .fp-c-sage{ color:var(--fp-sage); } .fp-c-terra{ color:var(--fp-terra); } .fp-c-muted{ color:var(--fp-muted); } .fp-c-body{ color:var(--fp-body); } .fp-bg-sage{ background:var(--fp-sage); color:#fff; } .fp-bg-gray{ background:var(--fp-gray); color:var(--fp-ink); } .fp-bg-surface{ background:var(--fp-surface); } }