Devin

Overview

Devin is a technical-first AI software engineer platform designed for engineering teams who demand precision, speed, and reliability. The design system embodies 'Minimalist Functionalism'—a philosophy that strips away decorative elements to expose pure utility and clarity. Every pixel serves the developer's workflow: the interface disappears, leaving only the code and results. The brand personality is direct, confident, and unadorned; it speaks in concrete terms (not marketing abstractions) and prioritizes information density over whitespace. The emotional response is one of capability and trust—users feel they're working with a sophisticated tool built by engineers, for engineers. Example voice: 'Devin handles the subtasks in parallel while you focus on architecture.'

Colors

The color palette centers on a vivid electric blue primary (#2200ff) that commands attention on CTAs and interactive elements without aggression. This primary is paired with a light, almost-white surface (#f7f6f5) that provides maximum contrast for code readability and reduces cognitive load. Secondary accents—cyan (#39bdd6) and teal (#3bd4cb)—are used sparingly for status indicators, success states, and supporting UI elements. The error color (#ff1a1a) is a sharp red reserved for destructive actions and critical alerts. The surface stack progresses from #efefef (container-lowest, used for cards and panels) through #e4ecf4 (container, for subtle backgrounds) to #cdd3e1 (container-highest, for elevated modals). On-surface text is a near-black (#191919) for maximum legibility. The outline co

Typography

The type system uses NB International Pro as the primary typeface—a geometric sans-serif that conveys technical precision without coldness. Display text (68px, 500 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention through scale rather than decoration. Headline-lg (40px, 500 weight) is used for section titles and prominent CTAs. Body text (16px, 400 weight, 24px line-height) is set with generous leading to ensure readability in dense documentation and UI copy. Monospace (Geist Mono) is used exclusively for code snippets, labels, and technical metadata—never for body copy. All headlines use negative letter-spacing (-0.02em to -0.04em) to tighten the visual weight and create a sense of forward momentum. Labels and badges use a 12px m

Layout

The layout uses a 12-column grid with a max-width of 1200px, maintaining a 20px gutter between columns and 20px container padding on mobile (scaling to 3vw on desktop). The grid is fluid, not fixed—columns scale proportionally as the viewport changes. Section spacing follows a semantic rhythm: major sections are separated by 64px (lg spacing), subsections by 40px (md spacing), and inline elements by 12px (sm spacing). The hero section occupies the full viewport height on desktop, with the primary CTA positioned in the lower third to encourage scrolling. Cards and containers use 24px internal padding (md spacing) with 16px border-radius for a slightly softer appearance that still feels technical. White-space is used strategically to reduce cognitive load: dense information blocks are separa

Elevation & Depth

Depth is achieved through subtle shadow layering and strategic use of background colors rather than dramatic drop shadows. Level 1 (Base): the page background (#f7f6f5) with no shadow. Level 2 (Standard Cards): background #efefef with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the base. Level 3 (Elevated/Modals): background #e4ecf4 with box-shadow 0 8px 24px rgba(0, 0, 0, 0.1), providing clear visual hierarchy. Interactive elements (buttons, inputs) use no shadow by default but gain a 2px focus ring at rgba(34, 0, 255, 0.1) on keyboard focus. Hover states on card

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are used to humanize the interface without sacrificing precision. Buttons use full-radius (9999px) for a friendly, approachable feel that contrasts with the sharp typography. Cards and containers use 16px (1rem) border-radius, a middle ground that feels modern without being trendy. Input fields use 8px (0.5rem) for a more structured appearance. Badges and small UI elements use full-radius (9999px) to create visual distinction. The bento grid items use 12px (0.75rem) to maintain consistency with the dark theme. All radius values are a

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses #2200ff background, white text, full-radius (9999px), 12px vertical padding, and 24px horizontal padding, resulting in a 44px height. On hover, the background transitions to #4991e5 (inverse-primary) over 200ms with ease-out timing. The secondary button has a transparent background with a 1px solid border in #191919, same padding, and transitions the background to #daa2fd (surface-container-high) on hover. Both buttons use label-md typography (14px, 500 weight). The hero CTA ('Try Devin') is the primary button style but rendered at 12px font-size with 5px vertical / 10px horizontal padding (44px height maintained) to fit the compact header layout.

Containers & Surfaces Cards use #efefef backgrou

Do's and Don'ts

**Do**

• Do use the primary blue (#2200ff) exclusively for interactive elements, focus states, and CTAs—never for decorative accents or backgrounds.
• Do maintain 24px padding inside cards and containers; this is the visual rhythm that makes the interface feel spacious without being wasteful.
• Do apply the full-radius (9999px) to all primary buttons; it signals approachability and is instantly recognizable as clickable.
• Do use NB International Pro for all UI copy and headlines; switching typefaces breaks the technical aesthetic.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all headlines; this tightens the visual weight and creates forward momentum.
• Do use box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards and 0 8px 24px rgba(0, 0, 0, 0.1) for elevated modals—never invent new shadow values.

**Don't**

• Don't use the secondary cyan (#39bdd6) or teal (#3bd4cb) for primary CTAs; they are supporting accents only.
• Don't add shadows to buttons or interactive elements; use the focus ring (2px rgba(34, 0, 255, 0.1)) for keyboard navigation instead.
• Don't exceed 80 characters per line of body text; the 1200px container max-width enforces this, but never override it for 'more content'.
• Don't mix border-radius values on similar components (e.g., 12px on one card and 16px on another); consistency is precision.
• Don't use system fonts or generic sans-serif fallbacks in the UI; NB International Pro is loaded via @font-face and must render.
• Don't remove or hide focus indicators for keyboard users; the 2px blue glow is the only visual feedback for non-mouse navigation.