Ditto

Overview

Ditto is a content operations platform designed for product teams who demand precision, consistency, and brand integrity across every customer touchpoint. The design language embodies "Architectural Minimalism"—a philosophy that treats typography and color as structural elements rather than decoration. The interface is deliberately monochromatic (warm whites, grays, and blacks) to establish clarity and focus, punctuated by a vivid yellow accent (#ffdd33) that commands attention on calls-to-action and key highlights. This restraint creates a professional, trustworthy aesthetic that mirrors the brand's core promise: structured, reliable content systems.

The voice is precise, direct, and human-centered. Ditto speaks to product managers, designers, and content strategists as peers—no jargon, no breathlessness, just clear guidance. Example sentence: "Assign copy to Dev Casto, and it ships with full context." The brand personality is confident without arrogance, technical without alienating non-engineers, and always focused on reducing friction in the content workflow.

Colors

The color system is built on a principle of "signal through restraint." The primary surface is a warm off-white (#f7f5f3) that reduces eye strain during long work sessions, paired with a deep charcoal on-surface text (#222222) for maximum legibility at 16px body size. The surface stack uses subtle increments (surface-container-low at #f0f0f0, surface-container at #e6e4de, surface-container-high at #dcd8cf) to create visual hierarchy without introducing new hues—each step is a 5–8% shift in luminance, allowing cards and containers to recede or advance based on interaction state.

Primary accent is a bold, saturated yellow (#ffdd33, RGB 255, 221, 51) used exclusively on primary CTAs ("Get a Demo", "Get Started"), focus states, and highlighted text passages. This color is intentionally warm a

Typography

The type system is anchored in ABC Social, a geometric sans-serif family that conveys modernity and precision. Display and headline levels (89.6px down to 40px) use the Extended variant for maximum impact in hero sections, with a consistent -0.02em to -0.01em negative letter-spacing to tighten the visual rhythm and reinforce the architectural aesthetic. Body text (18px and 16px) is set in the standard ABC Social at 400 weight with 1.5x line-height (28px for 18px body, 24px for 16px body) to ensure comfortable reading during extended work sessions. Labels and UI text use 700 weight at 14–16px to create clear visual hierarchy in buttons, badges, and form fields. All type is rendered with font-feature-settings: "ss07" 1 to activate stylistic alternates that enhance the brand's geometric chara

Layout

The layout system uses a 12-column grid with a max-width of 1160px, maintaining a fluid gutter of 24px on desktop and collapsing to 12px on tablet. The page rhythm is built on a 40px (lg) spacing unit for section separation, with 24px (md) used for component padding and 12px (sm) for internal element spacing. The hero section uses 100px vertical padding (top and bottom) to create breathing room around the headline and primary CTA, establishing a generous, confident tone. Container widths vary by section (1160px for full-width, 940px for content-heavy areas, 800px for modals and overlays) to create visual rhythm and prevent text from becoming uncomfortably wide. The design favors asymmetrical layouts—text often occupies 60–70% of the viewport width, with the remaining space left intentional

Elevation & Depth

Depth in Ditto is conveyed through subtle shadow and border treatments rather than dramatic layering. The elevation system uses three levels: (1) Base cards and containers receive a soft shadow of 0 1px 6px 0 rgba(0, 0, 0, 0.06) with a 1px border in surface-container-high (#dcd8cf), creating a barely-perceptible lift from the background. (2) Elevated containers (modals, popovers, expanded cards on hover) use 0 3px 8px rgba(0, 0, 0, 0.15) with the same border, creating a clear separation. (3) Top-level overlays (dropdowns, tooltips) use 0 2px 32px 0 rgba(0, 0, 0, 0.16), a larger blur radius tha

Shapes

The shape philosophy is "Geometric Warmth"—a balance between sharp architectural precision and human approachability. Buttons and primary interactive elements use a full-radius border-radius of 1000px (effectively a pill shape), creating a friendly, inviting appearance that contrasts with the austere typography. Cards and containers use 12px (0.75rem) border-radius, a subtle rounding that feels intentional without being playful. Input fields use 28px border-radius, a compromise between the pill-button aesthetic and the card radius, signaling that inputs are interactive but distinct from primar

Components

Action Elements Buttons are the primary interaction mechanism and use the full-radius pill shape (border-radius: 1000px) to signal approachability. Primary buttons ("Get a Demo", "Get Started") use the yellow accent (#ffdd33) background with black text (color: #000000), padding of 15px 24px, and a 48px height for comfortable touch targets. On hover, the background shifts to #e6c200 (primary-fixed-dim) with a 200ms ease-out transition. Secondary buttons use inverse-surface (#1a1a1a) with white text, same padding and height, and shift to #333333 on hover. Tertiary buttons are transparent with a 1px border in outline-variant (#b8b8b8) and on-surface text, filling with surface-container-high (#dcd8cf) on hover. All buttons include a subtle focus ring (0 0 0 3px rgba(255, 221, 51, 0.1)) for

Do's and Don'ts

**Do**

• Do use the yellow accent (#ffdd33) exclusively on primary CTAs and focus states—it is the brand's signal for action and must remain rare enough to command attention.
• Do maintain the warm off-white background (#f7f5f3) as the default surface; it reduces eye strain and reinforces the professional, trustworthy aesthetic.
• Do apply negative letter-spacing (-0.02em to -0.01em) on display and headline text to tighten the visual rhythm and reinforce the architectural aesthetic.
• Do use the full-radius pill shape (border-radius: 1000px) for primary buttons and interactive elements; it is the brand's most distinctive shape token.
• Do transition all hover and focus states over 200ms with ease-out timing to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use the yellow accent (#ffdd33) on secondary elements, backgrounds, or decorative elements—it must remain reserved for primary actions to maintain signal strength.
• Don't apply rounded corners smaller than 12px to cards or containers; the design favors geometric clarity over organic softness.
• Don't introduce new accent colors beyond yellow, blue, purple, and red; the palette is intentionally constrained to reinforce brand recognition.
• Don't use system fonts or generic sans-serifs; always specify ABC Social or ABC Social Extended to maintain the brand's geometric, modern character.
• Don't apply shadows larger than 32px blur radius or use multiple layered shadows; the design favors subtle, single-layer elevation to maintain clarity and restraint.