V0
Component Playground
Crisp, stark grayscale geometry—modular grids whisper of advanced computation.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Ibm Plex Mono 700 | 64px | 700 | 1 | -0.32px | Aa Bb Cc |
| h2 | Ibm Plex Mono 700 | 60px | 700 | 0.93 | -0.8px | Aa Bb Cc |
| h3 | IBM Plex Sans | 16px | 700 | 1.25 | 0 | Aa Bb Cc |
| body | Arial | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Arial | 40px | 400 | 0.5 | 0 | Aa Bb Cc |
Max content width 1200px
:root {
--color-dominant: #fc9720;
--color-surface: #824701;
--color-ink: #fcca9c;
--color-accent: #7c7c7c;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--color--content-quad: #999;
--color--accent-openai: orangered;
--color--stroke-on-black: #222;
--color--content-on-black: white;
--color--brand-python-text: white;
--color--accent-gemini: #8e75b2;
--color--content-primary: #000;
--color--content-negative: #eb361c;
--font-family-sans: "IBM Plex Sans",sans-serif;
--color--black: black;
--color--stroke-primary-hover: #b8b8b8;
--color--brand-jsts-bg: #f7df1e;
--color--accent-mistral: #ffa300;
--color--content-secondary: #333;
--color--cta-primary: black;
--color--stroke-codesnippet: black;
--color--brand-jsts-text: #000;
--color--bg-tertiary: #e6e6e6;
--color--stroke-img-outline: #fff0;
--color--stroke-secondary: #ebebeb;
--color--accent-anthropic: #cc7d5d;
--color--content-dark80: #000c;
--color--bg-secondary: #ebebeb;
--color--accent-meta: #0467df;
--color--bg-primary-hover: #f5f5f5;
--color--bg-dark-secondary: #1f1f1f;
--color--bg-primary: #fafafa;
--color--bg-codesnippet: black;
--color--content-keep-black: #000;
--color--content-dark10: #0000001a;
--color--content-keep-white: white;
--color--content-dark60: #0009;
--color--content-tertiary: #666;
--color--content-positive: #49a147;
--color--brand: #f80;
--color--content-dark20: #0003;
--color--brand-python-bg: #3776ab;
--color--content-dark40: #0006;
--color--cta-primary-hover: #1f1f1f;
--color--stroke-primary: #d6d6d6;
--dark--content-dark60: #fff9;
--dark--content-dark20: #fff3;
--dark--stroke-img-outline: #292929;
--dark--brand-python-text: #659ecd;
--dark--content-on-black: #000;
--dark--bg-codesnippet: #141414;
--dark--cta-primary: white;
--dark--brand-jsts-bg: #272301;
--dark--stroke-primary: #292929;
--dark--content-tertiary: #777;
--dark--content-quad: #666;
--dark--bg-secondary: #141414;
--mono-500: "Ibm Plex Mono 500",sans-serif;
--dark--content-dark80: #fffc;
--dark--cta-primary-hover: #ebebeb;
--dark--bg-primary-hover: #0a0a0a;
--dark--stroke-on-black: #ebebeb;
--dark--brand-python-bg: #0f202e;
--mono-700: "Ibm Plex Mono 700",sans-serif;
--dark--content-dark10: #ffffff1a;
}Drop-in prompt
Build a landing page in the visual style of E2b — Pricing.
Reference design system (extracted from the live site):
- Palette: #fc9720, #824701, #fcca9c, #7c7c7c, #bcbcbc
- Typefaces: Ibm Plex Mono 700, Arial
- Macrostructure: Component Playground
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/e2b-dev--pricing