Dark Ride

Dark Ride is a bold, black-dominant design system built for utility and motion. Rooted in the experience of urban transportation, it pairs unapologetic black canvases with crisp white text and strategic blue accents to create interfaces that are fast to scan and decisive to use. The aesthetic is premium yet functional — every element serves the journey from point A to point B with zero unnecessary decoration.

Primary#276EF1
Secondary#000000
Neutral#6B6B6B
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

micro/labelDM Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyDM Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subtitleDM Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

price/ETADM Sans · 20px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section titleDM Sans · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

hero promptDM Sans · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

splash/priceDM Sans · 52px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Dark Ride is a bold, black-dominant design system built for utility and motion. Rooted in the experience of urban transportation, it pairs unapologetic black canvases with crisp white text and strategic blue accents to create interfaces that are fast to scan and decisive to use. The aesthetic is premium yet functional — every element serves the journey from point A to point B with zero unnecessary decoration.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

defaultselected

Address Suggestions

default

Custom

default

checked

Default

default

Elevation & Depth

Bottom Sheet
Ride Option Card
Search Bar
Modal

Do's & Don'ts

Do

Use black (#000000) as the primary button color — it is the signature brand action color
Design for maps as the primary canvas; all UI floats over geographic context
Make all touch targets at least 48px for one-handed mobile use during rides
Use bold typography for prices and ETAs — these are the most critical information at a glance
Support both light and dark modes, but ensure the dark mode is true black (#000000) for OLED efficiency

Don't

Don't use blue (#276EF1) for primary CTAs; reserve it for links and selected states only
Clutter the map view; show minimal UI and reveal detail through progressive disclosure via bottom sheets
Use decorative elements or illustrations in the core booking flow; utility is the aesthetic
Use rounded corners beyond 8px on action components; the brand is geometric, not bubbly
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.1 KB
Downloads 49
Copies 6

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/dark-ride and implement it in my code

Don't have the MCP? Install it here