El Miracle
100% GFPhoto card
Design system
Every token and component under the active theme. Switch with the picker (bottom-left) or ?theme=<id>.
Type
Hero headline
Venue name
Section heading
A dek sets up the page in one sentence.
Condensed label
Micro meta · El Carmen · €€
Body copy. Every place starts from at least one public listing, then we check the venue’s own website, menu and allergen chart.
--text-2xs | Sin gluten València |
|---|---|
--text-xs | Sin gluten València |
--text-label-sm | Sin gluten València |
--text-sm | Sin gluten València |
--text-small | Sin gluten València |
--text-label | Sin gluten València |
--text-body-sm | Sin gluten València |
--text-base | Sin gluten València |
--text-body-lg | Sin gluten València |
--text-md | Sin gluten València |
--text-md-plus | Sin gluten València |
--text-dek-mobile | Sin gluten València |
--text-wordmark-mobile | Sin gluten València |
--text-lg | Sin gluten València |
--text-title-mobile | Sin gluten València |
--text-title | Sin gluten València |
--text-xl | Sin gluten València |
--text-title-lg | Sin gluten València |
--text-2xl | Sin gluten València |
--text-title-xl | Sin gluten València |
--text-3xl | Sin gluten València |
--text-4xl | Sin gluten València |
--text-hero | Sin gluten València |
--text-venue | Sin gluten València |
Colour
Primitives
--p-ink--p-ink-2--p-grey-800--p-grey-700--p-grey-600--p-grey-400--p-grey-350--p-grey-300--p-grey-250--p-grey-200--p-grey-100--p-grey-50--p-grey-900--p-line--p-white--p-cream--p-stone--p-orange--p-yellow--p-yellow-pale--p-green--p-green-tint--p-sage--p-open--p-closed--p-blue--p-blue-tint--p-blue-deep--p-blue-deeper--p-lilac--p-lilac-tint--p-violet
Colour
--color-bg--color-surface--color-surface-alt--color-text--color-text-secondary--color-text-muted--color-text-faint--color-border--color-border-strong--color-accent--color-accent-contrast--color-link--color-highlight--color-highlight-contrast--color-focus--color-inverse-bg--color-inverse-text--color-inverse-text-secondary--color-inverse-text-muted--color-inverse-border--color-inverse-accent--color-open--color-closed--color-leader--color-diet-bg
Tiers
--tier-a-bg--tier-a-fg--tier-a-border--tier-a-ring--tier-a-tint-bg--tier-a-tint-fg--tier-a-tint-fg-strong--tier-b-bg--tier-b-fg--tier-b-border--tier-b-ring--tier-b-tint-bg--tier-b-tint-fg--tier-b-tint-fg-strong--tier-c-bg--tier-c-fg--tier-c-border--tier-c-ring--tier-c-tint-bg--tier-c-tint-fg--tier-c-tint-fg-strong--tier-d-bg--tier-d-fg--tier-d-border--tier-d-ring--tier-d-tint-bg--tier-d-tint-fg--tier-d-tint-fg-strong--tier-d-ring-style--color-gf-tag
Allergens
--color-allergen-contains-bg--color-allergen-contains-fg--color-allergen-free-bg--color-allergen-free-fg--color-allergen-unknown-bg--color-allergen-unknown-fg--color-allergen-unknown-border
Badges
--badge-gf-venue-bg--badge-gf-venue-fg--badge-gf-venue-border--badge-gf-version-bg--badge-gf-version-fg--badge-gf-version-border--badge-natural-bg--badge-natural-fg--badge-natural-border--badge-ask-bg--badge-ask-fg--badge-ask-border--badge-contains-bg--badge-contains-fg--badge-contains-border--badge-unknown-bg--badge-unknown-fg--badge-unknown-border
Contrast (WCAG)
| Pair | Sample | Ratio | Target |
|---|---|---|---|
Body text--color-text on --color-bg | Aa 14 | — | 4.5:1 |
Secondary text--color-text-secondary on --color-bg | Aa 14 | — | 4.5:1 |
Muted meta--color-text-muted on --color-bg | Aa 14 | — | 4.5:1 |
Muted on wash--color-text-muted on --color-surface-alt | Aa 14 | — | 4.5:1 |
Links--color-link on --color-bg | Aa 14 | — | 4.5:1 |
Accent text--color-accent on --color-bg | Aa 14 | — | 4.5:1 |
On accent--color-accent-contrast on --color-accent | Aa 14 | — | 4.5:1 |
On highlight--color-highlight-contrast on --color-highlight | Aa 14 | — | 4.5:1 |
Heading text vs highlight marker--color-text on --color-highlightDark mode uses an underline instead of a marker fill — n/a there. | Aa 14 | — | 4.5:1 |
Footer text--color-inverse-text on --color-inverse-bg | Aa 14 | — | 4.5:1 |
Footer small print--color-inverse-text-muted on --color-inverse-bg | Aa 14 | — | 4.5:1 |
Footer labels--color-inverse-accent on --color-inverse-bg | Aa 14 | — | 4.5:1 |
Selected segment--seg-selected-fg on --seg-selected-bg | Aa 14 | — | 4.5:1 |
Tier A badge--tier-a-fg on --tier-a-bg | Aa 14 | — | 4.5:1 |
Tier B badge--tier-b-fg on --tier-b-bg | Aa 14 | — | 4.5:1 |
Tier C badge--tier-c-fg on --tier-c-bg | Aa 14 | — | 4.5:1 |
Tier D badge--tier-d-fg on --tier-d-bg | Aa 14 | — | 4.5:1 |
Tier A placeholder--tier-a-tint-fg on --tier-a-tint-bg | Aa 14 | — | 4.5:1 |
Tier B placeholder--tier-b-tint-fg on --tier-b-tint-bg | Aa 14 | — | 4.5:1 |
Tier C placeholder--tier-c-tint-fg on --tier-c-tint-bg | Aa 14 | — | 4.5:1 |
Tier D placeholder--tier-d-tint-fg on --tier-d-tint-bg | Aa 14 | — | 4.5:1 |
Tier A dot vs page (UI)--tier-a-bg on --color-bg | Aa 14 | — | 3:1 |
Tier B dot vs page (UI)--tier-b-bg on --color-bg | Aa 14 | — | 3:1 |
Badge: GF (venue)--badge-gf-venue-fg on --badge-gf-venue-bg | Aa 14 | — | 4.5:1 |
Badge: GF version--badge-gf-version-fg on --badge-gf-version-bg | Aa 14 | — | 4.5:1 |
Badge: naturally GF (outline)--badge-natural-fg on --color-bg | Aa 14 | — | 4.5:1 |
Badge: naturally GF outline (UI)--badge-natural-border on --color-bg | Aa 14 | — | 3:1 |
Badge: ask (outline)--badge-ask-fg on --color-bg | Aa 14 | — | 4.5:1 |
Badge: ask outline (UI)--badge-ask-border on --color-bg | Aa 14 | — | 3:1 |
Badge: contains gluten--badge-contains-fg on --badge-contains-bg | Aa 14 | — | 4.5:1 |
Badge: no info (outline)--badge-unknown-fg on --color-bg | Aa 14 | — | 4.5:1 |
Badge: no info outline (UI)--badge-unknown-border on --color-bg | Aa 14 | — | 3:1 |
Allergen: contains--color-text on --color-allergen-contains-bg | Aa 14 | — | 4.5:1 |
Allergen: free dash (UI)--color-allergen-free-fg on --color-bg | Aa 14 | — | 3:1 |
Open--color-open on --color-bg | Aa 14 | — | 4.5:1 |
Closed--color-closed on --color-bg | Aa 14 | — | 4.5:1 |
Input outline (UI)--color-border-strong on --color-bg | Aa 14 | — | 3:1 |
Tiers
100% gluten-freeCoeliac-association advisedGF protocol / separate prepGF options — ask
100% GFCoeliac-association advisedProtocolOptions
Placeholder · A
Placeholder · B
Placeholder · D
Dish badges
Solid = the venue’s claim · outline = our inference · icon + words always
GF: Gluten-free (venue label)GF version: GF version available (ask for it)Naturally GF: Naturally GF ingredients (our inference, not a kitchen claim)Ask: Ask: hidden gluten riskContains gluten: Contains glutenNo info: Not enough info: ask staff
- GF: Gluten-free (venue label)Gluten-free (venue label)
- GF version: GF version available (ask for it)GF version available (ask for it)
- Naturally GF: Naturally GF ingredients (our inference, not a kitchen claim)Naturally GF ingredients (our inference, not a kitchen claim)
- Ask: Ask: hidden gluten riskAsk: hidden gluten risk
- Contains gluten: Contains glutenContains gluten
- No info: Not enough info: ask staffNot enough info: ask staff
Mixed kitchen: cross-contact possible. Tell staff you’re coeliac.
GF base: +€4 · GF bread: +€0.50
- Pizza margherita€12GF version: GF version available (ask for it)Milk Ingredients as a muted line.
- Paella valenciana€16Naturally GF: Naturally GF ingredients (our inference, not a kitchen claim)Milk Ingredients as a muted line.
- Tartar de atún€14.50Ask: Ask: hidden gluten riskMilk Ingredients as a muted line.
- Croquetas de jamón€9GF: Gluten-free (venue label)Milk Ingredients as a muted line.
- Menú del día€15No info: Not enough info: ask staffMilk Ingredients as a muted line.
Allergens
Contains milk Vegan Allergens not published
| Dish | Gluten | Eggs | Milk | Nuts | Soy |
|---|---|---|---|---|---|
| Croquetas | – | ✓ | ✓ | – | – |
| Unknown dish |
Controls
3
Heading highlight: Marker, underline or none
Section head
Cards & list item
Apcel
100% GFNo-photo fallback
-
El Miracle
100% GFA restaurant on Campoamor in Algirós that ACECOVA describes as Mediterranean cooking and that calls itself a gluten-free space. Open daily, 13:30 to 17:30 and 20:00 to 24:00, per its website.
-
Apcel
100% GFApcel is a gluten-free obrador in Vallada that sells online and through points of sale; it is not a place to eat. Its shop lists bread, speciality breads, sweet and savoury bollería, pizza, pastries and seasonal products.
Place header
Map markers
1234
Shape, depth, space
--radius-xs--radius-sm--radius-md--radius-lg--radius-pill --shadow-sm--shadow-md --space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9--space-10
All tokens
Primitives 32
--p-ink | near-black | |
--p-ink-2 | soft black | |
--p-grey-800 | charcoal | |
--p-grey-700 | dark grey | |
--p-grey-600 | mid grey | |
--p-grey-400 | light-mid grey | |
--p-grey-350 | light-mid grey (warm) | |
--p-grey-300 | hairline grey | |
--p-grey-250 | faint grey | |
--p-grey-200 | dotted leader grey | |
--p-grey-100 | near-white grey | |
--p-grey-50 | map placeholder | |
--p-grey-900 | dark hairline | |
--p-line | cool hairline | |
--p-white | white | |
--p-cream | warm wash | |
--p-stone | stone tint | |
--p-orange | brand orange | |
--p-yellow | marker yellow | |
--p-yellow-pale | pale yellow | |
--p-green | forest green | |
--p-green-tint | forest tint | |
--p-sage | sage tint | |
--p-open | signal green | |
--p-closed | signal red | |
--p-blue | cobalt | |
--p-blue-tint | cobalt tint | |
--p-blue-deep | deep cobalt | |
--p-blue-deeper | deeper cobalt | |
--p-lilac | lilac | |
--p-lilac-tint | lilac tint | |
--p-violet | violet ink |
Colour 26
--color-scheme | CSS color-scheme (form controls, scrollbars) | |
--color-bg | page background | |
--color-surface | raised surfaces: header, pills, sticky chart column, popups | |
--color-surface-alt | quiet panels: "How we know", chips, image placeholder | |
--color-text | primary text | |
--color-text-secondary | secondary copy: deks, blurbs, notes | |
--color-text-muted | meta: breadcrumbs, counts, captions | |
--color-text-faint | disabled/unused: missing € signs, placeholders | |
--color-border | hairlines, row separators, dividers | |
--color-border-strong | inputs, meta separators, D-tier outline | |
--color-accent | brand accent: nav active, section underline, stars | |
--color-accent-contrast | text on --color-accent | |
--color-link | inline links and "more" arrows | |
--color-highlight | marker behind headings, CTAs, "Soy celíaco" | |
--color-highlight-contrast | text on --color-highlight | |
--color-focus | keyboard focus ring | |
--color-inverse-bg | footer, selected segments, rank badge | |
--color-inverse-text | text on inverse | |
--color-inverse-text-secondary | footer links | |
--color-inverse-text-muted | footer small print | |
--color-inverse-border | footer hairline | |
--color-inverse-accent | footer labels + wordmark accent | |
--color-open | open-now state | |
--color-closed | closed state | |
--color-leader | dotted leader between dish and price | |
--color-diet-bg | vegan / vegetarian chip |
Tiers 34
--tier-a-bg | A · 100% GF badge/seal fill | |
--tier-a-fg | A text/glyph on fill | |
--tier-a-border | A badge outline | |
--tier-a-ring | A map pin / dot outline | |
--tier-a-tint-bg | A no-photo placeholder background | |
--tier-a-tint-fg | A placeholder text (thumb) | |
--tier-a-tint-fg-strong | A placeholder text (hero) | |
--tier-a-label-style | A badge font-style | |
--tier-b-bg | B · Certified | |
--tier-b-fg | ||
--tier-b-border | ||
--tier-b-ring | ||
--tier-b-tint-bg | ||
--tier-b-tint-fg | ||
--tier-b-tint-fg-strong | ||
--tier-b-label-style | ||
--tier-c-bg | C · Protocol | |
--tier-c-fg | ||
--tier-c-border | ||
--tier-c-ring | ||
--tier-c-tint-bg | ||
--tier-c-tint-fg | ||
--tier-c-tint-fg-strong | ||
--tier-c-label-style | ||
--tier-d-bg | D · Options (ask) | |
--tier-d-fg | ||
--tier-d-border | ||
--tier-d-ring | ||
--tier-d-tint-bg | ||
--tier-d-tint-fg | ||
--tier-d-tint-fg-strong | ||
--tier-d-label-style | ||
--tier-d-ring-style | D map pin border style (shape cue) | |
--color-gf-tag | "GF" tag on menu rows |
Allergens 7
--color-allergen-contains-bg | chart cell / chip: contains | |
--color-allergen-contains-fg | its text | |
--color-allergen-free-bg | chart cell: free of | |
--color-allergen-free-fg | its dash | |
--color-allergen-unknown-bg | chip: not published | |
--color-allergen-unknown-fg | ||
--color-allergen-unknown-border | dashed outline of unknown chip |
Badges 22
--badge-gf-venue-bg | dish badge, solid: gluten-free per the venue (bluish-green tint) | |
--badge-gf-venue-fg | its text + icon | |
--badge-gf-venue-border | its outline | |
--badge-gf-version-bg | solid: GF version on request (blue tint) | |
--badge-gf-version-fg | ||
--badge-gf-version-border | ||
--badge-natural-bg | outline: naturally GF ingredients, our inference (hollow) | |
--badge-natural-fg | ||
--badge-natural-border | 3:1+ against the page | |
--badge-natural-border-style | outline shape cue | |
--badge-ask-bg | outline: ask, hidden gluten risk (orange) | |
--badge-ask-fg | ||
--badge-ask-border | ||
--badge-ask-border-style | dashed = ask | |
--badge-contains-bg | solid: contains gluten (vermillion tint) | |
--badge-contains-fg | ||
--badge-contains-border | ||
--badge-unknown-bg | outline: not enough info (grey) | |
--badge-unknown-fg | ||
--badge-unknown-border | ||
--badge-unknown-border-style | dotted = unknown | |
--badge-radius | dish badge corners |
Map 9
--map-bg | map placeholder before tiles | |
--marker-size | numbered pin diameter (read by JS) | |
--marker-size-solo | un-numbered pin diameter | |
--marker-radius | pin shape | |
--marker-border-width | pin outline width | |
--marker-shadow | pin halo | |
--map-popup-bg | popup surface | |
--map-popup-radius | popup corners | |
--map-popup-shadow | popup shadow |
Typography 61
--font-display | headings, names, numbers | |
--font-body | running text | |
--font-label | condensed uppercase labels, nav | |
--font-micro | tiny meta text (.micro), pills, chips | |
--font-mono | prices / tabular figures | |
--stretch-body | font-stretch for body (width axis) | |
--stretch-display-xl | poster headings (placeholder names, Soy celíaco) | |
--stretch-display | hero h1, h2, wordmark | |
--stretch-title | place/guide names in lists and cards | |
--stretch-subtitle | venue h1, deks, city tab | |
--stretch-label | condensed labels | |
--weight-body | running text | |
--weight-micro | .micro meta | |
--weight-medium | emphasised body | |
--weight-semibold | dish names, prices | |
--weight-emph | badges, small emphasis | |
--weight-bold | strong | |
--weight-subhead | deks | |
--weight-display | headings, labels | |
--weight-display-heavy | poster headings | |
--text-2xs | smallest tags | |
--text-xs | micro labels, pills, chips | |
--text-label-sm | small condensed label | |
--text-sm | captions, legends | |
--text-small | small copy | |
--text-label | condensed labels, nav | |
--text-body-sm | compact body | |
--text-base | body | |
--text-body-lg | list dish names, prices | |
--text-md | lead copy | |
--text-md-plus | dish-page dek, city tab (mobile) | |
--text-dek-mobile | dek (mobile) | |
--text-wordmark-mobile | wordmark (mobile) | |
--text-lg | small titles, city tab | |
--text-title-mobile | list item name (mobile) | |
--text-title | card titles, deks | |
--text-xl | h2, wordmark | |
--text-title-lg | list item name | |
--text-2xl | CTA title | |
--text-title-xl | dish index names | |
--text-3xl | venue h1 max | |
--text-4xl | hero h1 max | |
--text-hero | h1-hero fluid size | |
--text-venue | place h1 fluid size | |
--leading-display | hero headings | |
--leading-tight | single-line display | |
--leading-heading | h2 and titles | |
--leading-snug | deks | |
--leading-body | body | |
--leading-copy | long-form copy | |
--leading-micro | micro labels | |
--leading-label | condensed labels | |
--tracking-display | hero headings, wordmark | |
--tracking-micro | .micro, pills, segments | |
--tracking-label | .label | |
--tracking-nav | nav links, .more, menu tags | |
--tracking-badge | tier badges | |
--tracking-chip | chips | |
--tracking-tight | lowercase hosts inside pills | |
--label-transform | labels, micro, pills, badges | |
--heading-transform | h1/h2/titles |
Shape & depth 13
--radius-xs | GF tag | |
--radius-sm | small panels | |
--radius-md | inputs | |
--radius-lg | large panels (unused in baseline) | |
--radius-pill | pills, chips, segments | |
--border-width | hairlines | |
--border-width-strong | search underline | |
--border-width-accent | section-head and nav underline | |
--shadow-sm | small lift (picker, popups) | |
--shadow-md | floating panels | |
--image-radius | photos & placeholders | |
--image-filter | photo treatment (e.g. grayscale(.2) contrast(1.05)) | |
--icon-stroke | line-icon stroke width |
Components 36
--pill-bg | pill button fill | |
--pill-fg | pill button text | |
--pill-border | pill outline | |
--pill-border-hover | pill hover outline | |
--pill-radius | pill corners | |
--pill-weight | pill font weight | |
--chip-bg | neutral chip | |
--chip-fg | ||
--chip-radius | ||
--seg-border | segmented control outline | |
--seg-selected-bg | selected segment | |
--seg-selected-fg | ||
--tier-radius | tier badge corners | |
--tier-weight | tier badge weight | |
--emblem-radius | tier seal/avatar/dot shape | |
--card-bg | place card fill | |
--card-border | place card border shorthand | |
--card-radius | place card corners | |
--card-padding | place card inset | |
--card-shadow | place card shadow | |
--rank-bg | numbered rank badge | |
--rank-fg | ||
--rank-radius | ||
--mark-bg | logo square | |
--mark-bar | logo bar | |
--mark-radius | ||
--header-bg | sticky header | |
--header-border | ||
--input-border | search box outline | |
--input-radius | ||
--highlight-bg | heading highlight: marker (use none for none) | |
--highlight-decoration | heading highlight: underline variant, e.g. underline 4px var(--color-accent) | |
--highlight-underline-offset | underline offset for the underline variant | |
--highlight-padding | inline padding of the highlight | |
--section-head-border | underline under section labels | |
--divider | <hr class=divider> |
Space 13
--space-1 | ||
--space-2 | ||
--space-3 | ||
--space-4 | ||
--space-5 | ||
--space-6 | ||
--space-7 | ||
--space-8 | ||
--space-9 | ||
--space-10 | ||
--content-max | .wrap max width | |
--gutter | page side padding (20px under 640px) | |
--gutter-mobile |
Motion 3
--ease | default easing | |
--duration-fast | hovers | |
--duration-base | panels |