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

design-uber

Apply Uber's design system tokens, typography, and components when generating UI.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Uber's distinctive black-and-white visual identity in UI work requires knowing exact color values, typography scales, pill-shaped component specs, and shadow treatments, which are tedious to research and easy to get wrong. ## Core Features & Use Cases - Complete Design Tokens: Provides exact color palette (#000000, #ffffff, #efefef, #4b4b4b), typography hierarchy (UberMove/UberMoveText, 12px-52px scale), spacing grid, and border-radius rules. - Component Specifications: Defines pill-shaped buttons (999px radius), chip navigation, cards with whisper-soft shadows, form inputs, and dark footer patterns with hover and focus states. - Light and Dark Previews: Bundled HTML preview files show the full design system implemented in both themes for visual verification. - Use Case: When asked to build a ride-booking landing page or a delivery app interface styled like Uber, use this Skill to generate UI with the correct monochrome palette, pill buttons, and compact information-dense layout. ## Quick Start Create a landing page for a ride-sharing app using Uber's design system with a black pill CTA button and a split hero layout.

Frequently Asked Questions about design-uber

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

FAQPage Schema
How do I make a UI look like Uber's design?▼

Use a strict black (#000000) and white (#ffffff) palette, pill-shaped buttons with 999px border-radius, bold geometric sans-serif headings at 700 weight, and whisper-soft shadows at 0.12-0.16 opacity. Keep layouts compact and information-dense.

What font does Uber use and what can I substitute?▼

Uber uses the proprietary UberMove for headings and UberMoveText for body and UI. Since these are not publicly available, use system-ui, Inter, or DM Sans as close geometric sans-serif substitutes.

Does the Uber design system support dark mode?▼

Yes, the skill includes a dark theme preview (preview-dark.html) that inverts the palette to a black page background with white text and adjusted gray tokens for secondary text and borders.

Can I use colors or gradients in an Uber-styled interface?▼

No. Uber's UI chrome is strictly black, white, and neutral grays with no gradients anywhere. Color appears only inside warm, human-centric illustrations, never in interface surfaces.

What border radius should Uber-style buttons use?▼

All buttons, chips, and navigation pills use a full 999px border-radius. Content cards use 8px, featured containers use 12px, and avatars or circular controls use 50%.

Related Skills

Explore More Design & Creative Skills→
truongnattruongnat

ux-wireframe

Generates ASCII wireframes, HTML prototypes, and Figma handoff briefs for screen design.

Community
Intermediate
SourceLinSourceLin
9

frontend-platform-dev

Develop Vue3 frontend features for Sourcelin Blog pages, components, APIs, routing, and state management.

Community
Advanced
get-convexget-convex
9

adapt

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

Official
Advanced
hungthinh04hungthinh04

popular-web-designs

Generate brand-accurate HTML and CSS web designs from real-world design systems.

Community
Advanced