Every piece this theme is built from, on the tone it belongs on, labelled with the class you would write. Personalisation runs through here too — the name Double Stack and the city Dubai below come from the business, not from the theme's own content.
Colour tokens
var(--ds-*) on .dsDeclared once on the theme root, so a page never hard-codes a hex. Two teals are intentional: the pale one is a ground, the deep one is a button.
--ds-paper#f5f3ec · Page ground--ds-paper-2#ece8dc · Panels, contact band--ds-ink#17181a · Body copy, borders--ds-ink-2#5c5f63 · Secondary copy--ds-line#ddd7c7 · Hairlines, dividers--ds-red#ee2852 · Buttons, script, prices--ds-teal#9ed6d6 · Hero and banner ground--ds-teal-shade#6cbcbc · Hard headline offset--ds-teal-deep#1f9c9c · Teal button--ds-board#1a1a1a · Dark bandsType scale
.ds-display / .ds-script / .ds-labelThree faces, one job each: Oswald in caps for anything structural, Sacramento for the red word above a heading, Lora for everything you actually read. Note that `.ds-script` and `.ds-display` both lose a specificity contest to `.ds p`, so a paragraph carrying either class still needs to not be a paragraph.
The script word
.ds-script · Sacramento, red, glowed.ds-display · Oswald 500, capsWide caps eyebrow
.ds-label · 11px, 0.2em trackingBody copy is Lora, a serif, set at 16px with a 1.6 line height. It is the one thing stopping the page from reading as a generic condensed-caps template, which is why nothing here overrides it with a sans.
.ds p · Lora, 16 / 1.6Buttons
.ds-btn [data-variant]A pill everywhere except the hero, which squares the corners off and pads it out through `.ds-hero-cta`. The variants are attributes rather than extra classes, so a button never carries two names.
.ds-hero-cta .ds-btn .ds-nav-book
Form fields
.ds-fieldLabel, input and textarea in one block element, with a 2px ink border that holds up on cream and on the board alike.
Nothing here submits anywhere — a specimen field is a specimen field.
Priced menu row
.ds-itemName, a dotted leader that flexes to fill, then the price in red. The leader is `.ds-item-dots` and it is decorative, so it is hidden from assistive tech.
Two patties, cheese, house sauce
Buttermilk chicken, pickles
Grilled chicken, garlic sauce
Stat counters
.ds-stats / .ds-stat-valueThree across at every width, value in red display, label in the muted ink. The suffix lives beside the number rather than inside it.
Hours row
.ds-hours-rowPromise card
.ds-promises / .ds-promiseA bordered panel on the second paper tone. Three to a row above 800px, stacked below it.
Cooked to order
Nothing goes on the grill before the ticket does.
Halal kitchen
Every supplier certified, with no second menu behind the counter.
Ten minutes
Wrapped hot and handed over, or the wait is on us.
News card
.ds-news / .ds-news-cardA 14rem cover-cropped image over a heading and one paragraph. The date sits in `.ds-label` above the title.
Every Friday
The family box is back
Four burgers, two portions of fries and a bottle of soft drink, boxed to carry home.
Thursday to Saturday
Now open until 2am
Later hours on the weekend, same full menu — the grill does not close early any more.
Daily
Breakfast starts at seven
Stacks, subs and karak from seven in the morning, served until half past eleven.
Review block
.ds-reviews / .ds-reviewA white card on any tone — quote, name, then the source in muted ink. The name is a `cite` and carries `dir="auto"`, because a personalised review can be Arabic.
“Ordered at the counter, sat down, and it arrived before I had finished my drink. The double is genuinely the best in the area.”Rana K.Google review
“We order the family box every Friday. It turns up hot every single time, which I cannot say for anywhere else that delivers here.”Omar S.Regular since 2019
“Open at midnight and the staff are still cheerful. That counts for a lot after a long shift.”Priya M.Google review
Torn edges
.ds-tear[data-tone]One per tone, and it belongs to the section *below* the boundary — it is drawn in that section's own colour and pulled 26px upward over whatever precedes it. A sub-page's first section therefore has to render its own, because the banner deliberately draws none. In the frames below the pull is removed so the edge is visible inside the box.
data-tone="cream"data-tone="board"data-tone="teal"Section tones
.ds-section[data-tone]Three grounds and nothing else: cream is the default page, board is the dark band, teal is the hero and every page banner. A band never sets its own background — it sets a tone and inherits the right text colour with it.
data-tone="cream" → --ds-paper on --ds-inkdata-tone="board" → --ds-board on #f3efe4data-tone="teal" → --ds-teal on --ds-inkNeon arrow
.ds-arrowPointed at a heading, never used alone. It is decorative, so it is always empty alt and hidden from assistive tech.
Hung cutout
.ds-cut[data-side][data-anchor]The move the whole theme is built on: a transparent food cutout pinned to one half of a band, sized by height so it deliberately overruns the torn edge into the next section. Not staged here — it only makes sense at full band height, and a boxed specimen of it would teach the wrong thing. See any board on the menu page. Below 900px it drops back into the flow, because at phone width it lands squarely on the type.
--cut-hdata-side="left | right"data-anchor="center | bottom"