Apartamentomagazine
Specimen
Deep charcoal geometry, precise sans-serifs, and muted ochre accents evoke thoughtful clarity.




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 |
|---|---|---|---|---|---|---|
| h1 | Feature Headline | 80px | 500 | 1.2 | -0.8px | Aa Bb Cc |
| h2 | Feature Headline | 48px | 500 | 1.2 | -0.48px | Aa Bb Cc |
| h3 | Feature Headline | 20px | 500 | 1.2 | -0.2px | Aa Bb Cc |
| body | Brut Grotesque | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Brut Grotesque | 16px | 700 | 1 | 0 | Aa Bb Cc |
Max content width 1349px
:root {
--color-dominant: #fc4f3f;
--color-surface: #123138;
--color-ink: #dab4b2;
--color-accent: #7b817a;
--color-detail: #cca194;
}
/* CSS variables exposed by source */
:root {
--color-form-placeholder: light-dark(#5f5e59,#92908b);
--color-form: light-dark(#111110,#dddbd4);
--p-dyn-color-blue-02: light-dark(#52a7e0,#006eb7);
--p-line-height-3: 1.4;
--wp-admin-theme-color-darker-20: #005a87;
--wp--preset--font-size--large: 36px;
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--p-dyn-color-magenta-02: #c4497c;
--wp--custom--gallery-caption-height: 1.5rem;
--p-color-salmon-02: #ff4c3c;
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--custom--pagination-number-size: 1.5rem;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--wp--preset--spacing--p-spacing-1: 0.25rem;
--wp--preset--spacing--p-spacing-10: 5rem;
--p-color-gold-03: #726431;
--p-dyn-color-warm-white: light-dark(#f2f1ed,#191712);
--p-color-indigo-01: #c4d1f3;
--wp-bound-block-color: #7a00df;
--p-scale-5: 1.25rem;
--p-color-text-supp: light-dark(#5f5e59,#92908b);
--p-fonts-mono: ui-monospace,Menlo,"Roboto Mono","Segoe UI Mono",Consolas,monospace;
--p-dyn-color-gray-02: light-dark(#c8c6c0,#31302d);
--p-color-text-body: light-dark(#31302d,#c8c6c0);
--p-color-warm-white: #f2f1ed;
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--p-col-size--01: 3.7rem;
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--spacing--p-grid-gutter: 2.5rem;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--p-spacing-9: 4rem;
--p-scale-8: 2rem;
--p-grid-col: 3.7rem;
--p-scale-3: 0.875rem;
--p-color-text-dek: light-dark(#5f5e59,#92908b);
--p-col-size--13: calc(3.7rem*13 + 2.5rem*12);
--wp-admin-theme-color--rgb: 0,124,186;
--form-border: 2px solid;
--p-color-black: #000;
--p-color-magenta-01: #e2c2d9;
--p-color-green-01: #accec4;
--p-dyn-color-indigo-02: #7692ff;
--p-color-gold-01: #c5bfa5;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--p-scale-7: 1.75rem;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
--p-col-size--09: calc(3.7rem*9 + 2.5rem*8);
--p-color-green-02: #44c785;
--p-dyn-color-green-01: light-dark(#accec4,#2d4c2f);
--p-spacing-3: 0.75rem;
--p-dyn-color-salmon-01: light-dark(#efada7,#91250a);
--wp--preset--spacing--p-vert-rhythm-lg: 5rem;
--p-color-indigo-02: #7692ff;
--p-color-salmon-03: #91250a;
--p-scale-2: 0.75rem;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp--preset--color--vivid-cyan-blue: #0693e3;
}Drop-in prompt
Build a landing page in the visual style of Propublica.
Reference design system (extracted from the live site):
- Palette: #fc4f3f, #123138, #dab4b2, #7b817a, #cca194
- Typefaces: Feature Headline, Brut Grotesque
- 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/propublica-org