Workday
Feature Stack
Loading
Certified Online Customs Broker | BorderBuddy
Deep indigo space, assertive sans-serifs, clean geometric structure; confident, precise, and grounded.
Click any value to copy. Roles are suggestions, not gospel.
- #ec6c28oklch(67.7% 0.176 45)Dominant
- #f0bb9doklch(83.2% 0.074 51)Surface
- #083151oklch(30.4% 0.072 247)Ink
- #596d88oklch(52.9% 0.049 256)Accent
- #acb7c8oklch(77.6% 0.027 259)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Manrope | 100px | 700 | 1 | -4px | Aa Bb Cc |
| h2 | Manrope | 64px | 600 | 1.16 | -1.28px | Aa Bb Cc |
| h3 | Manrope | 24px | 700 | 1.25 | -0.32px | Aa Bb Cc |
| body | Manrope | 16px | 500 | 1.5 | -0.32px | Aa Bb Cc |
| button | Manrope | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
Max content width 1280px
:root {
--color-dominant: #ec6c28;
--color-surface: #f0bb9d;
--color-ink: #083151;
--color-accent: #596d88;
--color-detail: #acb7c8;
}
/* CSS variables exposed by source */
:root {
--orange-primary: #ef6820;
--gray-200: #eaecf0;
--navy-blue-primary: #282f6d;
--orange-50: #fef6ee;
--gray-900: #101828;
--navy-5f: #23295f;
--black: black;
--gray-50-2: #f9fafb;
--white: white;
--gray-600: #475467;
--navy-blue-100: #e5e5eb;
--gray-300: #d0d5dd;
--gray-700: #0c111d;
--gray-400: #98a2b3;
--gray--700: #344054;
--gray-500: #667085;
}Drop-in prompt
Build a landing page in the visual style of Certified Online Customs Broker | BorderBuddy.
Reference design system (extracted from the live site):
- Palette: #ec6c28, #f0bb9d, #083151, #596d88, #acb7c8
- Typefaces: Manrope
- 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/borderbuddy-com
