// brand-cards.jsx — OnboardIQ brand foundations // Each export below is a self-contained artboard body. // ─────────────────────────────────────────────────────────── // LOGO PRIMITIVES — small SVG components reused everywhere // ─────────────────────────────────────────────────────────── const StepMark = ({ size = 40, color = "currentColor", strokeWidth = 2.2 }) => ( // Three nested chevrons — visual metaphor for staged onboarding steps. // Square terminals, no rounded joins. ); const SealMark = ({ size = 56, color = "currentColor" }) => ( // Square credential seal — OIQ monogram + inscription rule. ); const Wordmark = ({ size = 24, color = "currentColor", weight = 600 }) => ( Onboard IQ ); const Lockup = ({ size = 24, color = "currentColor" }) => ( ); // ─────────────────────────────────────────────────────────── // CARD 1 — LOGO SYSTEM // ─────────────────────────────────────────────────────────── function LogoCard() { return (
{/* ───── Role A — BRAND IDENTITY ───── */}
ROLE A Brand identity — represents OnboardIQ app · marketing · email sender · social · business cards
{/* ───── Role B — ATTESTATION DEVICE ───── */}
ROLE B Attestation device — what OnboardIQ issues audit certificates · signature completion · compliance exports · document footers
Certificate of Audit · Daniel Okafor · I-9 Section 2
executed under hash-chain custody · 0x7a1f…c402
countersigned by T. Bramwell · 2026-05-13 · 09:42 ET
tsa-rfc3161 · timestamped 1747146126
NOT FOR SCREEN UI used only on documents the brand issues
{/* Construction strip */}
3 chevrons · 8px grid
2.2px stroke · square caps
step rhythm = onboarding cadence
stepmark min · 16px (digital)
seal min · 56px (print only)
clear space · 1× chevron height
); } // ─────────────────────────────────────────────────────────── // CARD 2 — COLOR SYSTEM // ─────────────────────────────────────────────────────────── function ColorCard() { const neutrals = [ { label: "Paper", values: [ { name: "paper-50", hex: "#FBF9F4" }, { name: "paper-100", hex: "#F4F1EA", role: "default surface" }, { name: "paper-200", hex: "#ECE7DC" }, { name: "paper-300", hex: "#DDD6C6", role: "1px borders" }, { name: "paper-400", hex: "#C5BDA9" }, ]}, { label: "Ink", values: [ { name: "ink-900", hex: "#16140F", role: "foreground" }, { name: "ink-700", hex: "#3D3930", role: "body" }, { name: "ink-600", hex: "#5F5A4E", role: "secondary" }, { name: "ink-500", hex: "#807A6C" }, { name: "ink-400", hex: "#A5A091", role: "placeholder" }, ]}, ]; const palettes = [ { name: "A · amber", desc: "default \u00b7 industrial credential \u00b7 torque", swatches: [ { name: "accent-700", hex: "#8B6017" }, { name: "accent-500", hex: "#D49A3A", role: "primary" }, { name: "accent-200", hex: "#F1DAA1" }, { name: "accent-100", hex: "#F8ECCB", role: "tint bg" }, ]}, { name: "B · verdigris", desc: "alt \u00b7 oxidized patina \u00b7 institutional", swatches: [ { name: "accent-700", hex: "#1F4A3F" }, { name: "accent-500", hex: "#437D6D", role: "primary" }, { name: "accent-200", hex: "#B5D2C8" }, { name: "accent-100", hex: "#D6E5DF", role: "tint bg" }, ]}, ]; const slate = [ { name: "slate-700", hex: "#2F3D49" }, { name: "slate-500", hex: "#647686", role: "info text" }, { name: "slate-300", hex: "#B6C0CA" }, { name: "slate-100", hex: "#E2E7EC" }, ]; const status = [ { name: "success", hex: "#3F7A5A" }, { name: "warn", hex: "#B07B1F" }, { name: "danger", hex: "#98353F" }, { name: "info", hex: "#3D5878" }, ]; return (
{/* Neutrals */} {neutrals.map((g) => (
{g.label}
{g.values.map((s) => ( ))}
))} {/* Two accent directions */}
{palettes.map((p, idx) => (
Accent {p.name} {idx === 0 && DEFAULT}
{p.desc}
{p.swatches.map((s) => )}
))}
{/* Slate + status compact */}
Slate · support
{slate.map((s) => )}
Status
{status.map((s) => (
{s.name}
))}
Third option · oxblood (#98353F) available as a tweak preset. All three are non-obvious choices that read credentialed, not corporate.
); } function Swatch({ s }) { return (
{s.name}
{s.hex}
{s.role &&
{s.role}
}
); } // ─────────────────────────────────────────────────────────── // CARD · THEME · LIGHT + DARK (dark is its own design, not a recolor) // ─────────────────────────────────────────────────────────── function ThemeCard() { return (
What changes
); } function DiffRow({ tag, light, dark }) { return (
{tag}
light {light} dark {dark}
); } function ThemeSpecimen({ mode }) { // A tiny chunk of the dashboard rendered explicitly in the given theme. // Both demonstrate the rule that dark surfaces stack 3 deep. const isDark = mode === "dark"; const bg = isDark ? '#14120E' : '#FBF9F4'; const surf1 = isDark ? '#221F19' : '#FFFFFF'; const surf2 = isDark ? '#2E2A22' : '#F4F1EA'; const border = isDark ? '#3A372E' : '#DDD6C6'; const text = isDark ? '#F6F2E6' : '#16140F'; const muted = isDark ? '#8E8A7E' : '#5F5A4E'; const tertiary = isDark ? '#6F6C62' : '#807A6C'; const accent = isDark ? '#E2B25F' : '#D49A3A'; const headerWeight = isDark ? 500 : 600; return (
{mode} · specimen
Today's queue 6 open
Countersign I-9 Section 2 Daniel Okafor · due 17:00 ET
warn · sla 4h
I-9 currency 142 / 148
); } function TypeCard() { return (
); } function TypeRow({ tag, sample, size, weight, mono, serif, ink = "var(--ink-900)" }) { const fam = mono ? "var(--mono)" : serif ? "var(--serif)" : "var(--sans)"; return (
{tag}
24 ? '-0.02em' : (mono ? 0 : '-0.005em'), lineHeight: 1.15, }}>{sample}
); } function WeightChip({ name, weight }) { return (
{name}
Aa Bb Gg 0123
); } // ─────────────────────────────────────────────────────────── // CARD 4 — VOICE & TONE // ─────────────────────────────────────────────────────────── function VoiceCard() { const pairs = [ { state: "Empty state · no onboardings yet", bad: "Looks like you haven't started anything yet! ✨", good: "No active onboardings. Start one from a template, or import a roster from CSV." }, { state: "Success toast · I-9 verified", bad: "Awesome! Your form was submitted successfully.", good: "I-9 Section 2 countersigned by T. Bramwell at 09:42. E-Verify case opened. Result expected within the hour." }, { state: "Destructive confirm · delete template", bad: "Are you sure you want to delete this template? This action cannot be undone.", good: "Delete \u201cContractor · 1099 · CA\u201d? 7 onboardings reference this template. They keep running. New onboardings can no longer use it." }, { state: "Pricing line · what you're paying for", bad: "Unleash powerful, scalable, mission-critical onboarding.", good: "$8 per onboarding, billed at completion. No seat fees. Cancel without exit toll." }, ]; return (
{pairs.map((p, i) => (
{p.state}
✕ AVOID
{p.bad}
✓ USE
{p.good}
))}
Banned · house style
{["unleash","supercharge","seamless","mission-critical","world-class","robust","next-generation","✨ sparkle","em-dash —","AI-powered","best-in-class"].map(w => ( {w} ))}
); } // ─────────────────────────────────────────────────────────── // CARD 5 — ICONOGRAPHY // ─────────────────────────────────────────────────────────── const Icon = ({ name, size = 20, stroke = 1.6 }) => { // 24-grid, square caps, no rounded joins. Custom for OnboardIQ. const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "square", strokeLinejoin: "miter", "aria-hidden": "true", }; switch (name) { case "dashboard": return (); case "onboardings": return (); case "templates": return (); case "people": return (); case "documents": return (); case "signature": return (); case "shield": return (); case "clearance": return (); case "audit": return (); case "equipment": return (); case "training": return (); case "integration": return (); case "search": return (); case "bell": return (); case "plus": return (); case "filter": return (); case "chevron-r": return (); case "chevron-d": return (); case "check": return (); case "x": return (); case "clock": return (); case "external": return (); case "calendar": return (); case "lock": return (); case "flag": return (); case "pause": return (); case "more": return (); case "send": return (); case "upload": return (); case "alert": return (); case "branch": return (); case "settings": return (); default: return null; } }; function IconCard() { const set = [ "dashboard","onboardings","templates","people","documents","signature", "shield","clearance","audit","equipment","training","integration", "search","bell","filter","calendar","clock","lock","flag","branch", "upload","send","alert","external","chevron-r","chevron-d","check","x", "plus","more","pause","settings", ]; return (
{set.map(n => (
{n}
))}
Construction
24px grid 1.6 stroke square caps
); } // ─────────────────────────────────────────────────────────── // CARD 6 — MOTION // ─────────────────────────────────────────────────────────── function MotionCard() { return (
Principles
Motion announces state, never decorates it. No parallax, no autoplay video, no spring overshoot. A button has 3 states, not 7. A drawer slides in 240ms; the same drawer slides out 240ms. If a user has reduced-motion on, every animation collapses to opacity or nothing.
); } function MotionRow({ label, subtitle, demoKey }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 1800); return () => clearInterval(t); }, []); const dur = demoKey === "state" ? 120 : demoKey === "reveal" ? 180 : demoKey === "page" ? 240 : 0; const phase = tick % 2; return (
{label}
{subtitle}
{dur}ms
); } // ─────────────────────────────────────────────────────────── // SHARED — header + panel // ─────────────────────────────────────────────────────────── function Header({ eyebrow, title, subtitle }) { return (
{eyebrow}
{title}
{subtitle}
); } function Panel({ label, children, dark }) { return (
{label}
{children}
); } // Export to window so other files can use Object.assign(window, { StepMark, SealMark, Wordmark, Lockup, Icon, LogoCard, ColorCard, TypeCard, ThemeCard, VoiceCard, IconCard, MotionCard, OiqHeader: Header, });