Render

Overview

Render is a cloud application platform designed for developers who value clarity, speed, and developer experience. The design system embodies 'Developer-Centric Minimalism'—a philosophy that strips away unnecessary visual noise while maintaining purposeful hierarchy through strategic use of accent colors. The interface prioritizes authentication flows and deployment workflows with a clean, light-dominant aesthetic punctuated by vibrant purple (#8a05ff) for primary actions and emerald green (#37cd8f) for success states. The brand personality is direct, technical, and approachable: it speaks to developers in their language without condescension, favoring precision over decoration. Example sentence: 'Deploy from Git in seconds—your app is live before you finish your coffee.'

Colors

The color system is built on a light, neutral foundation with three strategic accent roles. Primary (#8a05ff) is the signature brand purple used exclusively for call-to-action buttons, links, and focus states—it commands attention without aggression. Secondary (#37cd8f) is an emerald accent reserved for success confirmations, enabled toggles, and positive feedback. Tertiary (#af1d27) is a muted red for errors and destructive actions. The surface stack ranges from pure white (#ffffff) at the brightest level through carefully calibrated grays (#f5f5f5, #e3e3e3, #c7c7c7) to near-black (#1a1a1a) for primary text. On-surface text is #1a1a1a (98% black) for maximum readability at 16px body size; secondary text uses #4d4d4d (30% opacity black) for hierarchy. Outlines use #c7c7c7 for subtle border

Typography

The type system pairs Roobert (a geometric sans-serif from Pangram Foundry) for display and headline scales with 'Neue Montreal' for body and label scales, creating a two-tier hierarchy that signals importance without requiring weight changes alone. Display (56px, 700 weight, -0.02em tracking) is reserved for hero moments; Headline-lg (40px, 600 weight) anchors major sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry content with generous 28px and 24px line heights respectively, ensuring comfortable reading at arm's length. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are used for buttons, badges, and form labels with 0.01em–0.02em positive letter-spacing to maintain clarity at small sizes. All int

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered on the viewport with symmetric 24px gutters on desktop and 12px on mobile. The spacing scale is semantic: unit (8px) is the atomic increment; xs (4px) is used sparingly for micro-adjustments; sm (12px) separates inline elements; md (24px) is the default section and component padding; lg (40px) separates major sections; xl (64px) is reserved for hero spacing. Form fields and buttons use 44px height (12px vertical padding + 20px line-height) to meet touch targets. Cards use 24px padding with 1px borders at #c7c7c7. The page rhythm emphasizes breathing room: section separators use lg spacing (40px), while related content groups use md spacing (24px). Container max-width is 1280px; narrower breakpoints (768px,

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layering or blur. Level 1 (Base surface) has no shadow; Level 2 (Cards, input fields) uses a 1px solid border at #c7c7c7 with elevation.sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift. Level 3 (Modals, dropdowns) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) with a 1px border at #8a8a8a. Level 4 (Floating action, notifications) uses elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) with a 1px border at #8a8a8a. Hover states on cards transition to elevation.md over 200ms. Focus states add a 3px inset box-sha

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and purposeful, never organic. Buttons and inputs use 4px radius (sm) for a slightly softened edge that feels contemporary without sacrificing technical clarity. Cards and larger containers use 12px radius (lg) to provide visual breathing room. Badges and pills use full (9999px) radius only when circular or truly pill-shaped; otherwise, default to sm or md. The rationale: small radii (4–8px) feel engineered and trustworthy for a developer platform; larger radii (12px+) are reserved for container elements that need to fee

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use #8a05ff background, white text, 44px height, 12px vertical + 24px horizontal padding, 4px radius, 600 weight label-md typography. On hover, background shifts to #6b00cc with a 200ms ease-out transition; on active, it darkens to #48008c. Secondary buttons (button-secondary) use transparent background with a 1px #8a8a8a border, #8a05ff text, and the same padding/height; on hover, the background becomes #f0f0f0. OAuth buttons (GitHub, GitLab, Bitbucket, Google) use white background with a 1px #c7c7c7 border, #1a1a1a text, and 500 weight; on hover, background becomes #f5f5f5 and border becomes #8a8a8a. All buttons use cursor: pointer and transition: background-color 200ms ease-out.

Inputs

Do's and Don'ts

**Do**

• Do use primary purple (#8a05ff) exclusively for primary CTAs, focus states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain 44px minimum height for all clickable elements to meet touch targets and accessibility standards.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for a cohesive, responsive feel.
• Do use 4px border-radius on buttons and inputs, 12px on cards, and full (9999px) only on true pills—never mix radii arbitrarily.
• Do pair Roobert for headlines (40px+) with 'Neue Montreal' for body text to create clear visual hierarchy without relying solely on weight.
• Do use the full M3 surface stack (#ffffff → #f5f5f5 → #e3e3e3 → #c7c7c7) for layered containers and hover states.
• Do include a 3px box-shadow: 0 0 0 3px rgba(138, 5, 255, 0.1) on all focused interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use the primary purple (#8a05ff) for body text, backgrounds, or non-interactive elements—it's reserved for actions and brand moments.
• Don't create buttons shorter than 44px or narrower than 80px (including padding)—they become difficult to tap and fail accessibility.
• Don't apply instant state changes without transitions; always use transition: all 200ms ease-out or transition: background-color 200ms ease-out.
• Don't mix border-radius values within a single component family (e.g., 4px on one button and 8px on another)—consistency builds trust.
• Don't use system fonts (ui-sans-serif, system-ui) for headlines; always load Roobert or fall back to -apple-system, BlinkMacSystemFont for body.
• Don't exceed 1280px container width; content becomes hard to scan and loses the intended rhythm.
• Don't use shadows darker than rgba(0, 0, 0, 0.12) or blur effects—Render's aesthetic is clean and precise, not atmospheric.