Storefront cards · deep-green tiles, radius 12, mint prices
Admin motif (Polaris) · embedded product component: light UI, green primary, order rows
Orders3 unfulfilledCreate order
OrderCustomerTotalStatus
#1042Dana Ruiz$120.00Paid
#1041Owen Park$38.00Paid
#1040Priya Shah$89.00Pending
Admin (Polaris) is the product surface: it is the only place the classic green #008060 belongs. Marketing keeps mint #36f4a4 as its single loud accent.
Controls · every variant with hover and disabled, rendered statically
Primary: white full pill (9999px), black text, weight 550, 44 to 56px tall. Secondary: translucent white rgba(255,255,255,.2) chip, radius 4, 47px tall, 16/400. Hover on the white pill is a subtle dim; disabled was not captured, shown here at 40% opacity.
Fields and badges · default and focus, chips
New
Point of Sale
Enterprise
Live
No tabs or segmented control was captured on the marketing surface, so none is shown. Focus ring recipe is not captured: only the mint or white border swap is real.
Typography · Neue Haas Grotesk, one row per role in the spec
Hero (h1)NeueHaasGrotesk · 96/96 · 400 · ~0Sell
Section (h2)NeueHaasGrotesk · 55 · 330 to 400 · 0Your brand has energy
SubheadNeueHaasGrotesk · 20 to 24 · 400 · 0Start, run, and grow your business
BodyNeueHaasGrotesk · 16/24 · 400 · 0Body text at 16px over 24px leading, weight 400, white on dark.
UI / buttonNeueHaasGrotesk · 16 to 18 · 550 · 0Start for free
CaptionNeueHaasGrotesk · 13 to 14 · 400 · 0Caption and fine print, 14px regular.
Display is huge at regular or light weight: type is the hero, not decoration.
Palette · every captured token, grouped
Text
white#ffffff
gray-400#a1a1aa
gray-green#9dabad
black (on pill)#000000
Surfaces and borders
black#000000
ink-900#02090a
green-950#061a1c
green-900#041e18
green-800#102620
navy-950#000a1e
borderrgba(255,255,255,.1)
overlayrgba(255,255,255,.2)
Accent
mint#36f4a4
polaris-green (admin only)#008060
teal glow (§8)rgb(21,112,118)
black-green (§8)rgb(6,26,28)
Buttons are white, never mint. Mint is the single loud accent: a highlighted word, a mark, a link.
Depth, elevation and motion
pill · 9999px
card · 12px
small · 8px
small · 5px
chip · 4px
avatar
Elevation 0: flat on dark, no shadow
Hairline: 1px rgba(255,255,255,.1)
Overlay fill: rgba(255,255,255,.2)
Block contrast: near-black against deep green
Mockup float: soft shadow, numeric recipe not captured
Motion: interactive micro-transitions 150 to 200ms (color, background and border .2s; transform .15s), scroll reveals 300 to 450ms opacity plus translate, and one marquee that crawls at scroll-x 240s. Cinematic, premium pacing. Control heights: primary pill 44 to 56px, secondary chip 47px. Spacing on a 4px grid.