Builder — Blog
Specimen
Loading
Arweave
Cool, clinical white space, stark sans-serifs, and a muted, digital-sunrise glow.
Click any value to copy. Roles are suggestions, not gospel.
- #fc6404oklch(68.9% 0.203 43)Dominant
- #833301oklch(42.8% 0.122 45)Surface
- #fcaa72oklch(80.6% 0.121 54)Ink
- #777777oklch(56.9% 0.000 90)Accent
- #bbbbbcoklch(79.2% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Roboto Mono | 64px | 400 | 1 | -3.2px | Aa Bb Cc |
| body | Work Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Work Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fc6404;
--color-surface: #833301;
--color-ink: #fcaa72;
--color-accent: #777777;
--color-detail: #bbbbbc;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Arweave.
Reference design system (extracted from the live site):
- Palette: #fc6404, #833301, #fcaa72, #777777, #bbbbbc
- Typefaces: Roboto Mono, Work Sans
- Macrostructure: 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/arweave-org
