Ditto

Overview

Ditto is a compliance and sustainability copilot designed for mid-market enterprises navigating complex CSR frameworks (EcoVadis, CSRD, ISO 14001, CDP). The design language embraces "Optimistic Clarity"—a visual philosophy that combines bold, energetic primary colors (vivid yellow #ffe228 and electric blue #3a93ff) with a warm, accessible neutral palette (cream #eff2e5, navy #130e30) to make compliance feel achievable rather than burdensome. The interface celebrates evidence-gathering as a collaborative act between user and AI coach, using playful accent colors (magenta #e261e5, green #59e25d) to highlight framework-specific workflows. The emotional response is one of confidence and momentum: users feel guided, not overwhelmed.

The brand voice is conversational, precise, and encouraging—never jargon-heavy or patronizing. Ditto speaks to sustainability professionals as peers, using concrete language ('One evidence base for EcoVadis, CDP, VSME, ISO 14001, and your carbon footprint') and action-oriented framing ('So you stop answering the same questions twice'). The tone balances urgency (compliance deadlines matter) with optimism (you can do this with the right tools). Example sentence in Ditto's voice: 'Your coach spotted three quick wins in your scope—let's lock them in before the deadline.'

Colors

The color system is built on a foundation of warm, sophisticated neutrals anchored by a cream surface (#eff2e5) and deep navy text (#130e30), creating a calm, professional canvas. Primary yellow (#ffe228) is the signature accent—deployed on CTAs ('Let's talk', 'Book a demo'), hero backgrounds, and interactive highlights to signal action and momentum. It is never used for body text or passive surfaces; it commands attention. Secondary blue (#3a93ff) supports technical workflows and framework-specific sections (CDP, CSRD modules), while tertiary magenta (#e261e5) accents coaching moments and human-centric interactions. Error red (#c23604) is reserved for compliance warnings and deadline alerts, applied with restraint to avoid alarm fatigue. The surface stack progresses from #f9fbf2 (lowest,

Typography

The type system pairs Hedvig Letters Serif for headlines (display, headline-lg, headline-md at 60px, 48px, 36px respectively with -0.02em to -0.01em letter-spacing) with Inter for body and UI text, creating a sophisticated yet approachable hierarchy. Hedvig's high-contrast serifs convey authority and precision—essential for compliance messaging—while Inter's geometric clarity ensures readability in dense data tables and form fields. Headlines use 400 font-weight to maintain elegance; body text defaults to 400 (regular) for accessibility, with 600 weight reserved for labels, buttons, and emphasis. The label-md tier (14px, 600 weight, 0.01em tracking) is applied to all button text and form labels to ensure visual hierarchy and scanability. On small labels over busy backgrounds (e.g., framewo

Layout

The layout uses a 12-column grid with a max-width of 1344px, centered with auto margins. The page rhythm alternates between full-width hero sections (yellow background, 64px vertical padding) and contained content zones (40px lg spacing for section separation). The cream surface (#eff2e5) serves as the default background, with white (#ffffff) reserved for elevated cards and modals to create clear visual hierarchy. Horizontal gutters are 24px on desktop (clamp(24px, 3vw, 48px) for responsive scaling), collapsing to 12px on tablet and 8px on mobile. Container padding follows the spacing scale: 24px md for standard cards, 40px lg for section containers, 64px xl for hero sections. The grid is fluid on mobile (single column, 8px gutter) and expands to 2–3 columns on tablet, reaching full 12-col

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle border treatments rather than dramatic layering. Base surfaces (surface-container-lowest at #f9fbf2) have no shadow and sit flush with the background. Standard cards (surface-container at #eff2e5) receive a soft md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them 4–8px from the background. Elevated modals and coaching panels (surface-container-highest at #d9ddbc) use the lg shadow (0 14px 28px rgba(64, 58, 45, 0.16)) to create clear separation and focus. All cards are bordered with 1px solid at #d9ddbc (outline-variant) to defi

Shapes

The shape philosophy is 'Approachable Precision'—combining sharp, technical edges for data-heavy components with rounded, human-friendly corners for interactive elements. Buttons use full rounding (border-radius: 9999px, 48px height, 12px vertical padding) to feel inviting and clickable; this is the most rounded element in the system, signaling primary actions. Cards and coaching panels use xl rounding (24px, 1.5rem) to soften their presence and create visual breathing room. Input fields and form elements use DEFAULT rounding (8px, 0.5rem) to maintain a structured, technical feel appropriate f

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses full rounding (border-radius: 9999px), primary yellow background (#ffe228), navy text (#130e30), 12px vertical padding, and 24px horizontal padding for a 48px total height. Font-weight is 600 (label-md tier) to ensure prominence. On hover, the background shifts to primary-fixed-dim (#efd624) with a 200ms ease transition. On focus (keyboard navigation), apply a 3px outline at rgba(255, 226, 40, 0.12) with 2px offset. The button-secondary variant uses transparent background with a 2px border at primary yellow, same text color, and the same rounding. Secondary buttons are used for 'Log in' and tertiary actions; they inherit the 200ms hover transition to primary-container (#fef5cc). Both button v

Do's and Don'ts

**Do**

• Do use primary yellow (#ffe228) exclusively for CTAs, focus states, and hero sections—it is the brand's signature accent and loses impact if overused.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated surfaces to maintain consistent depth without visual chaos.
• Do pair Hedvig Letters Serif headlines with Inter body text; never reverse this pairing or use Hedvig for body copy, as it reduces readability.
• Do use the full 12-column grid with 24px gutters on desktop; never hardcode fixed widths that break the responsive rhythm.
• Do apply 200ms ease transitions to all hover states (buttons, cards, inputs) to create a cohesive, polished interaction feel.

**Don't**

• Don't use primary yellow (#ffe228) for body text, backgrounds of passive cards, or any element that doesn't signal action or urgency.
• Don't apply shadows larger than lg (0 14px 28px rgba(64, 58, 45, 0.16)) to any component; excessive shadow depth contradicts the clean, professional aesthetic.
• Don't mix rounded and sharp corners on the same component (e.g., a button with 24px radius on top and 0px on bottom); maintain consistency within each element type.
• Don't use colors outside the defined palette (primary, secondary, tertiary, error, surface stack) for UI elements; custom colors fragment the system.
• Don't set font-weight below 400 for any text; Hedvig and Inter both require minimum 400 weight for legibility, especially on the cream background.