The visual approach
Modal's design system makes exactly one bold bet: a single neon green (#8FFF00) against pure black (#000000). There are no gradients, no illustration flourishes, no ambient shadows softening the edges. The background is #000000, surfaces lift to #1A1A1A, and borders sit at #333333. Text is either white (#FFFFFF) or mid-gray (#999999). That green is reserved for moments that demand attention—CTAs, active states, the occasional underline.
Typography leans on Inter across the board. The hero treatment weighs in at 80px and 700 weight, stepping down through 48px and 32px headings to 16px body text at regular weight. There's no secondary typeface competing for voice. Spacing follows an 8px base grid with common stops at 12, 16, 24, 32, 48, 64, and 96px. Border radius varies by component: 8px for buttons, 12px for cards, 9999px for pill-shaped elements.
Motion is nearly absent. The only captured effect is a scroll-reveal fade-in—opacity moving from 0 to 1 over 500ms with an ease-out curve. No spring physics, no staggered choreography, no hover microinteractions fighting for attention. The design assumes the content will carry the experience, not the transitions.
What works
The contrast ratio between #8FFF00 and #000000 is severe enough that interactive elements announce themselves before you consciously register them. In a developer product where speed matters—Modal is built for serverless AI workloads—that immediacy translates to perceived performance. You don't hunt for the action; the green finds you.
Limiting the palette to six colors forces discipline. When every component can only pull from black, near-black, white, gray, dark gray, and neon green, there's no room for decorative choices. The system becomes a constraint that accelerates decision-making. A button is either green or outlined. A card is either #1A1A1A or it sits on #000000. The options collapse, and the design moves faster.
Inter's ubiquity across the stack keeps the typographic voice consistent. The step from 80px hero down to 14px small text feels proportional because the same letterforms hold up at every size. The weight variation—700 for headings, 400 for body—does just enough work to establish hierarchy without introducing a second family that would fracture the tone.
The 8px grid keeps spacing predictable. When every gap is a multiple of eight, you stop second-guessing whether an element needs 18px or 20px of breathing room. The system snaps decisions into place. The border radius hierarchy—sharp corners would feel industrial, fully rounded would feel consumer—splits the difference. Buttons at 8px feel clickable but serious. Cards at 12px feel contained but not rigid. Pills at 9999px signal tags or status indicators without explanation.
What a builder can borrow
The single accent color is the easiest pattern to lift. Pick one saturated hue, reserve it exclusively for interactive elements, and let everything else fall back to neutrals. Modal proves you don't need a six-color palette of branded tints to build a coherent interface.
Using #000000 instead of #0A0A0A or #111111 is worth testing. Pure black maximizes contrast and makes the neon green feel more electric. If your product targets developers or technical users who expect dark mode by default, leaning into true black instead of simulated-dark-gray can sharpen the whole system.
An 8px base grid is a forcing function. It eliminates the marginal spacing decisions that slow down implementation. If your design tokens currently include 5px, 7px, 9px, and 11px, collapsing them into multiples of eight will make your components more composable.
Minimal motion is a legitimate stance. Modal's single scroll-reveal effect—500ms, ease-out, opacity only—does the work of signaling content entry without demanding engineering complexity. If your product prioritizes load speed and perceived performance, stripping out staggered animations and spring curves can make the interface feel faster, not cheaper.
Border radius as a component signal is underused. Differentiating buttons (8px), cards (12px), and pills (9999px) gives each element a recognizable silhouette without requiring color or iconography. It's a small detail that carries weight in a constrained system.