Orpetron
Type Specimen
Loading
Developments
Crisp, stark black-and-white geometry—precise, measured, a study in focused intensity.
Click any value to copy. Roles are suggestions, not gospel.
- #7f7f7foklch(59.6% 0.000 90)Dominant
- #bcbcbcoklch(79.5% 0.000 90)Surface
- #424242oklch(37.9% 0.000 90)Ink
- #848484oklch(61.3% 0.000 90)Accent
- #bcbcbcoklch(79.5% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | FolioBT-Light | 53px | 400 | 1.1 | -2.664px | Aa Bb Cc |
| body | FolioBT-Light | 53px | 400 | 1.1 | -2.664px | Aa Bb Cc |
| button | FolioBT-Book | 12px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7f7f7f;
--color-surface: #bcbcbc;
--color-ink: #424242;
--color-accent: #848484;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--space-above: 0.6rem;
--border-width: 1px;
--vh: 9px;
--padding-container: 5rem;
--grid-padding: 6rem;
--padding-blocks: 9rem;
--padding-drawer: 0.2rem;
--padding: 0.5rem;
--content-space: 1rem;
--menu-width: 6rem;
--padding-button: 0.6em;
--vh-init: 9px;
--caption-padding: 0.7em;
--grid-gutter: 0.5rem;
--padding-menu: 0.4rem;
--viewport-height-init: 900px;
--viewport-height: 900px;
}Drop-in prompt
Build a landing page in the visual style of Developments.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #bcbcbc, #424242, #848484, #bcbcbc
- Typefaces: FolioBT-Light
- Macrostructure: Type Specimen
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/developments-media
