SC Prints
The tokens and shared components used across the storefront — derived from tailwind.config.js, globals.css and the design system v1 primitives. Live render, not a mockup. Last updated Jun 2026.
Brand
brand/primary
Inkwell Navy
#1a1a2e
Body text, headings, primary surfaces
brand/secondary
Magenta Punch
#ff2e63
Primary CTAs, links, accent bars
brand/accent
Brand Teal
#3dcfc2
Hover states, link hover, cursor trail
brand/background
Soft Light
#eeeeee
Page background, subtle surfaces
Semantic
text/base
#1a1a2e
Primary text (text-ui-fg-base)
text/subtle
rgba(26,26,46,0.72)
Secondary text (text-ui-fg-subtle)
border/base
rgba(26,26,46,0.22)
Dividers, card borders
surface/white
#ffffff
Cards, inputs, secondary buttons
Greyscale (grey/0 → grey/90)
0
#FFFFFF
5
#F9FAFB
10
#F3F4F6
20
#E5E7EB
30
#D1D5DB
40
#9CA3AF
50
#6B7280
60
#4B5563
70
#374151
80
#1F2937
Typeface: Plus Jakarta Sans. Tokens are the text-* utility classes defined in globals.css.
page-title-marketing36 → 48px · SemiboldThe quick brown foxMarketing / content H1 (hero, services, FAQ)page-title-catalog30 → 36px · SemiboldThe quick brown foxCatalog H1 (store, category, collection)section-title32px · SemiboldThe quick brown foxSection heading (SectionHeader h2)text-xl-semi24px · SemiboldThe quick brown foxCard title, sub-section headingtext-large-regular16px · RegularThe quick brown foxLead paragraph, large bodyBase unit 4px (Tailwind scale). The steps below are the ones the storefront actually leans on.
gap-2Icon-to-label, tight inline gapgap-3Between chips / CTA buttonsp-4Card internal paddingmt-5Heading → subhead spacingpx-6Content gutter (content-container)mt-7Subhead → CTA rowpy-14Section vertical rhythm (mobile)radius/soft
2px
Hairline corners, small chips
radius/base
4px
Inputs, list rows
radius/rounded
8px
Buttons, cards, popovers
radius/large
16px
Product cards, large surfaces
radius/circle
9999px
Pills, avatars, badges, contrast-btn
shadow-sm
Buttons, inputs — flat resting state
elevation-card-rest
Cards at rest (Medusa UI token)
elevation-card-hover
Cards on hover (Medusa UI token)
card-lift
Product listing card hover lift
Buttons
Primary & secondary carry an arrow that nudges +2px on hover (the brand micro-interaction). Buttons site-wide also get a scale(0.97) tactile press from globals.css.
Card (hover lift)
Product card
from $24.00
Hover state
28px lift shadow
Section headers
Eyebrow
SectionHeader· align="left"
Eyebrow
90
#111827
text-base-regular14px · RegularThe quick brown foxPrimary body texttext-small-regular12px · RegularThe quick brown foxSecondary text, metadatatext-xsmall-regular10px · RegularThe quick brown foxCaption, fine print, floating labelseyebrow12px · Semibold · capsThe quick brown foxEyebrow / kicker above headingspy-20SectionHeader· align="center"
Chips & badges
Any rounded-full + text-xs element is auto-tinted magenta with a magenta border by a global rule in globals.css.
