skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-runwayml

Apply Runway's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#design tokens#ui design#runway#dark theme#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-runwayml-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-runwayml
Source: https://github.com/deepparser/skills/tree/main/design-runwayml
Command: npx skills add https://github.com/deepparser/skills --skill design-runwayml-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Runway's cinematic, editorial visual identity requires exact design tokens—colors, typography, spacing, and component rules—that are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Reference: Provides Runway's full color palette (Runway Black #000000, Cool Slate #767d88, Dark Surface #1a1a1a), typography scale (48px display to 11px micro labels), spacing system, and border-radius rules. - Light and Dark Theme Previews: Bundled HTML preview files demonstrate the design system implemented in both themes for visual verification of CSS values and component structure. - Component Guidance: Covers cinematic heroes, research article cards, trust bars, navigation, and mission statement sections with do's and don'ts for authentic implementation. - Use Case: When asked to build a landing page styled like Runway, the skill supplies exact hex values, the single-typeface abcNormal hierarchy with tight line-heights and negative letter-spacing, and the zero-shadow depth philosophy. ## Quick Start Create a landing page for my AI video product using the Runway design system with a dark cinematic hero and editorial image grid.

Frequently Asked Questions about design-runwayml

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Runway's website?▼

Use the design tokens in this skill: Runway Black (#000000) backgrounds, Cool Slate (#767d88) secondary text, a single geometric sans-serif typeface, tight line-heights of 1.0 with negative letter-spacing, and zero box-shadows. Full-bleed cinematic imagery serves as the primary visual element.

What font does Runway's design system use?▼

Runway uses abcNormal, a custom geometric sans-serif, for every text role from 48px display headlines to 11px uppercase micro labels. For external implementations, Inter or DM Sans serve as close substitutes.

Does the Runway design system support both light and dark themes?▼

Yes, the skill includes preview.html for the light theme and preview-dark.html for the dark theme. Dark is Runway's native cinematic mode, while light sections use white or Cool Cloud (#e9ecf2) backgrounds with Charcoal text.

Why does Runway's design avoid shadows and gradients?▼

Runway uses zero shadows because depth comes from photographic lighting, section alternation, and overlay transparency rather than CSS box-shadow. Gradients exist only within photography; the interface itself stays intentionally colorless and invisible.

What border radius should Runway-style components use?▼

Use subtle radii only: 4px for buttons, 6px for links, 8px for cards and images, and 16px for alert-style containers. The design is never pill-shaped or fully circular.

Related Skills

Explore More Design & Creative Skills→
openvettaopenvetta
154

create-content-campaign

Plans and orchestrates multi-asset image and video content campaigns through staged generation gates.

Official
Advanced
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
mattmacleod16-svgmattmacleod16-svg
1

figma-implement-design

Translate Figma designs into UI code with design tokens.

Community
Advanced