# B:Side Assist — Design Language The design language behind B:Side Assist: the principles, palette, and patterns that make the product feel like itself. A reference for designing anything on-brand — kept high-level on purpose. --- ## Essence Financial clarity, expressed as visual clarity. Light, calm, and confident. Lots of breathing room, a single decisive accent, large but quiet typography, and motion that reassures rather than performs. It should feel as dependable as the product it represents. --- ## Principles - **Clarity over decoration.** Whitespace and content lead. Color, motion, and ornament are spent sparingly. - **One accent, used with intent.** A single cobalt brand color marks what matters; everything else stays neutral. - **Quiet confidence.** Big, light-weight headlines and plain language — assured, never loud. - **Calm motion.** Fast, gentle, purposeful. It guides and confirms; it never blocks or shows off. - **Trust first.** Honest, outcome-framed, non-salesy. - **Accessible by default.** Reduced-motion respected, focus always visible, semantics throughout. --- ## Color A **neutral foundation with one chromatic accent**. The interface is light by default. - **Brand — Cobalt `#0047AB`.** The one brand color. It carries primary actions, accent words, key icons, focus states, and selected states. Used solid (with white text) for emphasis, or as a soft tint for quiet highlights. It is an accent, never body text. - **Neutrals.** A near-black → white greyscale does the structural work: near-black text on white, mid-greys for secondary copy, the lightest greys for hairline borders and subtle fills, and near-black surfaces for inverse panels. - **Feedback.** A single red is reserved for errors. Decorative status dots use red / amber / green. The palette is intentionally restrained — a quiet, neutral system that lets a single accent do the talking. --- ## Typography Two voices, plus a monospace. - **Functional text — a clean humanist sans (Inter).** Navigation, body, labels, buttons, captions — the default everywhere. - **Display — a lighter, more characterful sans (Waldenburg).** Section headlines and hero statements only, set **large and light** with tight negative tracking. - **Code — a monospace (Geist Mono)** for technical text. Headlines are the signature: oversized, light weight, tightly tracked, with a single accent-colored word for focus. The scale runs from small captions to large display sizes (roughly 10 → 16 → 18 → 20 → 32 → 36 → 48px), with line-height tightening and tracking turning negative as type grows. --- ## Layout & Space - **Rhythm.** A 4px base unit; generous, consistent spacing. - **Rails.** Content is centered and capped — a standard content width for most sections, wider rails for media-rich layouts, and narrow reading widths for text. - **Structure.** Mobile-first, single column on small screens, expanding to multi-column grids at larger breakpoints. Airy vertical rhythm between sections. --- ## Shape & Depth - **Rounded language.** Fully rounded pills for actions and badges; large, soft radii for cards, panels, and media frames; small radii for inputs. - **Light depth.** Hairline borders and rings carry most of the structure; soft, diffuse shadows lift only floating elements. The signature touch is a subtle cobalt-tinted lift on primary actions. --- ## Motion Calm, fast, and purposeful — one easing curve, short durations. - **Curve.** A strong ease-out (`cubic-bezier(0.23, 1, 0.32, 1)`) so motion starts fast and feels instant. - **Reveal on scroll.** Elements fade and rise into place once, as they enter view; groups cascade with a small stagger. - **Asymmetric overlays.** Deliberate actions spring open; system responses snap shut faster. - **Restraint.** Animate only cheap properties; keep hover feedback quick and reversible. - **Respect.** Reduced-motion preferences drop movement while keeping meaning. --- ## Patterns The recurring building blocks, at a glance: - **Buttons.** Pill-shaped. Primary is a solid cobalt fill with a hover lift; secondary is an outline that fills with cobalt on hover; quiet actions are subtle outlines. Always with a visible focus state. - **Inputs.** Soft, hairline-bordered fields; focus shifts the border and ring to cobalt. - **Surfaces.** Light cards with large radii and hairline borders; near-black panels for emphasis; framed media with fixed aspect ratios. - **Badges & eyebrows.** Small uppercase labels — a tinted cobalt chip, or a kicker flanked by thin rules. - **Navigation.** A floating, blurred pill bar; logo left, links centered, primary action right. - **Overlays.** A centered panel over a dimmed, blurred scrim — spring in, snap out. --- ## Voice & Tone Plain-spoken and anti-jargon. Outcome-framed, not feature-framed. Trust-forward and never salesy. Conversational, second-person, and concrete. --- *A living reference for the B:Side Assist design language. Served at `/design.md`.*