Azure Microsoft
Marquee Hero
Loading
TigerBeetle
Electric dark expanse, bold geometric sans-serifs dance with vibrant, unexpected hues.
Click any value to copy. Roles are suggestions, not gospel.
- #ed541eoklch(64.7% 0.198 38)Dominant
- #93fbb3oklch(90.6% 0.140 153)Surface
- #642c17oklch(36.7% 0.087 40)Ink
- #94649coklch(57.4% 0.100 322)Accent
- #c79dd2oklch(75.2% 0.088 319)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Work Sans Medium | 64px | 500 | 1 | -1.28px | Aa Bb Cc |
| h2 | Work Sans Medium | 26px | 500 | 1.2 | -0.52px | Aa Bb Cc |
| h3 | Work Sans Medium | 18px | 500 | 1.3 | -0.36px | Aa Bb Cc |
| body | sans-serif | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Inter Medium | 16px | 500 | 1.4 | -0.2px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ed541e;
--color-surface: #93fbb3;
--color-ink: #642c17;
--color-accent: #94649c;
--color-detail: #c79dd2;
}
/* CSS variables exposed by source */
:root {
--one-if-corner-shape-supported: 1;
}Drop-in prompt
Build a landing page in the visual style of TigerBeetle.
Reference design system (extracted from the live site):
- Palette: #ed541e, #93fbb3, #642c17, #94649c, #c79dd2
- Typefaces: Work Sans Medium, sans-serif, Inter Medium
- Macrostructure: Marquee Hero
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/tigerbeetle-com
