Railway

The design system feels like a tranquil night journey on a futuristic train. It operates in a deep, near-black space (#13111c), punctuated by a single, focused accent of cosmic lilac (#553f83) for primary actions, creating a calm yet confident mood. Large, elegant serif headlines (IBM Plex Serif) provide a literary, almost classic authority that contrasts with the clean, utilitarian sans-serif (Inter) used for the UI. Elevation is achieved through subtle surface shifts and fine borders (#33323e) rather than shadows, reinforcing a flat, technical aesthetic. The signature element is the painterly, atmospheric hero illustration, which establishes a peaceful, imaginative tone that subverts typical dev-tool intensity. Use IBM Plex Serif exclusively for display-level headlines to create a sophisticated, literary feel. Rely on surface color shifts (Deep Space page, Surface cards) and 1px Crater borders for elevation. Reserve the Cosmic Lilac color for primary, high-value calls to action. Incorporate the atmospheric, painterly illustration style for hero sections to set the mood. Maintain generous vertical spacing (96px+) between content sections for a calm, spacious rhythm. Use a subtle grid pattern on the background of key container cards like testimonials. Ensure all interactive elements have a clear focus state, typically using Supernova (#a05fcf) as a highlight border or ring. Don't use traditional box-shadows. The system's depth comes from color and borders. Don't use serif fonts for body copy, buttons, or any UI controls. Don't use the brand purples for large blocks of text. Don't make layouts feel dense or rushed. Prioritize breathing room. Don't use bright, saturated colors outside the defined purple accent and semantic palette. Don't use photography, especially lifestyle photos. The visual language is illustrative and product-focused. Don't create buttons or cards with sharp corners; use the established 8px and 12px radii.