Claudia

Overview

Claudia is a financial governance protocol for autonomous agents, enabling delegated action with human-controlled limits and signature requirements. The design aesthetic is 'Institutional Minimalism'—a refined, document-like interface that evokes trust, precision, and legal authority. The visual language combines warm, earthy neutrals (cream, sand, warm grey) with a deep maritime blue accent, creating an atmosphere of professional oversight and calm deliberation. The brand personality is methodical and transparent: every action is traceable, every decision is auditable, and the interface never obscures the flow of authority. Voice: precise, formal, never rushed. Example sentence: 'The agent escalates three frivolous invoices and loses a 5 ADA bond each time.'

Colors

The color system is anchored in a warm, paper-like palette that communicates institutional trust and document authenticity. Primary (#185079, a deep maritime blue) is reserved for interactive elements—buttons, links, and active states—and appears sparingly to draw attention to critical actions like 'Watch it act' and 'Read the protocol.' Secondary (#8c6420, a warm cognac brown) is used for escalation states and secondary emphasis, evoking the warmth of legal seals and authority. Tertiary (#237a5e, a muted forest green) signals approval and permit states. Error (#b3463a, a muted rust red) indicates denial and forbidden actions. The surface stack progresses from #fbf6f1 (base cream) through #f1e9e0 (paper-2) to #ece3d9 (slab), creating subtle depth without harsh contrast. On-surface text is

Typography

The type system pairs Newsreader (a high-contrast serif with generous spacing) for display and headlines with Schibsted Grotesk (a geometric sans-serif) for body and interface text. This pairing communicates both authority (serif headlines) and modern efficiency (sans-serif UI). Display text (96px, 400 weight, -0.02em tracking) is used sparingly for the hero thesis—'Give your agents an allowance, not your keys'—and sets a formal, almost legal tone. Headline-lg (48px) and headline-md (32px) maintain the serif voice for section titles. Body text (16px, 400 weight) is set in Schibsted Grotesk at 24px line-height for comfortable reading. Labels and UI text use weights from 600 to 800 (label-md: 15px/600, label-sm: 13px/700, label-xs: 11px/600) to create visual hierarchy in dense information la

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px, maintaining generous margins (24px gutter on desktop, 12px on mobile) to preserve the document-like, spacious aesthetic. The hero section occupies the full viewport height with 40px (lg spacing) separating the headline from the subheading, and 24px (md spacing) between the subheading and CTAs. Sections are separated by 64px (xl spacing) vertical rhythm, creating a deliberate, measured pace. Cards and metric displays use 24px (md spacing) internal padding and 12px (sm spacing) for compact lists. The 'Authority Floor' visualization section uses a 2-column layout on desktop (order-2 and order-3 utilities) and stacks on mobile. Container max-width is 1280px, but content typically constrains to 960px for readability. White-space

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): the warm cream background (#fbf6f1) with no shadow. Level 2 (Standard Cards): 1px solid border at #e3dcd3 (outline-variant) with box-shadow: 0 4px 14px rgba(24, 80, 121, 0.1), creating a soft, diffused shadow that suggests the card is slightly raised. Level 3 (Elevated/Modals): box-shadow: 0 8px 30px rgba(24, 80, 121, 0.1), a larger spread shadow that increases perceived distance. Glass panels use backdrop-filter: blur(8px) with background: rgba(255, 255, 255, 0.74) and a 1px border at

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used judiciously to soften institutional rigidity without introducing playfulness. Buttons use 8px (DEFAULT radius) for a slightly rounded, professional appearance. Cards and metric displays use 8px radius. Input fields use 8px radius. Secondary buttons and pills use 9999px (full radius) for a capsule shape, creating visual distinction from primary buttons. Step indicators and badges use 9999px (full radius) for a circular or pill appearance. The 3D floor visualization uses sharp corners (0px) to maintain technical authentic

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #185079 background, #fbf6f1 text, 800 font-weight, 8px radius, and 12px 20px padding, creating a bold, authoritative call-to-action. Hover state (button-primary-hover) darkens to #0f4a7a. Active state (button-primary-active) further darkens to #0f2f49. Secondary buttons (button-secondary) use transparent background with a 1px border at #8a9aaa, full radius (9999px), and 4px 12px padding, creating a pill-shaped outline button. Hover state shifts background to surface-container-high (#ece3d9). Links (link) use primary color (#185079) with underline and 4px text-decoration-offset, and darken to #0f4a7a on hover. All interactive elements use a 200ms transition (cubic-bezier(0.2, 0.8, 0.2, 1)

Do's and Don'ts

**Do**

• Do use primary (#185079) exclusively for critical CTAs and active states—never for backgrounds or secondary UI.
• Do maintain the warm cream background (#fbf6f1) as the dominant visual anchor; never replace it with white or grey.
• Do pair Newsreader serif headlines with Schibsted Grotesk body text to communicate both authority and modernity.
• Do use 24px (md spacing) as the default padding for cards and containers; use 12px (sm spacing) only for compact lists.
• Do apply subtle shadows (0 4px 14px rgba(24, 80, 121, 0.1)) to cards to suggest depth without drama.
• Do use 8px radius as the default border-radius; reserve 9999px (full radius) for secondary buttons and badges only.
• Do include 1px borders at #e3dcd3 (outline-variant) on all cards to define edges without harsh contrast.
• Do use the tertiary color (#237a5e) for permit/allow states and secondary (#8c6420) for escalation/cosign states.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; stick to the warm palette (#2a3f52 for text, #fbf6f1 for background).
• Don't apply shadows to metric cards or flat UI elements; reserve shadows for elevated cards and modals only.
• Don't use primary color (#185079) for body text, backgrounds, or non-interactive elements; it's reserved for CTAs and active states.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; use Newsreader for display/headlines and Schibsted Grotesk for UI/body.
• Don't use full radius (9999px) on primary buttons or cards; it's reserved for secondary buttons, pills, and badges.
• Don't apply animations or transitions longer than 200ms; keep interactions snappy and responsive.
• Don't use the error color (#b3463a) for warnings or secondary information; reserve it for deny/forbidden states only.
• Don't reduce padding below 12px (sm spacing) except in compact lists or micro-UI; maintain generous whitespace to preserve the document-like aesthetic.