@dante · Media & Consumer
Uber-inspired super-app design system: a strict black-and-white duet, weight-700 UberMove display headlines, and a single signature 999px pill on every interactive element.
A transportation-and-delivery super-app rendered as a structural black-and-white duet. Black (#000000) is the sole conversion anchor — every CTA pill, every nav login button, every dark promo band, the footer fill — while white (#ffffff) carries everything else. There is no third color, no accent palette, no atmospheric backdrop. Decoration comes exclusively from editorial 4:3 illustrations of riders, drivers, and city objects, plus a signature alternating-band rhythm where white feature cards give way to black promo callouts mid-page. The result reads as engineering-grade restraint: the brand signals its scale by refusing to shout.
The palette is grayscale plus ink. Black #000000 is the only conversion color and never gains a secondary accent. Text steps down through Ink #000000, Body #5e5e5e, Hairline Mid #4b4b4b, and Mute #afafaf. Surfaces run White #ffffff, Canvas Soft #efefef (chips, form rows, subtle pills), and Canvas Softer #f3f3f3 (nested inputs); Surface Pressed #e2e2e2 is the pressed state and Black Elevated #282828 the hover on dark controls. The system keeps no error/success/warning palette — the one chromatic exception is browser-default link blue #0000ee, used only for inline links in legal and footer fine print.
Two custom faces carry every page and never cross roles. UberMove at weight 700 sets all display headlines from 52px hero to 20px sub-card, with tight 1.22–1.25 leading and zero letter-spacing. UberMoveText at weights 400/500 handles body, button, link, and small headings from 12–18px. Headlines are always sentence-case; uppercase is reserved for rare eyebrow tags. Button labels stay at weight 500 — never promoted to 700. Open-source substitutes: Inter 700 with ss01 for display, Inter 400/500 for text.
A 4px base unit scales through 8/12/16/20/24/32px tokens. Containers cap at ~1200px with 32px desktop gutters (16px mobile). Cards round to the canonical 16px (xl); the ride-request form uses a compact 16px inset while content cards sit at 24px padding. Every interactive element — buttons, chips, app-download pills, icon buttons — rounds to the signature 999px pill, the brand's whole geometric identity; the sole exceptions are the 36px hero tab-toggle and the 16px large-form CTA. Depth is deliberately quiet: Level 0 flat is the default, with subtle drop shadows reserved for promo frames, the ride-request form card, and the single floating white pill. The mid-page polarity flip to black bands IS the primary depth cue.
Buttons are pills in a two-color hierarchy: black primary, white secondary, soft-gray subtle, floating white with a shadow. Inputs are borderless gray-filled fields with an 8px radius that ring ink on focus. Cards are 16px, flat-by-default, with an optional subtle drop and a gray-tinted callout variant. The hero pairs a 52px headline with the signature ride-request form card. Category chips are soft-gray pills; the footer is the only pure-black hairline-free surface; the tab-toggle is the one off-shape 36px control.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#000000#000000#ffffff#000000#5e5e5e#afafaf#4b4b4b#ffffff#efefef#f3f3f3#e2e2e2#0000ee#ffffff#282828UberMove, UberMoveText, system-ui, 'Helvetica Neue', Arial, sans-serifUberMove, UberMoveText, system-ui, 'Helvetica Neue', Arial, sans-serifUberMoveText, system-ui, 'Helvetica Neue', Arial, sans-serifUberMoveText, system-ui, 'Helvetica Neue', Arial, sans-serif'Roboto Mono', ui-monospace, Menlo, monospace{
"displayXxl": "52px/64px 700",
"displayXl": "36px/44px 700",
"displayLg": "32px/40px 700",
"displayMd": "24px/32px 700",
"displaySm": "20px/28px 700",
"bodyLg": "18px/24px 500",
"bodyMd": "16px/24px 400",
"bodyMdStrong": "16px/20px 500",
"bodySm": "14px/20px 400",
"bodySmStrong": "14px/16px 500",
"caption": "12px/20px 400",
"buttonLarge": "18px/24px 500",
"buttonMd": "16px/20px 500"
}The pill is the whole story. Black 999px pill for primary conversion, white pill for secondary, soft-gray pill for tertiary, and a floating white pill with a subtle drop shadow over dark surfaces.
Flat gray-filled field on a soft canvas — no border, an 8px radius, and an icon-led row exactly like the hero ride-request card's pickup and destination fields.
The canonical 16px content card on white — flat by default, with an optional Level-1 subtle drop for promo frames and a soft-tinted gray variant for callout sub-regions.
Tiny grayscale marker — soft-gray pill for neutral, ink for the inverted 'new' marker. No color ever enters the badge system.
UberMove weight-700 sentence-case hierarchy from 52px hero down to 20px sub-card, with tight 1.22–1.25 leading and never a hint of letter-spacing.
Grayscale utility links — mid-gray in footer columns, browser-blue only for legal fine print, white on dark bands. Underline-on-hover.
White hero band with a 52px UberMove headline on the left and the signature ride-request form card on the right — pickup, destination, and a black 'See prices' pill.
Sticky white top nav with an ink wordmark, weight-500 UberMoveText links, and Help / Log in text plus a black Sign-up pill on the right.
The deep-black footer band — pure ink fill, white column eyebrows, and mid-gray utility links stacked with no internal hairlines.
Big UberMove weight-700 numeric figure with a mid-gray UberMoveText label — a grayscale benchmark row, no accent color.
Pull-quote set in 32px UberMove weight-700 on white — no glyph flourish, just the display face doing the work in sentence-case.
The horizontal-scroll category chip — a soft-gray 999px pill with an icon-led label used for Reserve / Rentals / Teens / Group rides.
Grayscale round avatar for driver/rider bylines — soft-gray or ink fill, circular per the brand's square-or-circle-only rule.
The hero ride/drive tab-toggle — an off-shape 36px pill-tab (deliberately tighter than the canonical 999px pill), white active on a soft-gray track.
A transportation-and-delivery super-app rendered as a structural black-and-white duet. Black (#000000) is the sole conversion anchor — every CTA pill, every nav login button, every dark promo band, the footer fill — while white (#ffffff) carries everything else. There is no third color, no accent palette, no atmospheric backdrop. Decoration comes exclusively from editorial 4:3 illustrations of riders, drivers, and city objects, plus a signature alternating-band rhythm where white feature cards give way to black promo callouts mid-page. The result reads as engineering-grade restraint: the brand signals its scale by refusing to shout.
The palette is grayscale plus ink. Black #000000 is the only conversion color and never gains a secondary accent. Text steps down through Ink #000000, Body #5e5e5e, Hairline Mid #4b4b4b, and Mute #afafaf. Surfaces run White #ffffff, Canvas Soft #efefef (chips, form rows, subtle pills), and Canvas Softer #f3f3f3 (nested inputs); Surface Pressed #e2e2e2 is the pressed state and Black Elevated #282828 the hover on dark controls. The system keeps no error/success/warning palette — the one chromatic exception is browser-default link blue #0000ee, used only for inline links in legal and footer fine print.
Two custom faces carry every page and never cross roles. UberMove at weight 700 sets all display headlines from 52px hero to 20px sub-card, with tight 1.22–1.25 leading and zero letter-spacing. UberMoveText at weights 400/500 handles body, button, link, and small headings from 12–18px. Headlines are always sentence-case; uppercase is reserved for rare eyebrow tags. Button labels stay at weight 500 — never promoted to 700. Open-source substitutes: Inter 700 with ss01 for display, Inter 400/500 for text.
A 4px base unit scales through 8/12/16/20/24/32px tokens. Containers cap at ~1200px with 32px desktop gutters (16px mobile). Cards round to the canonical 16px (xl); the ride-request form uses a compact 16px inset while content cards sit at 24px padding. Every interactive element — buttons, chips, app-download pills, icon buttons — rounds to the signature 999px pill, the brand's whole geometric identity; the sole exceptions are the 36px hero tab-toggle and the 16px large-form CTA. Depth is deliberately quiet: Level 0 flat is the default, with subtle drop shadows reserved for promo frames, the ride-request form card, and the single floating white pill. The mid-page polarity flip to black bands IS the primary depth cue.
Buttons are pills in a two-color hierarchy: black primary, white secondary, soft-gray subtle, floating white with a shadow. Inputs are borderless gray-filled fields with an 8px radius that ring ink on focus. Cards are 16px, flat-by-default, with an optional subtle drop and a gray-tinted callout variant. The hero pairs a 52px headline with the signature ride-request form card. Category chips are soft-gray pills; the footer is the only pure-black hairline-free surface; the tab-toggle is the one off-shape 36px control.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css