workbuddy_skills/open-design/design-systems/starbucks/DESIGN-nl.md

Ontwerpsysteem Geïnspireerd door Starbucks

Category: E-commerce & Retail Wereldwijd koffiemerk. Viertrapps groen systeem, warm crèmekleurig canvas, volronde knoppen.

1. Visueel Thema & Sfeer

Het ontwerpsysteem van Starbucks is een warm, zelfverzekerd retailvlagschip dat de groene kleur van hun schort op elke oppervlakte draagt. Het canvas wisselt af tussen een neutraal-warme crème (#f2f0eb) en een keramisch gebroken wit (#edebe9) — kleuren die verwijzen naar echte winkelmateriaal: de papieren servetten, de cafémuren, de houten afwerkingen — terwijl het kenmerkende Starbucks Groen (#006241) het merkanker vormt op heldbanden, CTA's en de Rewards-ervaring. De groenen zijn beschikbaar in vier gekalibreerde tinten (Starbucks, Accent, House, Uplift), elk toegewezen aan een specifieke oppervlakterol, en goud (#cba258) verschijnt uitsluitend bij Rewards-statusceremonies — niet als algemeen accent.

Typografie draagt het grootste deel van de merkstem. Het propriëtaire SoDoSans-lettertype (exclusief voor Starbucks) staat op vrijwel elke oppervlakte met een strak -0.16px letterafstand — het oogt zelfverzekerd en vriendelijk in plaats van modeblad-streng. Wat opvalt: de Rewards-pagina schakelt naar een warm schreeflettertype ("Lander Tall", "Iowan Old Style", Georgia) voor specifieke koptekstmomenten, wat subtiel de nostalgische sfeer van een koffiehuis-krijtbord oproept. En de Careers-pagina's gebruiken een handschriftlettertype ("Kalam", "Comic Sans MS", cursive) voor persoonlijke bekernaaminvullingen. Drie lettertypen, drie contexten — het systeem hanteert strakke regels over wanneer elk verschijnt.

De oppervlakten ademen door afgeronde geometrie. Elke knop is een 50px volronde pil. Kaarten hebben een afronding van 12px. De zwevende "Frap"-CTA — een cirkelvormige bestelknop van 56px in Green Accent (#00754A) — is de kenmerkende dieptestap van het product: hij zweeft rechtsonder met een gelaagde schaduwstapel (0 0 6px rgba(0,0,0,0.24) basis + 0 8px 12px rgba(0,0,0,0.14) omgevend) en comprimeert via scale(0.95) bij indrukken. Elevaties zijn verder ingetogen — kaartschaduwen blijven op een gefluisterde 0.14/0.24 alpha, de globale navigatie krijgt een rustige drielaagse schaduwstapel. Het hele systeem voelt aan als helder cafébordwerk: leesbaar, warm en nooit schreeuwend.

Belangrijkste Kenmerken:

• Viertrapps groen merkensysteem (Starbucks / Accent / House / Uplift), elk toegewezen aan een aparte oppervlakterol — niet één enkel "merkgroen"
• Goud uitsluitend gereserveerd voor Rewards-statusmomenten; nooit een universeel accent
• Warm-neutraal canvas (#f2f0eb / #edebe9) in plaats van koud wit — verwijst naar cafématerialen
• Exclusief propriëtair lettertype (SoDoSans) met strak -0.16px letterafstand als universele stem
• Contextspecifieke letterwissels: schreef (Lander Tall) voor Rewards, script (Kalam) voor Careers-bekernames
• Volronde knoppen (50px radius) universeel, scale(0.95) actieve druk als kenmerkende micro-interactie
• Zwevende "Frap"-ronde CTA (56px, Green Accent vulling, gelaagde schaduwstapel) — het kenmerkende elevatielement van het product
• Cadeaukaartoppervlakten ontworpen als gefotografeerd fysiek product — elke kaart is een afzonderlijke geïllustreerde foto, geen gegenereerde afbeelding
• 12px kaartafronding + fluisterzachte schaduwen houden inhoudskaarten vlak-plus-een-vleugje-lift
• Rem-gebaseerde ruimteschaal verankerd op 1,6rem (~16px) = --space-3, oplopend tot 6,4rem (~64px)

Kleurblok paginaopbouw: Crème held → Witte inhoudsecties → Donkergroen (#1E3932) kenmerkenband met witte tekst → Crème bruikbaarheidszone → Donkergroen (#1E3932) voettekst met goud/witte tekst — een espresso-donkere boeking rond het heldere hoofddeel.

2. Kleurenpalet & Rollen

Geanalyseerde bronpagina's: startpagina, rewards, cadeaukaarten, productdetail (Pink Energy Drink), productvoeding (Cold Brew).

Primair

• Starbucks Green (#006241): Het historische merkgroen. Gebruikt voor h1-koppen, primaire sectiekoppen op de Rewards-pagina en als het hoofdmerksignaal waar één dominante kleur nodig is.
• Green Accent (#00754A): Een iets helderder, meer lumineus groen. De primaire gevulde-CTA-kleur ("Explore our afternoon menu", "See the spring menu") en de vulling van de zwevende ronde Frap-knop.
• House Green (#1E3932): Het diepe bijna-zwarte merkgroen. Voettekstoppervlak, kenmerkenbanachtergronden, reward-statusdonkere oppervlakken en de koptekst "Free coffee is just the beginning" held-band op Rewards.
• Green Uplift (#2b5148): Een secundair middel-donker groen, spaarzaam gebruikt op decoratieve accenten en donkere-gradient-momenten.
• Green Light (#d4e9e2): Een bleke muntgroene was, gebruikt voor formulier-geldige-staatstinten en lichte groene bruikbaarheidsoppervlakten.

Secundair & Accent

• Gold (#cba258): Vrijwel uitsluitend gereserveerd voor Rewards-statusceremonies — Gold-niveau-uitingen, partnerbadges (SkyMiles, Bonvoy) en premium aandoende accenten. Nooit een universeel merkkleur.
• Gold Light (#dfc49d): Zachter goud voor achtergrondwassen op Gold-niveau-secties.
• Gold Lightest (#faf6ee): Crème-goud paginaoppervlaktewas, gebruikt onder partnersecties op de Rewards-pagina — koppelt het goudaccent terug aan het warme neutrale systeem.

Oppervlak & Achtergrond

• White (#ffffff): Primair kaart- en modaaloppervlak. Ook kaartopvulling op cadeaukaartpanelen.
• Neutral Cool (#f9f9f9): Subtiel koel-grijs oppervlak gebruikt voor uitklapmenu's ("Account"-uitklap), formulierkaartomhulsels en stille bruikbaarheidscontainers.
• Neutral Warm (#f2f0eb): Het warme crème primaire paginacanvas voor Rewards-bruikbaarheidszones en heldbanden.
• Ceramic (#edebe9): Een iets warmere/donkerdere crème voor zonescheiders, zachte paginasectiewassen en de Rewards-partnerband.
• Black (#000000): Diepe inkt, gereserveerd voor de donkere CTA-balk bovenaan de pagina ("Join now") en hoog-contrast bovenste-navigatie aanmeldknoppen.

Neutralen & Tekst

• Text Black (rgba(0, 0, 0, 0.87)): Primaire kop- en bodytekstkleur op lichte oppervlakten. Niet puur zwart — een 87%-opaciteit zwart dat warmer aanvoelt.
• Text Black Soft (rgba(0, 0, 0, 0.58)): Secundaire/metadatatekst op lichte oppervlakten.
• Text White (rgba(255, 255, 255, 1)): Primaire kop-/bodytekst op donkergroene oppervlakten.
• Text White Soft (rgba(255, 255, 255, 0.70)): Secundaire tekst op donkergroene oppervlakten — voettekstlinkbeschrijvingen, bijschrifttekst.
• Rewards Green (#33433d): Een exclusief gedempte leisteengroen, uitsluitend gebruikt op tekstvakken van de Rewards-pagina — een iets "stoffiger" leeskleur dan Text Black die "reward-oppervlak" signaleert zonder volledig Starbucks Groen te gebruiken.

Semantisch & Accent

• Red (#c82014): Fout- en destructiestatus (formulier ongeldig, destructieve acties).
• Yellow (#fbbc05): Waarschuwingsstatus, legale merktoets.
• Green Light (#d4e9e2 bij 33% opaciteit = hsl(160 32% 87% / 33%)): Formulier-geldig-veld tintsachtergrond.
• Red Tint (hsl(4 82% 43% / 5%)): Ongeldig-veld tint op formulieren.

Zwart/Wit Alfatrappen

Twee parallelle doorschijnende schalen voor overlay- en secundaire tekstgebruik:

• rgba(0,0,0,0.06) tot rgba(0,0,0,0.90) in stappen van 10% — voor donkere overlays op lichte oppervlakten
• rgba(255,255,255,0.10) tot rgba(255,255,255,0.90) in stappen van 10% — voor lichte overlays op donkere oppervlakten

Gradiëntsysteem

Geen structurele gradiënt-tokens waargenomen. Oppervlaktehiërarchie is doorlopend op basis van effen kleurblokken — het systeem vertrouwt op zijn vijftrapps crème/groen oppervlaktenpalet in plaats van gradiënten.

3. Typografieregels

Lettertype Familie

• Primair: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif — Het propriëtaire bedrijfslettertype van Starbucks, gebruikt op vrijwel elke oppervlakte
• Laad-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif — Wat gebruikers zien vóór SoDoSans geladen is
• Rewards Schreef: "Lander Tall", "Iowan Old Style", Georgia, serif — Gebruikt op specifieke koptekstmomenten op de Rewards-pagina voor een warm redactioneel gevoel
• Careers Script: "Kalam", "Comic Sans MS", cursive — Uitsluitend gebruikt voor decoratieve "bekernaam"-accenten op Careers-pagina's, een verwijzing naar handgeschreven namen op Starbucks-bekers

Geen OpenType-stijlsets expliciet geactiveerd bij :root.

Hiërarchie

Rol	Grootte	Gewicht	Regelhoogte	Letterafstand	Opmerkingen
Display (text-10)	5,0rem / 80px	400–600	1,2	-0,16px	Grootste Rewards/held-display
Jumbo (text-9)	3,6rem / 58px	400–600	1,2	-0,16px	Secundaire heldkoppen
Hero Large (text-8)	2,8rem / 45px	400–600	1,2–1,5	-0,16px	Landingssectie-koppen
H1	24px	600	36px	-0,16px	Starbucks-Green primaire kop
H2	24px	400	36px	-0,16px	Regulier-gewicht sectietitel in Text Black
Body Large	19px	400–600	33,25px (~1,75)	-0,16px	Held-introtekst, kenmerkenbandtekst
Body (text-3)	1,6rem / 16px	400	1,5 (24px)	-0,01em	Standaard bodytekst
Small (text-2)	1,4rem / ~14px	400–600	1,5	-0,01em	Knopetiket, metadata, formulierlabels
Micro (text-1)	1,3rem / ~13px	400	1,5	-0,01em	Actief zweef-labelstatus, bijschrift-microtekst
Knopetiket	14–16px	400–600	1,2	-0,01em	Alle pil-knopetiket

Letterafstand-tokens:

• letterSpacingNormal: -0.01em (standaard — strak, kenmerkend)
• letterSpacingLoose: 0.1em (benadrukte hoofdletters)
• letterSpacingLooser: 0.15em (hoofdletterstijl-labels, extreme nadruk)

Regelhoogte-tokens:

• lineHeightNormal: 1.5 (body)
• lineHeightCompact: 1.2 (display/knoppen)

Principes

• Strakke negatieve tracking (-0.01em) wordt bijna universeel toegepast — het hele product leest licht gecomprimeerd, wat SoDoSans zijn zelfverzekerde aanwezigheid geeft zonder dat het benauwd aanvoelt.
• Gewichtsverschillen dragen hiërarchie, geen grootteverskillen. H1 en H2 delen dezelfde 24px/36px grootte; alleen gewicht (600 vs 400) en kleur (Starbucks-Green vs Text Black) onderscheiden ze.
• Groottetokens gebruiken rem, verankerd op 1rem = 10px op deze site (via een font-size: 62.5% roottruc). Dus 1.6rem = 16px, 2.4rem = 24px, enz. De schaal is semantisch (textSize-1 t/m textSize-10), geen willekeurige pixelwaarden.
• Contextspecifieke letterwissels — schreef bij Rewards, script bij Careers — zijn bewust en gelokaliseerd. Meng ze nooit met het primaire schreefloze lettertype op dezelfde oppervlakte.
• Bodytekst gaat nooit puur zwart — deze staat op rgba(0,0,0,0.87) om overeen te komen met de temperatuur van het warm-neutrale canvas.

Opmerking over Lettertypevervangers

SoDoSans is propriëtair voor Starbucks (gelicentieerd van House Industries, niet publiek beschikbaar). Redelijke open-source vervangers:

• Inter (Google Fonts) — vergelijkbare humanistische geometrische verhoudingen, breed gewichtsbereik
• Manrope — iets ronder, vergelijkbaar zelfverzekerd gevoel
• Nunito Sans — warmer, goed als "café"-merkvervanger

Controleer bij vervanging of de strakke -0.01em / -0.16px tracking nog goed leest; sommige open-source lettertypen hebben -0.005em nodig.

Lander Tall (het Rewards-schreeflettertype) is ook aangepast — open-source vervangers: Iowan Old Style (al in fallback), Lora of Source Serif Pro. Kalam (Careers-script) is rechtstreeks beschikbaar op Google Fonts.

4. Componentstijlen

Knoppen

1. Primair Gevuld — "Explore our afternoon menu / Sign up for free"

• Achtergrond: #00754A (Green Accent)
• Tekst: #ffffff
• Rand: 1px solid #00754A
• Radius: 50px (volronde pil)
• Opvulling: 7px 16px
• Lettertype: SoDoSans, 16px, gewicht 600, letterafstand -0.01em
• Actieve status: transform: scale(0.95) via --buttonActiveScale
• Overgang: all 0.2s ease

2. Primair Omlijnd — "Give them a try / Start an order"

• Achtergrond: transparant
• Tekst: #00754A (Green Accent)
• Rand: 1px solid #00754A
• Zelfde radius/opvulling/actief/overgang als Primair Gevuld

3. Zwart Gevuld — "Join now"

• Achtergrond: #000000
• Tekst: #ffffff
• Rand: 1px solid #000000
• Radius: 50px, Opvulling: 7px 16px
• Lettertype: 14px, gewicht 600
• Gebruikt op de bovenkant-van-pagina aanmeldingsbalk en vergelijkbare conversiemomenten

4. Donker Omlijnd — "Sign in"

• Achtergrond: transparant
• Tekst: rgba(0, 0, 0, 0.87) (Text Black)
• Rand: 1px solid rgba(0, 0, 0, 0.87)
• Radius: 50px, Opvulling: 7px 16px
• Lettertype: 14px, gewicht 600

5. Groen-op-Groen Omgekeerd — "See the spring menu"

• Achtergrond: #ffffff
• Tekst: #00754A
• Rand: 1px solid #ffffff
• Gebruikt wanneer de oppervlakte achter de knop de donkergroene House Green-band is — witte knop met groene tekst in plaats van een gevulde groene pil op groene achtergrond

6. Omlijnd op Donker — "Learn more / Order now"

• Achtergrond: transparant
• Tekst: #ffffff
• Rand: 1px solid #ffffff
• Gebruikt op donkergroene kenmerkendbanden voor secundaire actie gekoppeld aan een witte gevulde CTA

7. Toestemming Akkoord (donkergroene variant)

• Achtergrond: rgb(0, 130, 72) (een specifieke variantgroen gebruikt in de cookietoestemmingsmodule)
• Tekst: #ffffff
• Geen rand, 50px radius, 7px 16px opvulling, 14px / gewicht 400
• Iets helderder dan Green Accent — gereserveerd voor de Akkoord-actie van de toestemmingsbanner

8. Frap — Zwevende Ronde Bestelknop

• Achtergrond: #00754A (Green Accent)
• Icoon: #ffffff
• Afmeting: 5.6rem / 56px (standaard), 4rem / 40px (minivariant)
• Radius: 50% (volledige cirkel)
• Vaste positie rechtsonder, -0.8rem aanraakoffset voor extra tikcomfort
• Schaduwstapel: basis 0 0 6px rgba(0,0,0,0.24) + omgevend 0 8px 12px rgba(0,0,0,0.14)
• Actieve status: omgevende schaduw vervaagt naar 0 8px 12px rgba(0,0,0,0)
• Dit is het kenmerkende elevatielement van het product — het zweeft boven elk gescrolde oppervlak

9. Volbreedte Feedbacktab — "Provide feedback"

• Achtergrond: #00754A
• Tekst: #ffffff
• Radius: 12px 12px 0px 0px (alleen bovenaan afgerond)
• Opvulling: 8px 16px
• Lettertype: 14px, gewicht 400
• Vaste positie rechtsonder-binnenin, bevestigd aan de viewport-rand

Kaarten & Containers

Inhoudskaart (standaard)

• Achtergrond: #ffffff (--cardBackgroundColor)
• Radius: 12px (--cardBorderRadius)
• Schaduw: 0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24) (--cardBoxShadow)
• Gebruikt voor: featurekaarten, menu-item-tegels, reward-statuspanelen

Cadeaukaartpaneel

• Achtergrond: geïllustreerde fotografie vult de kaart (geen effen achtergrond)
• Radius: vergelijkbaar met kaarten (~12px, iets strakker op hoeken)
• Schaduw: lichter dan standaardkaart — deze worden behandeld als fysieke kaarten op het canvas
• Gelabeld per categorie boven het kaartgrid (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)

Rewards-statuskaarten (kenmerkend voor Rewards-pagina)

• Driekolomsraster: Bronze / Gold / Silver-achtig — elk een donkergroen (#1E3932) paneel met:
  • Gekleurde gradiënt/kleur koptekstring
  • Genummerd "Level"-badge
  • Statustitel in grote SoDoSans gewicht 600
  • Sterren/voordelen lijst in witte/doorschijnend-witte tekst
  • Onderaan "As you earn more stars…" progressiebijschrift

Partnerkaart (Rewards)

• Achtergrond: #faf6ee (Gold Lightest) warm-crème oppervlak
• Inhoud: partnerlogo's ("SkyMiles", "Bonvoy") gecentreerd, met beschrijvende tekst eronder
• Radius en schaduw volgen standaard kaartspecificaties

Uitklapmenu (Account-uitklap, bovenste navigatie)

• Achtergrond: #f9f9f9 (Neutral Cool)
• Menu-items op 24px / gewicht 400 in Text Black
• Geen rand — alleen achtergrondoppervlaktewijziging ten opzichte van witte navigatie

Modaal

• Opvulling: 2.4rem (--modalPadding)
• Bovenste opvulling: 8.8rem (--modalTopPadding) — laat ruimte voor sluitknop/koptekst
• Gecombineerde verticale opvulling: 11.2rem
• Radius erft van kaartspecificaties (12px)

Invoervelden & Formulieren

Zweef-label Invoerveld

• Label zweeft boven de invoerrand wanneer gefocust/ingevuld
• Desktoplabel lettergrootte: 1.9rem standaard, animeert naar 1.4rem wanneer actief
• Mobiellabel lettergrootte: 1.6rem standaard, animeert naar 1.3rem actief
• Label horizontale offset: 12px van links
• Actief label translateert: omhoog naar -12px met -50% Y-translatie
• Veld opvulling: 12px
• Formulier horizontale opvulling: 1.6rem
• Validatie: geldig veld krijgt rgba(green-light, 0.33) tint; ongeldig veld krijgt rgba(red, 0.05) tint
• Overgang: 0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27) bij aangevinkt invoer

Opticoon (checkbox/radio)

• Opvulling: 3px binnenin
• Gebruikt de bovenstaande cubic-bezier-animatie voor aangevinkt invoer (een licht "veerkrachtige" 2.32 overshoot-curve)

Navigatie

Globale navigatie (bovenste balk)

• Vaste positie met progressieve hoogten: 64px xs → 72px mobiel → 83px tablet → 99px desktop
• Schaduwstapel: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07) — drielaagse zachte lift
• Links: Starbucks-woordmerlogo, verschoven met 99px (md) / 131px (lg) van linkerrand
• Primaire links inline in SoDoSans gewicht 400–600: Menu · Rewards · Gift Cards
• Rechts: Winkel zoeken link + Aanmelden (omlijnd) + Nu lid worden (zwart gevuld)

Subnavigatie (tweede balk, bijv. Rewards intern)

• Hoogte: 53px (globale subnavigatie) / 48px (interne subnavigatie)
• Doorgaans horizontale tabbladgroep onder de globale navigatie

Mobiele navigatie

• Klapt in tot een hamburgermenu-la onder tabletbreekpunt
• Zwevende Frap-knop blijft rechtsonder ongeacht de navigatiestatus

Beeldverwerking

• Heldfotografie: Productfoto's (dranken in doorzichtig glas met gekleurde achtergronden — koraal, salie, warm amber) beslaan ~40vw van een gesplitste heldopmaak; tekst beslaat de andere 60vw (--headerCrateProportion: 40vw / --contentCrateProportion: 60vw)
• Cadeaukaartillustraties: Elke kaart is een afzonderlijke geïllustreerde foto (geschilderd gevoel, handgetekend uitziend, warm kleurenpalet). Nooit generieke gegenereerde afbeeldingen.
• Rewards-ceremonie-afbeeldingen: Foto's van Starbucks Rewards App-schermen in de hand gehouden, scheve composities — product-in-context-fotografie.
• Menuthumbnails: Vierkante of 4:3 productfotografie met schone witte/crème achtergronden, lichte zachte slagschaduw rondom het glas.
• Beeldfade-in: opacity 0.3s ease-in overgang bij afbeeldingsladingen (--imageFadeTransition).

Kenmerkband (donkergroene heldstrook)

Volbreedte #1E3932 (House Green) band met:

• Links: witte koptekst + subkop + CTA-rij
• Rechts: productfotografie of illustratie
• Splitverhouding ~40/60 of 50/50 afhankelijk van sectie
• Witte tekst doorlopend met rgba(255,255,255,0.70) voor secundaire tekst
• CTA's volgen Groen-op-Groen Omgekeerd (wit gevuld) + Omlijnd op Donker (witte omtrek) combinatie

Uitklapper / Accordeon

• Duur: 300ms (--expanderDuration)
• Timingcurve: cubic-bezier(0.25, 0.46, 0.45, 0.94) — een beheerste ease-out
• Gebruikt voor FAQ-secties op Rewards en de cadeaupagina

Cookietoestemmingsmodule

Donkergroene modale kaart bovenaan de pagina met "Akkoord" (groen gevuld) en "Voorkeuren beheren" (omlijnd) knoppen. Verschijnt bij eerste bezoek; te sluiten.

Productdetailcomponenten (PDP-kenmerkcluster)

Een herhalend componentcluster gebruikt op menupagina's (bijv. /menu/product/40498/iced voor een drankdetail, /menu/product/.../nutrition voor voedingsfeiten). Deze breiden de componentenlijst uit zonder tokens te wijzigen.

Maatoptieselectie

• Horizontale rij van 4 bekerpicogramknoppen (Tall / Grande / Venti / Trenta)
• Elk item: bekersilhouetpicogram bovenaan, maatnaam eronder (16/700 in Starbucks-Green), vloeistof-ounce bijschrift (13/400 in Text Black Soft)
• Actieve status: een groene cirkelomtrekring (2px solid #00754A) rondom het geselecteerde bekerpicogram
• Inactief: geen ring, dezelfde typografie
• Volbreedte rij, gelijkmatige afstand
• Radius van container: 12px of vlak; individuele picogrammen zijn 50% cirkelvormig
• Opvulling: 16px 24px intern

Add-in / Melkselectie (omlijnde rechthoek)

• Achtergrond: #ffffff
• Rand: 1px solid #d6dbde (Invoerrand)
• Radius: 4px
• Volbreedte in zijn kolom
• Zweef-label boven bovenste rand: "Add-ins" / "Milk" / "Add-ins" — 13/700 in Text Black, hoofdletters, 0.325px letterafstand
• Weergegeven waarde gecentreerd (bijv. "Ice", "Coconut", "Strawberry Fruit Inclusions scoop"): 16/400 Text Black
• Chevron-neer-icoon rechts in Text Black Soft
• Focus: rand verschuift naar Green Accent (#00754A)

Numerieke Stappenregelaar

• Ingebed in een Add-in-rij wanneer een hoeveelheid vereist is (bijv. Strawberry Fruit Inclusions scoop)
• − min-knop + aantalnummer + + plus-knop, allemaal inline rechts van het label
• Knoppen: cirkelvormig 32×32px met 1px solid #d6dbde rand, neutraal grijs icoon
• Aantalnummer: 16/700 Text Black gecentreerd

Aanpassen Knop

• Achtergrond: #ffffff
• Tekst: #00754A (Green Accent)
• Rand: 1.5px solid #00754A
• Radius: 50px (volronde pil)
• Opvulling: 14px 40px (ruimer dan standaardpillen — dit is een secundaire primaire actie)
• Label: "Customize" met een goud fonkelend ✨ icoon links ingezet
• Gebruikt voor: het betreden van de drankpersonalisatiestroom na maat-/melkselectie

Aan Bestelling Toevoegen Knop (PDP)

• Achtergrond: #00754A (Green Accent)
• Tekst: #ffffff
• Radius: 50px
• Opvulling: 14px 32px
• Vastgespeld rechtsboven op de productkaart en/of rechts uitgelijnd binnen de winkelsbeschikbaarheidsband
• Zelfde scale(0.95) actief gedrag als andere primaire CTA's

Rewards Kostenpil — "200★ item"

• Achtergrond: transparant
• Rand: 1px solid #cba258 (Gold)
• Tekst: #cba258 (Gold)
• Radius: 50px (volronde pil)
• Opvulling: 4px 12px
• Inhoud: "200★ item" waarbij ★ een klein gevuld sterrenglyph is — geeft aan hoeveel Rewards Stars vereist zijn om dit item in te wisselen
• Lettertype: Proxima Nova 13/700 met 0.5px letterafstand
• Uitsluitend gebruikt op producten die inwisselbaar zijn via Rewards

Productbeschrijvingsband

• Volbreedte donkergroene band (#1E3932 House Green)
• Bevat van boven naar beneden:
  1. Rewards Kostenpil (goud) indien van toepassing
  2. Productbeschrijving bodytekst in wit (16/400/1,5)
  3. Voedingssamenvatting inline ("140 calories, 25g sugar, 2.5g fat") met info-icoon tooltip — 14/700 wit
  4. "Full nutrition & ingredients list" omlijnde-wit-op-groen pil knop
• Opvulling: 32px verticaal
• Verschijnt onder de primaire productkoptekstband

Ingrediënten- / Voedingstabel

• Tweekolomsopmaak op de Voedingspagina
• Linkerkolom: "Ingredients" koptekst + lijst of "Not available for this item" plaatshouder tekstblok met een verklarende alinea in Text Black Soft 14/400
• Rechterkolom: "Nutrition" koptekst + label/waarde-rijen
• Elke rij: voedingsstoflabel (Proxima Nova 14/400) links, waarde (bijv. "140 calories", "25g", "205 mg**") rechts, gescheiden door een 1px solid #e7e7e7 haarlijntje eronder
• Voetnoot voor cafeïne/asterisktekens in 13/400 Text Black Soft onderaan
• Herbruikbaar patroon voor regelgevingconforme voedingstabellen

Winkelsbeschikbaarheidsselectie

• Verschijnt op donkergroene kenmerkband boven de maatoptierij
• Volbreedte afgeronde rechthoek met transparant-wit interieur
• Tekst: "For item availability, choose a store" in wit, 14/400
• Rechterkant: chevron-neer-aanduiding + boodschappentas SVG-icoon in witte omtrek
• Radius: 4px
• Hoogte: ~48px

PDP Broodkruimelpad

• "Menu / Refreshers / Pink Energy Drink" spoor boven de producttitel
• Scheidingsteken: / schuine streep in Text Black Soft
• Huidige pagina is niet gelinkt, vorige pagina's zijn onderstreepte green-accent-links
• Lettertype: 14/400 Proxima Nova
• Verschijnt op alle PDP-pagina's

Terug Chevron-link (PDP voeding / detail sub-pagina's)

• "← Back" tekstlink boven sectiekoppen op de voedingspagina
• Tekst in Green Accent (#00754A) 14/700 Proxima Nova
• Links chevron < in hetzelfde groen
• Alternatief voor volledig broodkruimelpad op diepe subpagina's

5. Opmaakprincipes

Ruimtesysteem

Rem-gebaseerde semantische schaal (verankerd 1rem = 10px):

Token	Rem	Pixels	Typisch gebruik
--space-1	0.4rem	4px	Kleinste inline opvulling
--space-2	0.8rem	8px	Kleine tussenruimte, knop verticale opvulling
--space-3	1.6rem	16px	Standaard — kaartopvulling, buitenste goot xs
--space-4	2.4rem	24px	Sectie binnenste ruimte, buitenste goot md
--space-5	3.2rem	32px	Grote ruimte tussen secties
--space-6	4rem	40px	Grote tussenruimten, buitenste goot lg, heldcrate
--space-7	4.8rem	48px	Sectie-naar-sectie-ruimte
--space-8	5.6rem	56px	Zeer grote ademruimte — Frap-hoogte
--space-9	6.4rem	64px	Breedste sectie-opvulling

Goot-tokens:

• --outerGutter: 1.6rem (16px, standaard / mobiel)
• --outerGutterMedium: 2.4rem (24px, tablet)
• --outerGutterLarge: 4.0rem (40px, desktop)

Universele ritme-constante: 1.6rem (16px) verschijnt op elke pagina als de standaard buitenste goot, kaartopvulling-basislijn en body-tekstgrootte 3 — de meest frequente ruimte-eenheid van het systeem.

Raster & Container

• Kolombreedte-schaal: --columnWidthSmall: 343px / Medium: 500px / Large: 720px / XLarge: 1440px
• Cadeaukaartgrid gebruikt een 3-5-koloms responsief raster van ~343px tegels
• Rewards-statussectie: 3-kolomns donkergroene panelen bij lg+ breekpunten
• Held: asymmetrische splitsing 40% (afbeelding) / 60% (inhoud) via --headerCrateProportion / --contentCrateProportion

Witruimtefilosofie

Witruimte draagt het gevoel van "volop ruimte in het café." Sectie-opvulling is ruimhartig (40–64px). Inhoudsblokken worden gescheiden door witruimte in plaats van scheidingslijnen. Het crème canvas (#f2f0eb) is zelf een visuele ademteug tussen witte kaarten en groene kenmerkendbanden.

Afrondingsschaal

Waarde	Gebruik
12px	Kaarten, modale vensters, menu-item-tegels (--cardBorderRadius)
12px 12px 0 0	Volbreedte feedbacktab (alleen bovenaan afgerond)
50px	Alle knoppen — volronde pilradius (--buttonBorderRadius)
50%	Ronde iconen, Frap zwevende knop, avatarminiaturen
Speciaal	3.3333%/5.298% elliptisch voor Starbucks-Visa-Card mockups (--svcRoundedCorners)

6. Diepte & Elevatie

Niveau	Behandeling	Gebruik
Kaart	0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)	Standaard inhoudskaarten — een fluisterzachte dubbele schaduw
Globale navigatie	0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)	Drielaagse zachte lift op de vaste bovenste balk
Frap Basis	0 0 6px rgba(0,0,0,0.24)	Basishalo rondom de zwevende ronde CTA
Frap Omgevend	0 8px 12px rgba(0,0,0,0.14)	Gestapelde richtinggevende omgeving — laat de Frap naar voren drijven
Cadeaukaart	Lichte slagschaduw rondom geïllustreerde foto	Fysiek-kaartgevoel voor cadeaupanelen
Starbucks Card (SVC)	drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))	Gestapelde SVG-slagschaduwen voor Starbucks Card-visuals

Schaduwfilosofie: Fluisterzacht, gelaagd over effen — het systeem gebruikt nooit een enkele zware slagschaduw. In plaats daarvan stapelt het 2–3 laag-alpha schaduwen met verschillende offsets om echte omgevings- en directe belichting te simuleren. De Frap-knop is het meest verheven element op elke pagina.

Decoratieve Diepte

• Geen gradiëntsysteem — oppervlakten zijn effen kleurblokken
• Kleurblokbanding draagt waargenomen diepte (donkergroene banden lezen als "verzonken kenmerkendzones" tussen crème/witte lichaamssecties)
• SVG-filterschaduwen op Starbucks-Card-visuals voegen een lichte 3D-fysicaliteit toe zonder box-shadow

7. Wel & Niet

Wel

• Gebruik Neutral Warm (#f2f0eb) of Ceramic (#edebe9) als paginacanvas in plaats van puur wit — het warme crème is kenmerkend
• Wijs de groentinten toe aan hun beoogde oppervlakterol — Starbucks Green voor koppen, Green Accent voor CTA's, House Green voor diepe banden, Uplift voor decoratief
• Houd de tracking strak op -0.01em / -0.16px op SoDoSans door het hele systeem
• Gebruik 50px volronde pilradius op elke knop zonder uitzondering
• Pas transform: scale(0.95) toe als de universele knop actieve status
• Reserveer Gold uitsluitend voor Rewards-statusceremonemomenten
• Gebruik SoDoSans voor bijna alles; schakel over naar Lander Tall schreef alleen voor Rewards-redactionele koppen; reserveer Kalam-script voor Careers "bekernaam"-momenten
• Stapel 2–3 laag-alpha schaduwen in plaats van één zwaardere slagschaduw voor elevatie
• Gebruik de ronde Frap-CTA als de persistente zwevende bestelingang op elk winkeloppervlak
• Laat het crème canvas ademen tussen inhoudskaarten — gebruik witruimte, geen scheidingslijnen

Niet

• Gebruik geen puur wit als paginacanvas — de warme crèmetemperatuur is essentieel
• Kies niet één "merkgroen" — het viertrapps groene systeem is opzettelijk; alleen #006241 overal gebruiken vlakt het merk af
• Gebruik Gold niet als universeel accent — het is uitsluitend een Rewards-signaal
• Maak de hoeken van knoppen niet vierkant — de 50px pil is universeel
• Voer geen gradiëntvullingen in — het systeem is doorlopend kleurblok
• Onderscheid h1 en h2 niet door grootte — de hiërarchie komt van gewicht + kleur (600 Starbucks-Green vs 400 Text Black)
• Gebruik geen puur zwart voor bodytekst — rgba(0,0,0,0.87) past bij het warme canvas
• Sla de scale(0.95) actieve feedback op knoppen niet over — het is een kenmerkende micro-interactie
• Stapel geen enkelvoudige zware schaduwen; stapel altijd 2–3 laag-alpha schaduwen
• Voer geen schreve lettertypen of scripts in de hoofdwinkelstroom in — ze horen thuis in Rewards- en Careers-contexten respectievelijk

8. Responsief Gedrag

Breekpunten

Afgeleid van componentbreedtetokens en progressieve navigatiehoogten:

Naam	Breedte	Belangrijkste wijzigingen
xs	< 480px	Globale navigatie 64px; hamburgermenu; eénkolomsopmaak; pilknoppen volbreedte
Mobiel	480–767px	Globale navigatie 72px; cadeaukaartgrid 2-koloms; kaartopvulling wordt strakker
Tablet	768–1023px	Globale navigatie 83px; cadeaukaartgrid 3-koloms; held-splitsing begint te verschijnen
Desktop	1024–1439px	Globale navigatie 99px; cadeaukaartgrid 4-koloms; volledig asymmetrische held 40/60
XLarge	1440px+	Inhoud begrensd op --columnWidthXLarge; cadeaukaartgrid 5-koloms; extra crème marge

Aanraakdoelwitten

• Pilknoppen bij 7px 16px opvulling meten ~32px hoog — onder het WCAG AAA-minimum van 44px voor alleen-aanraakoppervlakken. Op mobiel kan knopopvulling visueel worden vergroot om aan het minimum te voldoen.
• Zwevende ronde Frap-knop bij 56px is ruim boven het minimum.
• Frap gebruikt --frapTouchOffset: calc(-1 * .8rem) om het tikgebied 8px voorbij de visuele rand uit te breiden.
• Formulier zweef-label invoervelden vergroten hun labellettergrootte op mobiel (1,6rem basis vs 1,9rem desktop) — gemakkelijker te tikken en te lezen op armslengte.

Inklapstrategie

• Globale navigatiehoogte schaalt progressief: 64 → 72 → 83 → 99px over breekpunten, niet één enkele waarde
• Held-splitsing klapt in: 40/60 asymmetrische splitsing → gestapeld (afbeelding boven, inhoud eronder) op mobiel
• Cadeaukaartgrid: 5-koloms → 4-koloms → 3-koloms → 2-koloms → 1-koloms over breekpunten met aangepaste kaartbreedten
• Kenmerkendbanden: Blijven volbreedte maar tekst + afbeelding stapelen verticaal op mobiel
• Buitenste goot schaalt: 16px → 24px → 40px naarmate de viewport groter wordt
• Rewards 3-kolomns statuspanelen: Stapelen naar één kolom op mobiel

Beeldgedrag

• Heldproductfotografie crop strakker verticaal op mobiel; inhoud wordt het visuele anker
• Cadeaukaartillustraties bewaren beeldverhouding; kaartgrid herstroomt
• opacity 0.3s ease-in fade-in-overgang bij afbeeldingslading (voorkomt storend verschijnen)
• Rewards app-in-hand fotografie schaalt proportioneel; nooit uitgerekt

9. Agent Promptgids

Snelle Kleurenreferentie

• Primaire CTA: "Green Accent (#00754A)"
• Primaire CTA-tekst: "White (#ffffff)"
• Merkkop: "Starbucks Green (#006241)"
• Kenmerkband / voettekst: "House Green (#1E3932)"
• Paginacanvas: "Neutral Warm (#f2f0eb)"
• Kaartcanvas: "White (#ffffff)"
• Koptekst op licht: "Text Black (rgba(0,0,0,0.87))"
• Bodytekst op licht: "Text Black Soft (rgba(0,0,0,0.58))"
• Bodytekst op donkergroen: "Text White Soft (rgba(255,255,255,0.70))"
• Rewards accent: "Gold (#cba258)"
• Rewards tekst: "Rewards Green (#33433d)"
• Destructief: "Red (#c82014)"

Voorbeeldcomponentprompts

1. "Maak een primaire Starbucks CTA-pilknop met Green Accent (#00754A) achtergrond, witte tekst 'Explore our afternoon menu', SoDoSans lettertype op 16px gewicht 600 met -0.01em letterafstand, 50px rand-radius (volronde pil), 7px 16px opvulling. Pas transform: scale(0.95) toe als de actieve status met een 0.2s ease overgang."

2. "Ontwerp een inhoudskaart met White (#ffffff) achtergrond op 12px rand-radius, gelaagde schaduw 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24). Vul inhoud 16–24px (--space-3 t/m --space-4). Plaats op een Neutral Warm (#f2f0eb) paginacanvas met 16px tussenruimte naar gezusterlijke elementen."

3. "Bouw de Frap zwevende ronde bestelknop — 56px diameter, Green Accent (#00754A) vulling, wit boodschappentasicoon gecentreerd. Gelaagde schaduw: 0 0 6px rgba(0,0,0,0.24) + 0 8px 12px rgba(0,0,0,0.14). Vaste positie rechtsonder met -0.8rem aanraakoffset. Actieve status laat de omgevende schaduw zakken naar 0 8px 12px rgba(0,0,0,0) met scale(0.95)."

4. "Bouw een donkergroene kenmerkband — volbreedtesectie met House Green (#1E3932) achtergrond. Linkerkolom: witte SoDoSans h2 op 24px gewicht 600, gevolgd door een Text White Soft (rgba(255,255,255,0.70)) bodytekstalina en een CTA-rij met twee knoppen (Wit-gevuld met Green Accent-tekst voor primair, Omlijnd-op-Donker witte rand voor secundair). Rechterkolom: productfotografie. Splitverhouding 40/60, verticaal gestapeld onder 768px."

5. "Maak een Rewards-statuskaart — House Green (#1E3932) paneel met 12px rand-radius, gekleurde gradiënt bovenste streep (Bronze/Silver/Gold niveau). Titel in SoDoSans 24px gewicht 600 in wit. Voordelen lijst als witte opsommingstekens met rgba(255,255,255,0.70) secundaire bijschriften. Onderste progressietekst in Text White Soft. Stapel 3 panelen in een raster bij lg+, één kolom op mobiel."

6. "Ontwerp een cadeaukaartpaneel — kaartradius overeenkomend met 12px, gevuld met een geïllustreerde foto (handgetekend aquarelgeschilderd gevoel) als het gehele oppervlak. Subtiele slagschaduw laat het aanvoelen als een fysieke kaart op het crème canvas. Groepeer onder een categorielabel ('Spring', 'Thank You', 'Birthday') in SoDoSans 24px gewicht 400 boven het raster."

7. "Maak een Starbucks productdetailkoptekst — House Green (#1E3932) band met broodkruimelpad 'Menu / Refreshers / Pink Energy Drink' in 14/400 wit boven de producttitel in SoDoSans 32/700 hoofdletters wit. Productfoto gecentreerd onder titel. Onder foto: een 4-kolomns maatselectierij — elke bekerknop toont een verticaal bekersilhouet, maatnaam ('Tall' / 'Grande' / 'Venti' / 'Trenta') in 16/700 wit, en vloeistof-ounce in 13/400 Text White Soft. De geselecteerde maat wikkelt het bekericoon in een 2px solid #00754A cirkelring."

8. "Bouw een Starbucks aanpasstroom — onder de maatselectie, 3 gestapelde omlijnde-rechthoek invoervelden (witte achtergrond, 1px solid #d6dbde rand, 4px radius). Elk heeft een zweef-label ('Add-ins', 'Milk', 'Add-ins') boven de bovenste rand in 13/700 Text Black hoofdletters. Waarde gecentreerd (bijv. 'Ice', 'Coconut'). Rechts: chevron-neer in Text Black Soft. Voor de scoop-rij, embed een numerieke stappenregelaar (− 1 + met cirkelvormige 32px omlijnde knoppen). Onder alle drie velden: omlijnde groene 'Customize' pil met goud fonkelend icoon, 50px radius, 14px 40px opvulling. Combineer met een Green Accent gevulde 'Add to Order' pil in dezelfde rij."

9. "Ontwerp een Starbucks productbeschrijvingsband — volbreedte House Green (#1E3932) onder de productkoptekst. Bovenaan: een goud-omlijnde '200★ item' Rewards Kostenpil (50px radius, 4px 12px opvulling, goud #cba258 rand en tekst). Eronder: productbeschrijving in wit 16/400/1,5. Voedingsinline-samenvatting in wit 14/700 ('140 calories, 25g sugar, 2.5g fat') met info-icoon tooltip. Omlijnd-wit-op-groen pilknop 'Full nutrition & ingredients list'. 32px verticale opvulling."

10. "Maak een Starbucks voedingstabel — tweekolomsopmaak binnen een witte kaart. Linkerkolom: 'Ingredients' koptekst (24/400 Text Black), gevolgd door ingrediëntenlijst of 'Not available for this item' plaatshouder alinea in 14/400 Text Black Soft. Rechterkolom: 'Nutrition' koptekst, dan label/waarde-rijen (voedingsstoflabel links, waarde rechts) gescheiden door 1px solid #e7e7e7 haarlijntjes. Typografie: labels in 14/400 Text Black, waarden in 14/700 Text Black rechts uitgelijnd. Voetnootasterisktekens in 13/400 Text Black Soft onderaan."

Iteratiegids

Bij het verfijnen van bestaande schermen gegenereerd met dit ontwerpsysteem:

1. Focus op ÉÉN component tegelijk
2. Verwijs naar specifieke kleurnamen en hex-codes uit dit document
3. Gebruik beschrijvende taal ("warm crème canvas," "viertrapps groen systeem") naast exacte waarden
4. Bewaar de 50px pil + scale(0.95) actieve status universeel
5. Controleer of de groenen zijn toegewezen aan hun correcte rol (Green Accent voor CTA, Starbucks Green voor kop, House Green voor band)
6. Voer geen gradiënten in — het systeem is kleurblok
7. Houd de SoDoSans tracking op -0.01em / -0.16px door het geheel

Bekende Hiaten

• SoDoSans is een propriëtair lettertype dat niet beschikbaar is op Google Fonts — gebruik bij publieke implementatie Inter of Manrope als vervanger en documenteer de uitwisseling
• Lander Tall (Rewards schreef) is ook aangepast — vervang door Iowan Old Style, Lora of Source Serif Pro
• Specifieke per-component animatietimings buiten de paar gedocumenteerde (--duration: 0.4s, --iconTransition: all ease-out 0.2s, --expanderDuration: 300ms) zijn niet voor elk interactief oppervlak vastgelegd
• Volledig formulierfoutstatus-styling (rode randdikte, icoonplaatsing) zichtbaar in het tint-token maar niet uitputtend geëxtraheerd
• Careers-paginaspecifieke componenten (bekernaamskaart, zoekradiogrid) worden gerefereerd in tokennamen maar worden niet gedekt door deze extractie
• Starbucks Visa Card / Starbucks-Card (SVC) gedetailleerde mockupspecificaties worden gesuggereerd door --svcRoundedCorners- en --svcShadowFilter-tokens maar zijn niet volledig gedocumenteerd