Skip to content
Browse
Library

Modal. The vivid green is the only light source.

  • Developer tools
  • Dark theme
  • 16 colors
  • 2 typefaces

Modal operates as a phosphorescent terminal in a darkened server room: near-black canvas, phosphor-pale green type, and a single vivid lime accent that behaves like an LED status indicator. The design language is developer-native — monospaced code windows with traffic-light dots, isometric 3D icons rendered in the brand green, and generous negative space that lets one element per section glow. Typography is split between a custom display face (Goga) for headlines and a variable Inter for all UI chrome, both tuned with tight negative tracking. Color is rationed: most screens are achromatic, and the vivid lime green appears only on primary actions, the logo, 3D illustrations, and emphasis moments. Components are flat and borderless, relying on hairline green-tinted borders and backdrop blur rather than shadows for depth.

Visit modal.com
Screenshot of Modal
Captured from modal.com on October 11, 2026

Modal design system

Modal

Brand1

  • Primary brand accent — logo mark, hero CTA pill, tag fills, active states, illustration base color

Accent8

  • Primary text, heading color, icon strokes, filled button text — the dominant readable surface

  • Card surface tint on light sections, secondary text on dark, soft highlight wash

  • Body copy default — readable muted green-gray for paragraphs on dark canvas

  • Muted helper text, secondary descriptions, low-priority body content

  • Eyebrow labels, category tags above section headings

  • Lead paragraph text, hero subhead — the brightest muted green for lead copy

  • Inline link text, tertiary navigation links on dark

  • Small uppercase labels, micro-copy, footer text

Neutrals7

  • Page canvas, deepest background layer

  • Primary button fill, card surfaces on dark sections, base UI surface

  • Subtle warm-tinted dark accent for code-window inner panels

  • Elevated surfaces, nav background, subtly lighter than ground

  • Secondary hairline borders, separator strokes between dark bands

  • Secondary outlined action border, low-emphasis interactive hairline

  • Outlined/ghost action border, primary interactive hairline — muted green-tinted gray

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Void Black on Lime Pulse

14.32 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.