TigerBeetle
Marquee Hero
Electric indigo depths host playful, rounded forms and crisp, futuristic sans-serif text.




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 |
|---|---|---|---|---|---|---|
| h2 | Rubik | 54px | 700 | 1.2 | 0 | Aa Bb Cc |
| h3 | Rubik | 50px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | Rubik | 18px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | Rubik | 12px | 400 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f5bc31;
--color-surface: #183a86;
--color-ink: #6bcce6;
--color-accent: #697aaf;
--color-detail: #b1b7c7;
}
/* CSS variables exposed by source */
:root {
--fa-style-family-classic: "Font Awesome 6 Pro";
--bs-orange: #fd7e14;
--bs-link-hover-color-rgb: 10,88,202;
--tw-ring-shadow: 0 0 #0000;
--bs-warning-bg-subtle: #fff3cd;
--bs-success: #198754;
--bs-danger-text-emphasis: #58151c;
--bs-warning-rgb: 255,193,7;
--bs-info-text-emphasis: #055160;
--bs-border-style: solid;
--bs-body-font-weight: 400;
--bs-primary: #0d6efd;
--bs-code-color: #d63384;
--bs-border-radius-2xl: 2rem;
--bs-body-line-height: 1.5;
--tw-border-spacing-x: 0;
--bs-light-bg-subtle: #fcfcfd;
--bs-cyan: #0dcaf0;
--bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
--bs-purple: #6f42c1;
--bs-link-hover-color: #0a58ca;
--bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,.075);
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--bs-primary-border-subtle: #9ec5fe;
--bs-green: #198754;
--bs-dark-text-emphasis: #495057;
--bs-info-rgb: 13,202,240;
--bs-breakpoint-xs: 0;
--bs-gray-400: #ced4da;
--bs-primary-text-emphasis: #052c65;
--bs-border-radius-sm: 0.25rem;
--tw-ring-color: rgba(59,130,246,.5);
--scale-x: 1;
--bs-pink: #d63384;
--bs-primary-bg-subtle: #cfe2ff;
--bs-gray-100: #f8f9fa;
--tw-rotate: 0;
--bs-link-decoration: underline;
--bs-border-radius: 0.375rem;
--bs-white: #fff;
--tw-ring-offset-color: #fff;
--bs-danger: #dc3545;
--bs-gray-600: #6c757d;
--bs-body-bg-rgb: 255,255,255;
--bs-highlight-color: #212529;
--bs-success-text-emphasis: #0a3622;
--bs-dark-rgb: 33,37,41;
--bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
--bs-gray-500: #adb5bd;
--bs-border-radius-xxl: 2rem;
--bs-teal: #20c997;
--bs-indigo: #6610f2;
--tw-ring-offset-width: 0px;
--bs-dark: #212529;
--tw-scroll-snap-strictness: proximity;
--bs-success-bg-subtle: #d1e7dd;
--bs-link-color-rgb: 13,110,253;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-breakpoint-lg: 992px;
--tw-shadow-colored: 0 0 #0000;
}Drop-in prompt
Build a landing page in the visual style of Bunny.
Reference design system (extracted from the live site):
- Palette: #f5bc31, #183a86, #6bcce6, #697aaf, #b1b7c7
- Typefaces: Rubik
- 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/bunny-net