/* ============================================================================ * BADideas brand kit, portable and build-independent. * * A single drop-in stylesheet that carries the CURRENT monochrome doctrine to * any standalone artifact (dashboard, tool, MVP, social card, landing) without * a Next.js build. It is the portable mirror of the design system's * component-library/app/styles/tokens.css and references/05_VISUAL_SYSTEM.md; * 05 and tokens.css win on any divergence. * * USE * Copy this whole `kit/` folder (badideas-brand.css + fonts/ + logo/) next to * your target, then in the target's : * * Default (no class) = WEBSITE register, dark (marketing/hero). * Add class="theme-light" to = PRODUCT register, light (dashboards, * tools, MVPs, data UIs, the common case). Add class="theme-dark" on a nested * block to restore dark inside a light page. * * FONT REALITY (honest) * Portable, bundled/open, render correctly anywhere: * - Geist Pixel (product display) . bundled ttf, OFL. * - Instrument Sans (body) + JetBrains Mono (chrome/data) . Google Fonts. * NOT portable: * - Founders Grotesk (website display) is a licensed trial cut, not shipped * here. Standalone website-register headings fall to a system grotesk. * For a true website surface use the component library, not this kit. * Net: the PRODUCT register (dashboards/tools/MVPs, the usual restyle target) * is fully on-brand from this file alone. * ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"); @font-face { font-family: "Geist Pixel"; src: url("fonts/geist-pixel-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; } :root { /* WEBSITE register, dark (default). Monochrome. */ --bg: #000000; --bg-raised: #0A0A0A; --fg: #FAFAFA; --fg-soft: #CFCFC8; /* emphasis body on dark */ --fg-muted: #A3A3A3; --fg-faint: #4D4D4D; /* AAA muted, faint = borders */ --hair: #1A1A1A; --hair-strong: #262626; /* Functional status only. The ONLY non-monochrome colors. Filled tags, never an accent, never colored body text. There is NO brand accent (yellow retired). */ --status-red: #FF5B5B; --status-amber: #E0A22B; --status-green: #7CE38B; --status-ok-bg: #14663C; --status-ok-fg: #FFFFFF; --status-weak-bg: #D99A1F; --status-weak-fg: #1A1A1A; --status-fix-bg: #9E2E22; --status-fix-fg: #FFFFFF; /* Grounded corners on a scale (radius-0-everywhere retired). Sharp only for dense data tables and stepped loaders. */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-sharp: 0px; /* Type. Website display = Founders (not bundled) then a neutral grotesk, never Archivo. Product display = Geist Pixel. Body = Instrument Sans. Mono = chrome only. */ --font-display-website: "Founders Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --font-display-product: "Geist Pixel", "JetBrains Mono", ui-monospace, monospace; --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-display: var(--font-display-website); /* register-aware alias */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 32px; --text-2xl: 56px; --tracking-label: 0.05em; } :root[data-register="product"], .theme-light { /* PRODUCT register, light (dashboards/tools/MVPs, the common case). */ --bg: #F4F4F0; --bg-raised: #FFFFFF; --fg: #111111; --fg-soft: #333333; --fg-muted: #4D4D4D; --fg-faint: #111111; /* borders are black on light */ --hair: #E2E2DA; --hair-strong: #C9C9C0; --status-red: #C33A2B; --status-amber: #8A5A00; --status-green: #1A7F4B; --font-display: var(--font-display-product); } .theme-dark { --bg: #000000; --bg-raised: #0A0A0A; --fg: #FAFAFA; --fg-soft: #CFCFC8; --fg-muted: #A3A3A3; --fg-faint: #4D4D4D; --hair: #1A1A1A; --hair-strong: #262626; --panel: #141414; --status-red: #FF5B5B; --status-amber: #E0A22B; --status-green: #7CE38B; } /* ---- Base ---------------------------------------------------------------- */ body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; /* Founders caps at 700; do not request 800/900 */ letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.4em; } :root[data-register="product"] h1, :root[data-register="product"] h2, .theme-light h1, .theme-light h2 { letter-spacing: 0; } /* Geist Pixel: no negative tracking */ a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* links are ink + underline, no hue */ code, kbd, pre, .mono { font-family: var(--font-mono); } .u-caps { text-transform: uppercase; letter-spacing: var(--tracking-label); font-family: var(--font-mono); font-size: var(--text-sm); } .u-muted { color: var(--fg-muted); } hr, .hair { border: 0; border-top: 1px solid var(--hair); } /* ---- Primitives (grounded corners, 1px frames, no shadow/gradient) ------- */ .card, .panel { background: var(--bg-raised); border: 1px solid var(--hair-strong); border-radius: var(--radius); padding: clamp(16px, 2vw, 24px); } .btn { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; } .btn--ghost { background: transparent; color: var(--fg); } .input { font-family: var(--font-body); font-size: var(--text-sm); background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0; padding: 8px 2px; } .input:focus { outline: none; border-bottom-color: var(--fg); } /* Status is one filled-tag rendering everywhere. Fixed width caps label, never colored text. */ .tag { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); border-radius: var(--radius-sm); padding: 3px 8px; min-width: 64px; } .tag--ok { background: var(--status-ok-bg); color: var(--status-ok-fg); } .tag--weak{ background: var(--status-weak-bg); color: var(--status-weak-fg); } .tag--fix { background: var(--status-fix-bg); color: var(--status-fix-fg); } /* Dense data tables may keep sharp corners. */ table.data { border-collapse: collapse; font-variant-numeric: tabular-nums; } table.data th, table.data td { border-bottom: 1px solid var(--hair); padding: 8px 12px; text-align: left; } table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }