Rasa

Overview

Rasa is the developer platform for enterprise AI agents, built for organizations that demand control, reliability, and transparency in conversational AI. The brand embodies 'Technical Minimalism'—a design philosophy that strips away visual noise to expose the precision and power underneath. The aesthetic is clean, purposeful, and unapologetically modern: a white canvas punctuated by a vivid electric purple (#5a17ee) that signals agency, intelligence, and trustworthiness. The UI evokes calm competence—the feeling of handing over a critical business process to software you can actually understand and debug. Voice: direct, precise, never marketing-speak. Example: 'Your agents run on your logic, not black boxes.'

Colors

The color system is anchored in a high-contrast, light-first palette designed for clarity and accessibility in enterprise environments. Primary (#5a17ee) is the electric purple accent used exclusively on CTAs, focus states, and brand-critical interactive elements—it commands attention without aggression. Secondary (#303645) is a near-black neutral used for body text and structural elements, ensuring 7:1+ WCAG contrast on white. Tertiary (#6d708b) is a muted slate for secondary labels and disabled states. The surface stack progresses from pure white (#ffffff) through cool grays (surface-container-low #f0f4f7, surface-container #e9eff4, surface-container-high #dee4e9) to support layered depth without shadows alone. Outline (#77819a) and outline-variant (#9ca5be) are used for borders and divi

Typography

The type system uses two custom typefaces: Sohne Kraftig (weight 500) for all headings and labels, and Sohne Buch (weight 400) for body text. This pairing creates a clear visual hierarchy without relying on weight extremes—Kraftig's geometric precision signals authority, while Buch's open letterforms ensure readability at small sizes. Display (60px, -0.02em tracking) anchors hero sections; headline-lg (48px) and headline-md (32px) structure page sections; title-lg (24px) labels card headers; body-lg (18px) and body-md (16px) carry primary and secondary content; label-md (14px, 0.01em tracking) and label-sm (12px, 0.02em tracking) handle UI labels and metadata. On small labels over busy backgrounds (e.g., badges over gradient hero), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure

Layout

The layout uses a 12-column grid with a max-width of 1440px, centered with auto margins. Gutters are 24px on desktop, collapsing to 16px on tablet and 12px on mobile. The spacing scale is semantic: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White-space is generous—sections are separated by lg (40px) minimum, and cards within sections use md (24px) padding to create breathing room. Container queries are not used; instead, breakpoints at 1440px, 991px, and 479px manage responsive reflow. The hero section spans full-width with a soft gradient background (orange to purple, rgba-based, no hard stops), while content sections use

Elevation & Depth

Depth is achieved through a three-tier shadow system and subtle background color shifts, avoiding heavy drop-shadows that would feel dated. Level 1 (Base): white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Raised Cards): 1px border in outline-variant (#9ca5be) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for interactive cards and modals. Level 3 (Floating/Modals): box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) + 1px border in outline-variant, used for overlays and preference panels. Hover states transition cards from Level 1 to Level 2 over 200ms (transition: a

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and intentionally to soften hard edges without compromising the technical aesthetic. Buttons use full radius (9999px) to signal primary actions and create a pill-shaped affordance that feels modern and approachable. Cards and input fields use md (0.75rem / 12px) for a subtle roundness that softens the grid without introducing visual chaos. Modals and preference panels use DEFAULT (0.5rem / 8px) for a more restrained, professional appearance. Checkboxes and small UI elements use sm (0.25rem / 4px) to maintain crisp

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background: {colors.primary} (#5a17ee), color: {colors.on-primary} (white), padding: 12px 32px, height: 48px, rounded: full (9999px), and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shifts to #4a0fcc (a darker purple) over 200ms. On focus, add outline: 0.125rem solid {colors.primary} with outline-offset: 0.125rem. Secondary buttons are transparent with a 1px border in primary and text in primary; on hover, the background becomes {colors.primary-container} (#eff1ff) without changing the border. Both button variants use {typography.label-md} (Sohne Kraftig, 14px, 500 weight, 0.01em tracking) for crisp, scannable labels.

Containers & Surfaces Cards are the primary container fo

Do's and Don'ts

**Do**

• Do use primary (#5a17ee) exclusively for CTAs, focus states, and brand-critical interactions—never for backgrounds or large surface areas.
• Do maintain 24px gutters between sections and 12px padding within cards to preserve the generous white-space aesthetic.
• Do apply the full-radius (9999px) pill shape only to primary buttons and badges; use md (12px) for cards and DEFAULT (8px) for inputs.
• Do use Sohne Kraftig for all headings and labels to signal hierarchy; reserve Sohne Buch for body text to maximize readability.
• Do test all interactive elements with keyboard navigation and screen readers; focus outlines must be 0.125rem solid primary with 0.125rem offset.

**Don't**

• Don't use secondary (#303645) or tertiary (#6d708b) as primary accent colors—they are structural neutrals, not brand signals.
• Don't apply shadows heavier than 0 10px 40px rgba(0, 0, 0, 0.15); the design relies on color and borders, not depth blur.
• Don't round corners beyond md (12px) on cards or lg (16px) on modals—excessive rounding undermines the technical, precise aesthetic.
• Don't mix Sohne Kraftig and Sohne Buch weights arbitrarily; use 500 weight for Kraftig headings and 400 weight for Buch body to maintain clarity.