). Never behind a heading: every word on it is on a card. On a strong-colour page (data-tint away) it takes the accent's hue, on a grey accent (data-lowchroma) the lit ground's colour. --stage-w is the card's width",
"roles": [
"body",
"hero"
],
"types": [
"software"
],
"sections": [
"hero-split",
"hero-cycle",
"hero-product",
"split-text-left",
"split-text-right",
"tabs-tour",
"calendar-frame",
"hero-editorial",
"chapter",
"product-statement",
"integrations-grid"
],
"pairs": [
"paper",
"mist",
"halo",
"dusk",
"ruled",
"dots"
],
"avoids": [
"field",
"grain",
"band",
"liquid"
],
"textZone": null,
"coloured": true,
"strict": true,
"texture": true
},
{
"id": "photo",
"class": "bg-photo",
"name": "Photo",
"kind": "hard",
"weight": 3,
"animated": false,
"mood": "calm and large, a photograph under a quiet scrim",
"where": "a media band, the hero of a place or product page, a closing photo. Put the photograph in as ![]()
(or --g-photo: url(...) where no img fits); words sit lower left (bg-photo--left: left side). A pale photograph takes bg-photo--light (dark words on a light scrim). Credits go in the footer line",
"roles": [
"hero",
"band",
"close"
],
"types": [
"software"
],
"sections": [
"product-statement",
"quote-stat",
"chapter",
"closing-type"
],
"needs": "a vetted photograph with a calm area (scripts/photos.mjs pick)",
"pairs": [
"paper",
"halo",
"mist",
"dusk"
],
"avoids": [
"horizon",
"deep",
"liquid"
],
"textZone": [
0,
0.6,
0.6,
1
],
"variants": [
{
"id": "photo-left",
"class": "bg-photo bg-photo--left",
"textZone": [
0,
0,
0.45,
1
]
},
{
"id": "photo-light",
"class": "bg-photo bg-photo--light",
"textZone": [
0,
0.6,
0.6,
1
]
},
{
"id": "photo-white",
"class": "bg-photo",
"textZone": [
0,
0.6,
0.6,
1
],
"note": "a white photograph under the dark scrim: the worst case for white words"
},
{
"id": "photo-left-white",
"class": "bg-photo bg-photo--left",
"textZone": [
0,
0,
0.45,
1
]
}
],
"strict": true
},
{
"id": "horizon",
"class": "bg-horizon",
"name": "Horizon",
"kind": "hard",
"weight": 3,
"animated": false,
"mood": "dramatic, a dark band with a lit curve like a planet's rim",
"where": "a statement the page is sure of (security, scale, a promise) with a button above the horizon; the page's one dark band. Words stay above the lit curve, whose rim is brightest at the top",
"roles": [
"band",
"close"
],
"types": [
"software"
],
"sections": [
"product-statement",
"quote-stat",
"chapter",
"closing-type"
],
"pairs": [
"paper",
"halo",
"dusk",
"mist",
"dots"
],
"avoids": [
"deep",
"photo",
"arcs"
],
"textZone": [
0,
0,
1,
0.58
],
"strict": true
},
{
"id": "deep",
"class": "bg-deep",
"name": "Deep",
"kind": "hard",
"weight": 2,
"animated": false,
"mood": "quiet and dark, near-black with a cool pool at the top, a lit lip and grain like x.ai",
"where": "a feature section with two or three UI cards (chat, code, voice): the dark ground UI reads best on",
"roles": [
"band",
"hero",
"close"
],
"types": [
"software"
],
"sections": [
"hero-split",
"hero-centred",
"hero-cycle",
"features-2x2",
"bento",
"tabs-tour",
"split-text-left",
"split-text-right",
"calendar-frame",
"integrations-grid",
"closing-type"
],
"pairs": [
"paper",
"halo",
"dots",
"mist"
],
"avoids": [
"horizon",
"photo"
],
"textZone": [
0,
0,
1,
1
],
"strict": true,
"texture": true
},
{
"id": "liquid",
"class": "bg-liquid",
"name": "Liquid",
"kind": "soft",
"weight": 2,
"animated": true,
"mood": "alive, two slow blobs of two neighbouring hues drifting; transforms only",
"where": "a call to action or a hero with a heading and two buttons. One a page; it is the page's moving thing, so no other looping effect in view",
"roles": [
"hero",
"close"
],
"types": [
"software"
],
"sections": [
"hero-centred",
"hero-editorial",
"hero-split",
"closing-type"
],
"pairs": [
"paper",
"dusk",
"ruled",
"dots"
],
"avoids": [
"mist",
"halo",
"topglow",
"arcs",
"photo",
"stage"
],
"textZone": [
0,
0,
1,
1
],
"checkFrames": [
"liquid-mid",
"liquid-end"
],
"strict": true,
"texture": true
}
]
}