@dante · E-commerce & Retail
A two-canvas commerce system: cinematic black hero pages with thin 330-weight Neue Haas Grotesk display type, flipped against cream-mint transactional surfaces, unified by a single black-and-mint pill button vocabulary.
A cinematic commerce platform that runs two parallel design tracks sharing typographic DNA but diverging sharply in canvas polarity — and that choice is the brand. The marketing and product-narrative pages live on pure-black canvases (#000000) with full-bleed merchant photography, giant Neue Haas Grotesk Display headlines set at a thin weight of 330, and a single white-stroked black pill CTA. The transactional pages — pricing, signup, dashboards — flip to a cream-mint canvas (#ffffff / #fbfbf5) with pastel aloe and pistachio greens, the same pill vocabulary in inverse polarity, and Inter for UI body. Whitespace is the most valuable asset on the cinematic track and tightens on the transactional one.
Two canvases, never blended: Canvas Night (#000000) with elevated #0a0a0a cards and a teal-shifted #1e2c31 for the rare dark surface with depth; Canvas Light (#ffffff) and the barely-warm Canvas Cream (#fbfbf5) for transactional surfaces. Aloe (#c1fbd4) and pistachio (#d4f9e0) greens are reserved for the light track — they signal commerce and growth and never appear behind type or on black pages. A neutral shade ladder (#d4d4d8 to #3f3f46) drives text hierarchy, and cool muted tones (#9dabad, #9797a2, #bdbdca, #99b3ad) quiet the tertiary footer links on dark surfaces.
Three families across a strict split. Neue Haas Grotesk Display at thin weights 330-500 handles every display, headline, and editorial moment — the thin cut is the brand, so display sizes never bump above 330. Inter Variable at 420-550 carries all UI body, button labels, captions, and form fields. ui-monospace appears only in code. The OpenType ss03 stylistic set is enabled across every role as a character-level unifier. Tracking lifts to +2.4px on the 96px hero; below 70px it returns to 0. Body runs at 1.5-1.56 line-height; display tightens to 1.0-1.16.
An 8px base with dense 2/4/8 sub-units. Cinematic sections breathe at 128-192px of vertical air with edge-bleeding photography in a ~1440-1600px container; transactional bands tighten to ~48-64px because users are scanning and acting. Body content centers in a ~720-840px reading column. Radius climbs 4 -> 8 -> 12 -> 20px, but buttons and tags are always the 9999px pill — rounded rectangles do not exist for buttons. Depth on dark comes from subtle inset top-edge highlights; on light, from a stack of four tiny drop shadows that produce a soft paper halo around pricing cards.
One pill button vocabulary spans both tracks: black filled primary, white-stroked outline for dark heroes, black-stroked outline for light, and an aloe-mint pill for the featured pricing tier. Pricing cards use white fill with the stacked-shadow halo; the featured tier is signaled by an aloe fill rather than a colored border. Photography is full-bleed and edge-to-edge on the cinematic track, never inset in cards. Nav and footer inherit their page's canvas polarity. Inputs, badges, and tags live only on the light track.
Derived view rendered server-side from package tokens and components — no authored copy.
#000000#000000#ffffff#ffffff#000000#0a0a0a#ffffff#fbfbf5#1e2c31#d4d4d8#a1a1aa#71717a#52525b#3f3f46#e4e4e7#1e2c31#c1fbd4#d4f9e0#9dabad#9797a2#bdbdca#99b3ad"NeueHaasGrotesk Display", Helvetica, Arial, sans-serif"NeueHaasGrotesk Display", Helvetica, Arial, sans-serif"Inter Variable", Inter, Helvetica, Arial, sans-serif"Inter Variable", Inter, Helvetica, Arial, sans-serifui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"ss03"{
"displayXxl": "96px/1.0",
"displayXl": "70px/1.0",
"displayLg": "55px/1.16",
"displayMd": "48px/1.14",
"headingXl": "28px/1.28",
"headingLg": "24px/1.14",
"headingMd": "20px/1.4",
"headingSm": "18px/1.25",
"bodyLg": "18px/1.56",
"bodyMd": "16px/1.5",
"bodyStrong": "16px/1.5",
"caption": "14px/1.49",
"micro": "13px/1.5",
"eyebrowCap": "12px/1.2",
"code": "16px/1.5"
}The pill is the only button shape in the system. Black filled primary, white-stroked outline for cinematic dark heroes, black-stroked outline for light, and an aloe-mint pill for the featured pricing CTA.
Text field on light surfaces: white fill, black ink, 8px radius, 1px hairline border, Inter body at weight 420. Focus lifts the border to solid black.
Standard pricing tier card on the light track: white fill, 12px radius, hairline border, and the signature stacked-tiny-shadow halo for a soft paper depth.
Small pill tag on light surfaces. Aloe-mint signals a feature category; neutral shade-30 for plain markers. Uses the all-caps eyebrow type.
Neue Haas Grotesk Display hierarchy. Display tiers render at thin weight 330 — the brand's loudest, quietest signature — with tracking lifting only on the 96px hero.
Inline link on cinematic pages: white, no underline by default, contextual. Tertiary footer links shift to a cool muted tone with a persistent underline.
Cinematic hero on pure black — 96px thin display headline, negative space instead of a scrim, and a single white-stroked outline pill. Photography does the heavy lifting.
Top nav that inherits its canvas polarity — black on cinematic pages, white on transactional. Wordmark left, links center, two pill buttons right.
Full-width footer on the cinematic black track — columns of cool-toned muted links below a thin display wordmark, with a small legal row and a shade-30 hairline.
Big thin-display figure with an Inter caption label — a magazine-style metric on the light track with top-border-only dividers.
Cinematic pull-quote on black — a thin 55px display statement from a merchant, with a muted cool-tone attribution. The editorial voice of the marketing track.
Mint or neutral pill chip signaling a feature category on light surfaces. All-caps eyebrow type inside a full pill.
Round merchant avatar with a subtle hairline ring. In customer strips, wordmarks read as uniform-height greyscale marks aligned in one row.
Pill tab list inside a shade-30 container on the light track — for switching between Online, Retail, and Wholesale surfaces. The active pill fills white.
A cinematic commerce platform that runs two parallel design tracks sharing typographic DNA but diverging sharply in canvas polarity — and that choice is the brand. The marketing and product-narrative pages live on pure-black canvases (#000000) with full-bleed merchant photography, giant Neue Haas Grotesk Display headlines set at a thin weight of 330, and a single white-stroked black pill CTA. The transactional pages — pricing, signup, dashboards — flip to a cream-mint canvas (#ffffff / #fbfbf5) with pastel aloe and pistachio greens, the same pill vocabulary in inverse polarity, and Inter for UI body. Whitespace is the most valuable asset on the cinematic track and tightens on the transactional one.
Two canvases, never blended: Canvas Night (#000000) with elevated #0a0a0a cards and a teal-shifted #1e2c31 for the rare dark surface with depth; Canvas Light (#ffffff) and the barely-warm Canvas Cream (#fbfbf5) for transactional surfaces. Aloe (#c1fbd4) and pistachio (#d4f9e0) greens are reserved for the light track — they signal commerce and growth and never appear behind type or on black pages. A neutral shade ladder (#d4d4d8 to #3f3f46) drives text hierarchy, and cool muted tones (#9dabad, #9797a2, #bdbdca, #99b3ad) quiet the tertiary footer links on dark surfaces.
Three families across a strict split. Neue Haas Grotesk Display at thin weights 330-500 handles every display, headline, and editorial moment — the thin cut is the brand, so display sizes never bump above 330. Inter Variable at 420-550 carries all UI body, button labels, captions, and form fields. ui-monospace appears only in code. The OpenType ss03 stylistic set is enabled across every role as a character-level unifier. Tracking lifts to +2.4px on the 96px hero; below 70px it returns to 0. Body runs at 1.5-1.56 line-height; display tightens to 1.0-1.16.
An 8px base with dense 2/4/8 sub-units. Cinematic sections breathe at 128-192px of vertical air with edge-bleeding photography in a ~1440-1600px container; transactional bands tighten to ~48-64px because users are scanning and acting. Body content centers in a ~720-840px reading column. Radius climbs 4 -> 8 -> 12 -> 20px, but buttons and tags are always the 9999px pill — rounded rectangles do not exist for buttons. Depth on dark comes from subtle inset top-edge highlights; on light, from a stack of four tiny drop shadows that produce a soft paper halo around pricing cards.
One pill button vocabulary spans both tracks: black filled primary, white-stroked outline for dark heroes, black-stroked outline for light, and an aloe-mint pill for the featured pricing tier. Pricing cards use white fill with the stacked-shadow halo; the featured tier is signaled by an aloe fill rather than a colored border. Photography is full-bleed and edge-to-edge on the cinematic track, never inset in cards. Nav and footer inherit their page's canvas polarity. Inputs, badges, and tags live only on the light track.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/html/index.htmltext/htmladapters/html/styles.csstext/css