@dante · E-commerce & Retail
Warm retail-flagship design system: four-tier green apron palette, cream-neutral canvas, tight-tracked SoDoSans, universal 50px pill buttons, and a floating circular order CTA.
A warm, confident retail flagship wearing the green of the storefront apron across every surface. The canvas alternates between a neutral-warm cream (#f2f0eb) and a ceramic off-white (#edebe9) — colors drawn from real store materials — while Starbucks Green anchors hero bands, CTAs, and the Rewards experience. Pages move in color blocks: cream hero → white content → dark House Green feature band → cream utility zone → House Green footer, an espresso-dark bookend around a bright body. The whole system feels like clean café signage: legible, warm, and never shouting.
Four calibrated greens each map to a distinct surface role — Starbucks Green (#006241) for headings, Green Accent (#00754A) for filled CTAs and the floating Frap button, House Green (#1E3932) for deep feature bands and the footer, and Green Uplift (#2b5148) for decorative accents. Gold (#cba258) is reserved strictly for Rewards-status ceremony — never a general accent. The canvas is warm cream, not cold white; body text sits at a warm ~87% black rather than pure black. The system is solid color-block throughout — no gradient tokens.
The proprietary SoDoSans carries nearly every surface with a tight -0.16px / -0.01em tracking that reads confident and friendly. Weight and color — not size — separate hierarchy: H1 and H2 share 24px/36px, split only by weight (600 vs 400) and color (Starbucks Green vs Text Black). Two context-specific swaps stay disciplined: a warm serif (Lander Tall, sub Iowan Old Style / Lora) for Rewards editorial headlines, and a handwritten script (Kalam) for Careers cup-name touches. Open substitutes for SoDoSans: Inter, Manrope, or Nunito Sans.
A rem-based semantic spacing scale anchored at 1.6rem (16px) — the universal rhythm constant used as default gutter, card padding, and body size. Sections breathe generously (40–64px). Every button is a 50px full-pill; cards and modals take 12px; icons and the Frap button are fully circular. Depth is whisper-soft — the system layers 2–3 low-alpha shadows (card 0 0 0.5px / 0 1px 1px at 0.14/0.24 alpha; triple-layer nav lift) instead of one heavy drop shadow, and color-block banding carries perceived depth.
Buttons are universal 50px pills that compress via scale(0.95) on press, mapped by surface: Green Accent filled primary, matching outline secondary, black filled for the join strip, white-on-green inverted inside dark bands. The signature elevation move is the floating circular Frap order button (56px, Green Accent, layered shadow stack) that persists bottom-right over every scrolled surface. Content cards are white 12px tiles with the whisper dual-shadow. Floating-label inputs use a 4px radius and a #d6dbde border that shifts to Green Accent on focus. Rewards surfaces get gold-outlined 200★ cost pills and the serif editorial voice.
Derived view rendered server-side from package tokens and components — no authored copy.
#006241#00754A#1E3932#2b5148#d4e9e2#cba258#dfc49d#faf6ee#ffffff#f9f9f9#f2f0eb#edebe9#000000#212121#6b6b6b#b3b3b3#33433d#c82014#fbbc05#d6dbde#e7e7e7SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serifSoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serifSoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serifSoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif'Lander Tall', 'Iowan Old Style', Georgia, serif'Kalam', 'Comic Sans MS', cursiveui-monospace, Menlo, Consolas, monospace{
"display": "80px/1.20",
"jumbo": "58px/1.20",
"heroLarge": "45px/1.20",
"h1": "24px/1.50",
"h2": "24px/1.50",
"bodyLarge": "19px/1.75",
"body": "16px/1.50",
"small": "14px/1.50",
"micro": "13px/1.50",
"buttonLabel": "14px/1.20"
}Universal 50px full-pill affordances. Green Accent (#00754A) filled for primary CTAs, matching-outline for secondary, Black filled for the join strip, and white-on-green inverted for dark bands. Every button compresses via scale(0.95) on active.
Floating-label field on white with a #d6dbde border and 4px radius; the label lifts and shrinks on focus, and the border shifts to Green Accent (#00754A). Valid fields get a pale mint tint, invalid fields a faint red tint.
White surface tile at 12px radius with a whisper-soft dual shadow (0.14/0.24 alpha) — the workhorse container that sits flat-plus-a-hint-of-lift on the cream canvas.
Small pill marker — greenLight tint for neutral capability tags, House Green filled for inverted, and a gold-outlined Rewards Cost pill (200★) reserved strictly for Rewards-redeemable moments.
SoDoSans hierarchy where weight and color — not size — separate H1 from H2. Both share 24px/36px; H1 is weight 600 in Starbucks Green, H2 weight 400 in Text Black. Tight -0.16px tracking throughout.
Green Accent inline links with an underline; on House Green dark bands links go white. PDP breadcrumbs use a slash separator with the current page unlinked.
Asymmetric 60/40 split hero on the warm cream canvas — SoDoSans headline, Text Black Soft intro copy, and a Green Accent primary paired with an outlined twin. Product photography anchors the 40vw column.
Fixed top bar on white with a three-layer soft shadow, SoDoSans links (Menu · Rewards · Gift Cards), and a right cluster of Find a store, outlined Sign in, and black-filled Join now.
House Green (#1E3932) footer — the espresso-dark bookend — with white column headers, translucent-white utility links, and gold accents around Rewards-related items.
Large SoDoSans numeric figures with a small label — top-border-only dividers, Starbucks Green for the hero figure.
Rewards editorial pull-quote — the one place the warm Lander Tall serif appears — with a Gold opening mark echoing the coffeehouse chalkboard nostalgia.
Category and filter chips above card grids — pale mint, ceramic-cream, or House Green tones, larger and quieter than a Badge.
Round 50% avatars with a soft cream ring — used for account menus and partner rosters, echoing the handwritten cup-name warmth.
Rewards sub-nav tab group beneath the global nav — an underline-active tab list in SoDoSans with a Green Accent active indicator.
A warm, confident retail flagship wearing the green of the storefront apron across every surface. The canvas alternates between a neutral-warm cream (#f2f0eb) and a ceramic off-white (#edebe9) — colors drawn from real store materials — while Starbucks Green anchors hero bands, CTAs, and the Rewards experience. Pages move in color blocks: cream hero → white content → dark House Green feature band → cream utility zone → House Green footer, an espresso-dark bookend around a bright body. The whole system feels like clean café signage: legible, warm, and never shouting.
Four calibrated greens each map to a distinct surface role — Starbucks Green (#006241) for headings, Green Accent (#00754A) for filled CTAs and the floating Frap button, House Green (#1E3932) for deep feature bands and the footer, and Green Uplift (#2b5148) for decorative accents. Gold (#cba258) is reserved strictly for Rewards-status ceremony — never a general accent. The canvas is warm cream, not cold white; body text sits at a warm ~87% black rather than pure black. The system is solid color-block throughout — no gradient tokens.
The proprietary SoDoSans carries nearly every surface with a tight -0.16px / -0.01em tracking that reads confident and friendly. Weight and color — not size — separate hierarchy: H1 and H2 share 24px/36px, split only by weight (600 vs 400) and color (Starbucks Green vs Text Black). Two context-specific swaps stay disciplined: a warm serif (Lander Tall, sub Iowan Old Style / Lora) for Rewards editorial headlines, and a handwritten script (Kalam) for Careers cup-name touches. Open substitutes for SoDoSans: Inter, Manrope, or Nunito Sans.
A rem-based semantic spacing scale anchored at 1.6rem (16px) — the universal rhythm constant used as default gutter, card padding, and body size. Sections breathe generously (40–64px). Every button is a 50px full-pill; cards and modals take 12px; icons and the Frap button are fully circular. Depth is whisper-soft — the system layers 2–3 low-alpha shadows (card 0 0 0.5px / 0 1px 1px at 0.14/0.24 alpha; triple-layer nav lift) instead of one heavy drop shadow, and color-block banding carries perceived depth.
Buttons are universal 50px pills that compress via scale(0.95) on press, mapped by surface: Green Accent filled primary, matching outline secondary, black filled for the join strip, white-on-green inverted inside dark bands. The signature elevation move is the floating circular Frap order button (56px, Green Accent, layered shadow stack) that persists bottom-right over every scrolled surface. Content cards are white 12px tiles with the whisper dual-shadow. Floating-label inputs use a 4px radius and a #d6dbde border that shifts to Green Accent on focus. Rewards surfaces get gold-outlined 200★ cost pills and the serif editorial voice.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css