Bbcearth
Photographic
Warm ochre and muted terracotta evoke a spacious, considered editorial stillness.




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 |
|---|---|---|---|---|---|---|
| body | -apple-system | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | regFont | 13px | 400 | 1.54 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e44c44;
--color-surface: #1e0e04;
--color-ink: #eb7f74;
--color-accent: #9c7358;
--color-detail: #c9b5a7;
}
/* CSS variables exposed by source */
:root {
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--primary: #007bff;
--secondary: #6c757d;
--fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 6 Sharp Duotone";
--light: #f8f9fa;
--fa-style-family-classic: "Font Awesome 6 Pro";
--tw-ring-offset-shadow: 0 0 #0000;
--yellow: #ffc107;
--su: 174 100% 29%;
--tw-ring-shadow: 0 0 #0000;
--fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 6 Duotone";
--mm-line-height: 20px;
--pink: #e83e8c;
--sc: 0 0% 100%;
--s: 40 14% 96%;
--breakpoint-xs: 0;
--in: 207 90% 54%;
--gray-dark: #343a40;
--n: 219 14% 28%;
--mm-color-background-emphasis: rgba(255,255,255,0.4);
--b1: 0 0% 100%;
--mm-color-text-dimmed: rgba(0,0,0,0.3);
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
--white: #fff;
--success: #28a745;
--sf: 40 15% 88%;
--red: #dc3545;
--mm-iconpanel-size: 50px;
--breakpoint-xl: 1200px;
--p: 0 0% 0%;
--fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp";
--indigo: #6610f2;
--mm-sidebar-expanded-size: 440px;
--mm-color-background-highlight: rgba(0,0,0,0.05);
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--fa-style-family-sharp-duotone: "Font Awesome 6 Sharp Duotone";
--mm-color-border: rgba(0,0,0,0.1);
--nc: 0 0% 100%;
--b2: 210 20% 98%;
--fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 6 Sharp Duotone";
--mm-listitem-size: 44px;
--mm-color-background: #f3f3f3;
--tw-ring-color: rgba(147, 197, 253, 0.5);
--breakpoint-lg: 992px;
--mm-iconbar-size: 50px;
--blue: #007bff;
--plc-primary-lightness: 13%;
--fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 6 Sharp Duotone";
--plc-primary-hue: 94;
--a: 219 14% 28%;
--bc: 215 28% 17%;
--warning: #ffc107;
--info: #17a2b8;
--orange: #fd7e14;
--pf: 0 0% 0%;
--fa-style-family-sharp: "Font Awesome 6 Sharp";
--af: 222 13% 19%;
--tw-ring-offset-color: #fff;
--mm-sidebar-collapsed-size: 50px;
}Drop-in prompt
Build a landing page in the visual style of Frieze.
Reference design system (extracted from the live site):
- Palette: #e44c44, #1e0e04, #eb7f74, #9c7358, #c9b5a7
- Typefaces: -apple-system, regFont
- Macrostructure: Photographic
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/frieze-com