Caseware

Overview

Caseware is a B2B SaaS platform for audit, financial reporting, and AI-driven data analysis, serving global accounting and audit professionals. The design system embodies 'Tech-Forward Minimalism'—a fusion of bold, saturated accent colors (electric blue #1c4dff, vibrant pink #e956af) against a clean, neutral canvas (cream #e5e3da, near-black #1a1b1d). The aesthetic conveys precision, trustworthiness, and cutting-edge intelligence: every interface element is purposeful, every color choice deliberate. The UI evokes a sense of professional confidence and technological sophistication, transforming complex audit workflows into intuitive, visually engaging experiences.

The brand voice is authoritative yet approachable, speaking directly to audit leaders and financial professionals. Vocabulary emphasizes embedded intelligence, workflow integration, and governance-driven outcomes. Tone: confident, clear, never patronizing. Example sentence: 'KI, die fest in Ihre Prozesse eingebunden ist – statt isoliert daneben zu arbeiten' (AI embedded in your processes, not working in isolation).

Colors

The color system is built on a high-contrast, accent-driven philosophy. Primary (#1c4dff) is the signature brand blue—used exclusively for primary CTAs, active states, and key interactive elements. It commands attention on light backgrounds and maintains legibility at 12px font sizes. Secondary (#e956af) is a vibrant magenta supporting accent, deployed for highlights, status indicators, and secondary CTAs. Tertiary (#2e9bff) is a lighter, cooler blue reserved for links and tertiary actions. The neutral stack (surface #ffffff, surface-dim #f6f5f2, on-surface #1a1b1d) provides the foundational canvas; on-surface-variant (#4e4b66) is used for secondary text and disabled states. Error (#ff645c) is a warm coral for validation and alerts, with on-error (#ffffff) ensuring WCAG AA contrast. Focus

Typography

League Spartan is the sole typeface family, paired with Arial and sans-serif fallbacks for maximum compatibility. The type system follows a strict hierarchy: display (55px, 400 weight) anchors hero sections and major announcements; headline-lg (40px, 600 weight) introduces key sections; headline-md (28px, 600 weight) subsections; title-lg (20px, 600 weight) card titles and form labels; body-lg (18px, 400 weight) long-form content; body-md (16px, 300 weight) default body text and UI labels; label-md (14px, 500 weight) button text and small UI elements; label-sm (12px, 500 weight) helper text and metadata. Letter-spacing is minimal (0em to 0.05em) to maintain density and professionalism. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibil

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid design on mobile and tablet. Container widths vary by context (845px for modals, 991px for content sections, 1026px for full-width layouts), but all respect the 1280px ceiling. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, xl (64px) for hero and footer spacing. The gutter (24px) is applied consistently to left/right margins on all container-level elements. White-space is generous but purposeful: sections are separated by lg spacing (40px) to create visual breathing room, while related elements within a card use sm spacing (12px). The design favors left-aligned tex

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding heavy drop-shadows that would undermine the clean aesthetic. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders in outline-variant (#d0d5d2) for definition. Level 2 (Standard Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: surface-container-lowest (#f4f4f4). Level 3 (Modals/Elevated Surfaces): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background: surface (#ffffff). Focus states layer a 2px outline in primary (#1c4dff) with a 6px offset and an inset box-sh

Shapes

The shape philosophy is 'Precision-Driven Geometry'—sharp, intentional corners that reflect the technical nature of audit software, tempered with subtle rounding for approachability. Buttons use lg radius (1rem / 16px) for primary CTAs, creating a modern, pill-like appearance; secondary buttons use DEFAULT radius (0.5rem / 8px) for a more structured feel. Cards and modals use xl radius (1.5rem / 24px) to soften the interface and create visual hierarchy. Input fields use DEFAULT radius (0.5rem / 8px) for consistency with form design patterns. Badges and status indicators use full radius (9999px

Components

Action Elements Primary buttons (button-primary) use backgroundColor: {colors.primary} (#1c4dff), textColor: {colors.on-primary} (#ffffff), padding: 9.6px 18px, height: 40px, rounded: {rounded.lg} (1rem), and typography: {typography.label-md} (14px, 500 weight). On hover, transition to backgroundColor: {colors.primary-fixed-dim} (#0056a7) over 200ms ease-in-out. Focus states apply outline: 2px solid {colors.primary} with outlineOffset: 2px and boxShadow: 0 0 0 6px rgba(28, 77, 255, 0.1). Secondary buttons (button-secondary) are transparent with a 2px border in primary, padding: 8px 16px, and rounded: {rounded.DEFAULT} (0.5rem); on hover, backgroundColor transitions to {colors.surface-container-high} (#d0d5d2). All buttons must have a minimum touch target of 44px × 44px and support keyb

Do's and Don'ts

**Do**

• Do use primary (#1c4dff) exclusively for primary CTAs, active states, and key interactive elements—never for backgrounds or secondary UI.
• Do maintain minimum 3:1 contrast ratios between text and background; test all color combinations with WCAG AA standards.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes; avoid instant color shifts.
• Do use League Spartan at 400 weight for body text and 600 weight for headlines; never mix weights within a single text block.
• Do respect the 24px gutter on all container-level elements and use lg (40px) spacing to separate major sections.
• Do apply focus rings (2px outline + 6px offset) to all interactive elements; never remove focus indicators.
• Do use the full rounded scale (sm/DEFAULT/md/lg/xl/full) consistently: lg for primary buttons, xl for cards, DEFAULT for inputs.

**Don't**

• Don't use secondary (#e956af) or tertiary (#2e9bff) as primary CTAs; reserve them for supporting accents and status indicators.
• Don't apply shadows heavier than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)); excessive shadows undermine the clean aesthetic.
• Don't mix typefaces; League Spartan is the sole family. Arial and sans-serif are fallbacks only.
• Don't set line-height below 1.5x font size; dense line-height reduces readability in audit-heavy interfaces.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); arbitrary radii fragment the design system.
• Don't apply color changes without transitions; all interactive state changes must animate over 150–200ms.
• Don't reduce focus indicator visibility for aesthetic reasons; focus rings are non-negotiable for accessibility and keyboard navigation.