Rulebase

Overview

Rulebase is an AI-powered operating system for customer operations, purpose-built for financial services institutions. The platform reviews every conversation across human and AI agents in real time, identifying stalled onboarding flows, dormant accounts, and unresolved issues—then deploys specialist agents to chase resolution and reactivation without adding headcount. The design language embodies 'Refined Minimalism with Operational Clarity': a warm, neutral palette (cream #f7f7f4, warm gray #efedeb, charcoal #1a1716) paired with precise typography and restrained accent colors (burnt orange #d85210, sage green #646e39, deep red #cc3542) that signal operational states and urgency without visual noise. The aesthetic evokes the precision of financial operations—clean, trustworthy, and purposeful—while maintaining a human-centric warmth through generous whitespace and soft shadows (0 3px 8px rgba(26, 23, 22, 0.15)). The user feels in control of complex data flows, never overwhelmed.

The brand voice is direct, operationally grounded, and confident without arrogance. Rulebase speaks in the language of customer operations leaders: metrics-driven, outcome-focused, and pragmatic. Vocabulary favors active verbs (catch, chase, activate, deploy) over passive constructions. Tone is calm and assured—the product handles urgency so the user doesn't have to. Example: 'Catch every stall, run every follow-up, and activate accounts 3x faster' demonstrates the voice: specific outcomes, no hype, action-oriented.

Colors

The color system is anchored in a warm, desaturated neutral foundation that reflects the financial services context—trustworthy, professional, and approachable. The surface stack progresses from the warm beige background (#efedeb) through increasingly refined container layers: surface-container-lowest (#faf9f5, near-white for elevated content), surface-container (#e8e5e3, default card background), and surface-container-highest (#d0cdc9, for deeply nested or modal contexts). On-surface text is a deep charcoal (#1e1e1e) with 99% contrast, ensuring legibility across all surfaces. The outline token (#d9d7d5) defines subtle borders and dividers, while outline-variant (#c9c7c5) is reserved for disabled or tertiary UI elements.

Primary (#474440, warm taupe) is the signature action color used exc

Typography

The type system uses a two-font pairing: ABC Diatype (a geometric, contemporary display font) for headlines and hero content, paired with Inter (a humanist sans-serif) for body text and UI labels. This combination balances visual distinctiveness with operational clarity—Diatype's geometric precision signals fintech credibility, while Inter's warmth keeps the interface approachable. Display sizes (60px, 52px, 40px) use Diatype at weights 400–500, with tight negative letter-spacing (-1.2px to -0.8px) to create visual impact and hierarchy. Body text (16px, 14px) uses Inter at 400 weight with 26px line-height and -0.09px letter-spacing, optimized for reading dense operational content. Labels and CTAs use Hedvig Letters Sans (a geometric sans with distinctive letterforms) at 14px, 400 weight, t

Layout

The layout system uses a 12-column grid with 24px gutters, constrained to a maximum width of 1200px for desktop. The spacing scale is built on a 4px unit (xs: 4px, sm: 8px, md: 12px, lg: 16px, xl: 20px, 2xl: 24px, 3xl: 32px, 4xl: 40px, 5xl: 48px, 6xl: 64px, 7xl: 80px, 8xl: 100px), enabling precise control over micro-interactions and macro page rhythm. Section separation uses 100px vertical spacing (--section-y: 100px) to create breathing room between major content blocks, while internal component spacing uses the md/lg/xl tokens (12px–20px) to maintain visual cohesion. Horizontal padding on full-width sections is 100px (--section-x: 100px) on desktop, scaling down to 24px on tablet and 16px on mobile. Cards and containers use 0px padding by default (content padding is applied to child elem

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the warm, paper-like aesthetic. The elevation scale has three levels: sm (0 1px 2px rgba(26, 23, 22, 0.06)) for subtle card borders and hover states, md (0 3px 8px rgba(26, 23, 22, 0.15)) for elevated cards and dropdown panels, and lg (0 16px 48px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06)) for modals and floating content. Shadows use the inverse-surface color (#1a1716) at low opacity to maintain warmth and avoid harsh blacks. Cards default to a 1px solid border at {colors.outline} (#d9d7d5) with sm shadow; on hover, th

Shapes

The shape philosophy is 'Architectural Precision with Warmth'—sharp enough to feel modern and trustworthy, yet softened enough to remain approachable. The primary radius is 4px (--radius-sm), applied to all buttons, inputs, small cards, and standard UI elements. This tight radius creates a geometric, contemporary feel aligned with fintech aesthetics while remaining highly legible. Medium radius (8px, --radius-md) is used for larger cards, panels, and list items, providing visual distinction without softness. Large radius (12px, --radius-lg) is reserved for modals, overlays, and hero sections w

Components

Action Elements Buttons use a consistent 6px vertical × 14px horizontal padding with 32px minimum height, applied across primary, secondary, and ghost variants. Primary buttons (#474440 background, #f7f7f4 text) use 4px radius and no border; on hover, the background shifts to primary-fixed-dim (#dcd9d7) with a 150ms ease-out transition. Secondary buttons use a white background (#f7f7f4) with a 1px outline (#d9d7d5) and dark text (#1e1e1e); on hover, the background becomes surface-container (#e8e5e3) and the outline darkens to on-surface-variant (#747372). Ghost buttons have transparent backgrounds with dark text; on hover, they gain a subtle background (rgba(71, 68, 64, 0.04)) and the text color shifts to primary (#474440). All buttons use Hedvig Letters Sans at 14px, 400 weight, with

Do's and Don'ts

**Do**

• Do use primary (#474440) exclusively for CTAs and active states—never for backgrounds or body text, as it reduces contrast and readability.
• Do apply the 4px baseline grid consistently: all spacing, padding, and margins should be multiples of 4px (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100px) to maintain visual rhythm.
• Do use Diatype for headlines (display, headline-lg, headline-md) and Inter for body text and UI labels—never reverse these pairings, as it breaks the visual hierarchy.
• Do include explicit line-height values in px (not unitless) for all typography to ensure consistent vertical rhythm and accessibility.
• Do apply shadow transitions (200ms ease-out) on card hover to create responsive feedback without jarring jumps.
• Do use the full color token system (surface-container-lowest through surface-container-highest) to create depth without relying on opacity alone.

**Don't**

• Don't use secondary (#d85210) or tertiary (#646e39) as primary action colors—reserve them for warnings, success states, and supporting accents only.
• Don't apply border-radius values outside the defined scale (sm: 4px, md: 8px, lg: 12px, xl: 100px, full: 9999px); custom radii break the geometric language.
• Don't mix font families within a single component (e.g., Diatype for a headline and Inter for the subheading in the same card)—use consistent pairings.
• Don't use hard shadows (box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)) or pure black (#000000) in shadows; use inverse-surface (#1a1716) at low opacity (0.06–0.15) to maintain warmth.
• Don't apply padding inside card elements; use 0px padding on the card itself and apply padding to child elements (headings, text, buttons) for layout flexibility.
• Don't use opacity-based color variations (e.g., rgba(71, 68, 64, 0.5)) for interactive states—use the defined color tokens (primary-fixed-dim, surface-container-high) instead to ensure consistent contrast.