Modal

Overview

Modal is a serverless compute platform engineered for AI infrastructure at scale. The design system embodies 'Developer-First Brutalism'—a movement that strips away unnecessary ornamentation in favor of raw computational clarity, using a high-contrast dark canvas (rgb(0, 0, 0)) paired with an electric lime-green accent (rgb(127, 238, 100)) that signals energy, speed, and technical precision. The brand personality is confident, direct, and unapologetically technical: it speaks to engineers who value performance metrics over marketing copy. The UI evokes the feeling of a command-line interface elevated to a modern web platform—minimal friction, maximum control. Example sentence in brand voice: 'Deploy GPU workloads in 200ms. No cold starts, no surprises.'

Colors

The color system is built on a pure-black foundation (surface: #000000) with a vibrant lime-green primary accent (primary: #7fee64, rgb(127, 238, 100)) that appears on all CTAs, active states, and brand-critical interactions. This green is not decorative—it is the visual manifestation of 'go,' 'live,' and 'compute.' Secondary greens (secondary: #80ee64, tertiary: #09af58) provide depth and status differentiation without diluting the primary's impact. The surface stack progresses from near-black (surface-container-lowest: #050505) through charcoal midtones (surface-container: #141414) to lighter grays (surface-container-highest: #2a2a2a), enabling subtle layering without abandoning the dark aesthetic. Text is rendered in a soft, high-contrast light green (on-surface: #ddffdcff, rgb(221, 255

Typography

The type system pairs two custom typefaces from Adobe Typekit: Degular (for headlines and display) and Degular Display (for hero-scale text), both loaded via @import url('https://use.typekit.net/jcd8ppx.css'). Degular's geometric, slightly condensed letterforms convey precision and modernity, while Degular Display adds weight and presence to hero sections. Body text uses Inter Variable (system fallback: ui-sans-serif, system-ui, sans-serif) at 16px / 500 weight with -0.02em letter-spacing to maintain readability at small sizes and reduce visual noise. Display-scale headlines (64px, font-weight: 400, line-height: 72px) use -0.02em tracking to tighten the letterforms and create visual impact. For small labels over busy backgrounds or data-dense tables, apply text-shadow: 0 2px 4px rgba(0, 0,

Layout

The page grid follows a 12-column fluid layout with a 1280px container max-width, centered on viewport. Horizontal rhythm is established via the spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) divides subsections and card groups, and sm (12px) provides breathing room within components. The gutter is fixed at 24px on desktop, collapsing to 12px on tablets and 8px on mobile. White space is aggressive and intentional—the dark background demands generous margins to prevent visual fatigue. Hero sections occupy 60–80% of viewport height, with text centered and CTAs positioned 24px below the headline. Cards are arranged in 2–4 column grids depending on content type, each with 24px internal padding and 16px gaps. The container-max-width of 1280px ensures

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of borders rather than heavy drop shadows. Level 1 (Base): the pure-black background (surface: #000000) with no shadow. Level 2 (Standard Cards): 1px solid border at outline-variant (#444444) + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) on hover. Level 3 (Modals/Elevated Surfaces): 1px solid border at outline (#6f6f6f) + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5). Interactive elements (buttons, links) use a subtle 0 4px 12px rgba(127, 238, 100, 0.25) shadow on hover to signal elevation without breaking the dark aesthetic. No

Shapes

The shape philosophy is 'Technical Precision with Approachability.' Buttons and primary CTAs use full-rounded corners (border-radius: 9999px) to soften the technical edge and signal friendliness, while secondary UI elements (cards, inputs, chips) use moderate radii (8px–12px) that balance geometric clarity with usability. Form inputs use 6px (DEFAULT) for a subtle, modern feel. The rationale: full-rounded buttons are the most clickable and forgiving shape for high-traffic CTAs, while moderate radii on containers maintain visual hierarchy without appearing overly playful. Avoid sharp corners (0

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the full-rounded shape (border-radius: 9999px), the lime-green background (rgb(127, 238, 100)), and black text (rgb(0, 0, 0)) with 12px vertical / 24px horizontal padding, resulting in a 44px height. On hover, the background shifts to the darker green (primary-container: #5ada60) and a subtle glow appears (box-shadow: 0 4px 12px rgba(127, 238, 100, 0.25)). Secondary buttons (button-secondary) are transparent with a 1px border (outline: #6f6f6f) and light-green text; on hover, the background fills with surface-container-high (#212121) to indicate interactivity. All buttons use label-md typography (14px, 500 weight) and transition all properties over 200ms ease-out.

Containers & Sur

Do's and Don'ts

**Do**

• Do use the primary green (#7fee64) exclusively for CTAs, active states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain high contrast: ensure all text meets WCAG AA (7:1) against its background, especially on dark surfaces.
• Do use full-rounded buttons (border-radius: 9999px) for primary CTAs and moderate radii (8–12px) for secondary containers.
• Do apply transitions over 150–200ms (ease-out) to all interactive state changes (hover, focus, active) for smooth, responsive feedback.
• Do use the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) consistently; never invent arbitrary margins.
• Do pair Degular Display for headlines and Degular for body text; fall back to Inter Variable for UI labels and small text.

**Don't**

• Don't use the primary green on non-interactive elements or backgrounds—it must remain reserved for actions and focus states.
• Don't apply heavy shadows (blur > 16px) or glassmorphism effects; the design prioritizes clarity and technical authenticity.
• Don't use sharp corners (0px border-radius) on buttons or cards; reserve sharp edges for data tables and code blocks only.
• Don't mix typefaces within a single headline or body paragraph; commit to Degular or Inter Variable per component.
• Don't reduce the on-surface text color (#ddffdcff) opacity below 70% for body text; maintain readability on dark backgrounds.
• Don't add decorative gradients or animations that distract from content; every motion must serve a functional purpose (feedback, navigation, state change).