Internal Reference
Style Guide
A living reference of every design token, component, and pattern used across the KURA storefront. All values are production code.
Grid System
Mobile
2 columns, px-5 (20px), gap-[5px]
--grid-col: calc((100vw - 45px) / 2)Desktop
4 columns, lg:px-8 (32px), gap-[5px]
--grid-col: calc((100vw - 79px) / 4)Rules
All pages, carousels, and cards use var(--grid-col)
Card aspect ratio: 4:5
Universal gap: 5px
Universal radius: 5px
Color Palette
kura-dark
#171717
Primary text, icons, buttons
kura-light
#f7f7f5
Selected states, store headers
kura-accent
#5c2e20
Accent, emphasis, bold UI
kura-white
#ffffff
Page sections, card backgrounds
kura-bg
#f5f5f5
Body background
neutral
#666666
Secondary body text
neutral-light
#aaaaaa
Tertiary text, hints
placeholder
#eff0f0
Image placeholder backgrounds
Opacity Scale
100%
Primary text, icons
70%
Nav links
60%
Vendor names
50%
Secondary labels
40%
Tertiary, counters
30%
Placeholders
10%
Subtle borders
Usage
Opacity via Tailwind modifier: text-kura-dark/40
Typography
Fonts
Inter (400) for all UI text. RoadRadio Bold for the KURA wordmark. Tracking: 0.3px. Leading: 1.2.
All Caps
Every text element is uppercase except body descriptions and long-form content (journal articles).
Page Title
Designers
text-[32px] font-extralight leading-[1.2] lg:text-[56px]Hero Statement
It's KURA.
text-[40px] leading-[1.1] lg:text-[45px]Section Title
Stay Connected
text-[14px] uppercase tracking-[0.3px] lg:text-[17px]Body / UI Label
Add to Cart
text-[11px] uppercase leading-[1.2] tracking-[0.3px]Vendor Name
Parure
text-[10px] uppercase tracking-[0.3px] text-kura-dark/60Price
$245.00
text-[11px] leading-[1.2]Category Label
Shops
text-[9px] uppercase tracking-[1.5px] text-kura-dark/50Counter
04/12
text-[11px] leading-[1.2] text-kura-dark/40Glass Treatment
Default
opacity 0.5
Hover / Active
opacity 0.7
Rules
0.5 — buttons, pills, inputs, info cards
0.7 — hover states, dropdowns, drawers, overlays
Always pair with rounded-[5px] + backdrop-blur-[10px]
Never use 0.4, 0.6, 0.8, or 0.85
Spacing and Layout
Page Padding
Mobile: px-5
Desktop: lg:px-8
Top Offset
Mobile: pt-[100px]
Desktop: lg:pt-[175px]
Section Spacing
Mobile: py-[50px]
Desktop: lg:py-[80px]
Interactive Sizes
Icon button: 36px
Nav pill: 60px
Card width: var(--grid-col)
Product Card
Resting
Image only. No overlays.
Vendor
Product Title
$245
Hover
Bookmark, info pill, add to cart.
Does not ship to CA
Warning
Shipping badge, accent color.
Sold Out
Muted glass, disabled.
Buttons and Inputs
Primary
Glass
Outline
Icon Buttons
Glass Input
Glass Dropdown
Newsletter Card
The newsletter card spans 2 grid columns and is centered on the page. Glass background with glass input and primary CTA.
Stay Connected
Be the first to know about new arrivals, exclusive collections, and stories from our makers.
Position
Spans columns 2 and 3
Mobile: full width
col-span-2 lg:col-start-2
Transitions
Colors
transition-colorsButton hovers, link states
Opacity
transition-opacity duration-300Image swaps, hover overlays
Transform
transition-transform duration-300Menu expand, drawers
Drawer Slide
duration-300 ease-outCart, filters, overlays
Responsive Breakpoints
Default
0px+Mobile-first base, 2-col grid
sm:
640px+Grid column adjustments
lg:
1024px+4-col grid, wider padding, larger type
Strategy
Mobile-first. No md:. Jump from 2-col to 4-col at lg:.