Bellroy
Feature Stack
Loading
Lyft
Warm, muted photography overlaid with clean, spacious typography; a feeling of friendly ease.
Click any value to copy. Roles are suggestions, not gospel.
- #b67f24oklch(63.7% 0.122 75)Dominant
- #65361aoklch(38.7% 0.078 50)Surface
- #eccc9coklch(86.1% 0.072 78)Ink
- #9d8655oklch(63.0% 0.072 85)Accent
- #cdc1bboklch(81.9% 0.016 49)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | RebelSansDisplay | 60px | 600 | 1.1 | 0 | Aa Bb Cc |
| h2 | RebelSansText | 36px | 600 | 1.25 | 0 | Aa Bb Cc |
| body | RebelSansText | 16px | 400 | 1.38 | 0 | Aa Bb Cc |
| button | RebelSansText | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b67f24;
--color-surface: #65361a;
--color-ink: #eccc9c;
--color-accent: #9d8655;
--color-detail: #cdc1bb;
}
/* CSS variables exposed by source */
:root {
--core-ui-color-data-intensity-d5-light: #00567d1a;
--core-ui-color-red20-light: #ffafae;
--core-ui-color-rose20: #ffb0bf;
--core-ui-color-data-intensity-b2: #9f004599;
--core-ui-color-disabled20: #ffffff9e;
--core-ui-elevation-level2-overlay: #ffffff12;
--core-ui-color-disabled80: #ffffff9e;
--core-ui-color-amber0-light: #fff4eb;
--core-ui-elevation-level5-overlay-light: #ffffff1c;
--core-ui-color-icon-primary-inverse: #fff;
--core-ui-color-mint100-light: #002c16;
--core-ui-color-citron50-light: #988936;
--core-ui-color-brown0-light: #f7f6f3;
--core-ui-color-disabled10: #ffffff9e;
--core-ui-color-purple100-light: #42003b;
--core-ui-elevation-level6: 0 0 1px 0 #0000001f,0 6px 10px 0 #00000029;
--core-ui-color-indigo10: #e7e2ff;
--core-ui-color-purple50: #d145cd;
--core-ui-color-data-intensity-a6: #5725cf0d;
--core-ui-color-stroke-highlight: #cf0090;
--core-ui-color-data-intensity-c4-light: #155e1f26;
--core-ui-color-disabled70-light: #ffffff9e;
--core-ui-color-hover60-light: #1d0c172e;
--core-ui-color-disabled50: #ffffff9e;
--core-ui-color-purple20: #ecb1f7;
--core-ui-color-yellow80: #734900;
--core-ui-color-gray80-light: #473a40;
--core-ui-color-sunset30: #ff8071;
--core-ui-color-data-category-extended6: #a092fd;
--core-ui-color-red5: #ffedec;
--core-ui-color-data-intensity-e6: #9228000d;
--core-ui-color-blue30-light: #8ab4fc;
--core-ui-color-text-primary-inverse: #fff;
--core-ui-color-alwaysBlack: #000;
--core-ui-color-amber15: #ffc999;
--core-ui-color-pink70-light: #9e006d;
--core-ui-color-surface-selected: #820076;
--core-ui-color-data-intensity-b3-light: #9f00454d;
--core-ui-color-data-severity-divergent-soft-positive-light: #8fdbaa;
--core-ui-color-teal100-light: #002824;
--core-ui-color-elevation-overlay: #fff0;
--core-ui-color-icon-interactive: #ac2a9e;
--core-ui-color-data-intensity-a6-light: #5725cf0d;
--core-ui-color-data-category-extended1: #5725cf;
--core-ui-color-data-intensity-b1: #9f0045;
--core-ui-color-brown40: #b9987b;
--core-ui-color-pink30-light: #ff7fcf;
--core-ui-color-stroke-secondary: #1d0c1773;
--core-ui-color-pink30: #ff7fcf;
--core-ui-color-blue100: #032057;
--core-ui-color-red0-light: #fff2f1;
--core-ui-color-data-intensity-e6-light: #9228000d;
--core-ui-color-green40-light: #58ae5a;
--core-ui-color-indigo20: #ccc4ff;
--core-ui-color-stroke-negative-light: #c81534;
--core-ui-color-sunset80: #9c0205;
--core-ui-color-hover40: #ffffff24;
--core-ui-color-purple5-light: #faecfe;
--core-ui-color-text-placeholder: #1d0c1799;
--core-ui-color-data-intensity-c3-light: #155e1f4d;
}Drop-in prompt
Build a landing page in the visual style of Lyft.
Reference design system (extracted from the live site):
- Palette: #b67f24, #65361a, #eccc9c, #9d8655, #cdc1bb
- Typefaces: RebelSansDisplay, RebelSansText
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/lyft-com--rider
