Runway

Runway presents a sophisticated, high-contrast light interface built on a minimal palette of warm greys and off-whites, punctuated by a single vibrant amber for key calls to action. The aesthetic blends the precise utility of a spreadsheet with the approachable feel of a modern web application. Surfaces are predominantly flat, with subtle shadows on interactive elements, conveying lightweight utility. Typography is compact and precise, using a variable sans-serif font across a wide range of weights and sizes to establish clear hierarchy. Use Off-White (#f8f7f5) as the primary background for all page sections to maintain a bright, expansive canvas. Apply Ink (#261b07) for all primary text and critical UI borders to ensure high contrast and readability. Reserve Amber Action (#f9a600) strictly for filled primary calls-to-action, ensuring it is the sole vibrant interactive accent. Employ the Interphases Pro Variable font consistently across all text elements, leveraging its weights for hierarchy rather than introducing new typefaces. Maintain a compact density, utilizing 4px element gaps for most inline spacing and 56px for clear section breaks. Apply 12px border-radius for all major card components and 8px for buttons and interactive controls, balancing softness with precision. Utilize the defined box-shadows for cards to add subtle depth, avoiding overuse of strong, opaque shadows. Do not introduce new saturated colors for interactive elements; rely on Amber Action (#f9a600) or its outlined variant. Avoid using gradients on cards or buttons unless explicitly defined as part of the system; surfaces should remain mostly flat. Do not use dark backgrounds for page sections; the system is built around a light theme, with Pearl (#ffffff) and Off-White (#f8f7f5) surfaces. Refrain from altering the Interphases Pro Variable font's letter-spacing beyond the defined scale, as tracking is critical for its visual balance. Do not add additional border-radius values; stick to 12px for cards, 8px for buttons and interactive elements, and 6px for badges. Avoid excessive use of deep shadows or multiple shadow layers outside of the defined card and button styles; maintain a lightweight visual feel. Do not use bold or heavy weights for body text; reserve stronger weights for headings and key emphasis to preserve clarity in a compact layout.