Design System
Eureka — the building blocks and reusable components for the Shopify theme.
Base Reset Styles
Global stylesheet configurations and normalisation rules applied to raw element selectors.
Our storefront normalises elements (margins, padding, box-sizing) and establishes core defaults:
box-sizing: border-boxset globally on all elements.- Antialiased text-rendering enabled on the
bodycontainer. - Default heading margins normalised using fluid modular spacing tokens.
Colour Palette Tokens
Eureka brand / neutral / system tokens. Brand names are provisional pending Figma sign-off.
Black
var(--color-brand-black)
White
var(--color-brand-white)
Accent green
var(--color-accent-primary)
Accent dark green
var(--color-accent-secondary)
Blue
var(--color-accent-blue)
Cream
var(--color-surface-cream)
Off-white
var(--color-surface-off-white)
Light grey
var(--color-surface-light-grey)
Text
var(--color-neutral-text)
Primary grey
var(--color-neutral-primary)
Secondary grey
var(--color-neutral-secondary)
Tertiary grey
var(--color-neutral-tertiary)
Border
var(--color-neutral-border)
Success
var(--color-success)
Success bg
var(--color-success-bg)
Error
var(--color-error)
Error bg
var(--color-error-bg)
Warning
var(--color-warning)
Warning bg
var(--color-warning-bg)
Info
var(--color-info)
Info bg
var(--color-info-bg)
Typography Scale
Ivy Presto Headline (headings) + Proxima Nova (body). Self-hosted scaffold — fallback stack renders until the font files land.
| Token | Specs | Preview |
|---|---|---|
| --ds-type-display | Ivy Presto Headline Size: 5.8rem (58px) Weight: 400 · LH 6.96rem |
Large Display |
| --ds-type-h1 | Ivy Presto Headline Size: 4.2rem (42px) Weight: 400 · LH 4.83rem |
Heading 1 |
| --ds-type-h2 | Ivy Presto Headline Size: 3.2rem (32px) Weight: 400 · LH 3.68rem |
Heading 2 |
| --ds-type-h3 | Ivy Presto Headline Size: 1.5rem (15px) Weight: 400 · LH 1.725rem |
Heading 3 |
| --ds-type-h4 | Proxima Nova Size: 1.4rem (14px) Weight: 500 · LS -0.25 |
Heading 4 / label |
| --ds-type-body | Proxima Nova Size: 1.4rem (14px) Weight: 400 · LH 1.89rem |
This is the body copy size representing readable content paragraphs inside layouts. |
| --ds-type-body-sm | Proxima Nova Size: 1.3rem (13px) Weight: 400 |
Small body / meta text used for secondary information. |
| --ds-type-body-xs | Proxima Nova Size: 1.1rem (11px) Weight: 400 |
Extra-small captions and helper text. |
| --ds-type-badge | Proxima Nova Size: 1.0rem (10px) Weight: 500 · UPPER |
Badge label |
Spacing Scale
8px grid (sub-steps 2/4/12 for fine control). Root 62.5% → 1rem = 10px.
--spacing-2
2px
--spacing-4
4px
--spacing-8
8px
--spacing-12
12px
--spacing-16
16px
--spacing-24
24px
--spacing-32
32px
--spacing-40
40px
--spacing-48
48px
--spacing-64
64px
--spacing-80
80px
--spacing-96
96px
--spacing-128
128px
--spacing-160
160px
Logos
Brand logo vector assets registered inside assets/images.json. White variants shown on a dark panel.
logo-primary-black.svg
logo-primary-white.svg
logo-icon-black.svg
logo-icon-white.svg
Favicon
Browser tab / device shortcut mark. NB: verify the two Figma favicon nodes aren't transposed (black/white).
assets/favicon-black.svg · assets/favicon-white.svg
Icons
Inline-SVG Liquid snippets registered in assets/icons.json (46). Design library: Lucide + Streamline Sharp + custom + social + payment.
3d-model
account
arrow-up-right
arrow
caret-down
caret-right
caret
cart
check
clock
close
discount
empty-state
envelope-simple
error
facebook
filters
grid-column
hamburger
home
instagram
minus
padlock
pencil
pinterest
play
plus-toggle
plus
products
search
share
slider-next
slider-prev
snapchat
success
tiktok
trash
tumblr
twitter
unavailable
video
vimeo
youtube
zoom
Fonts
Self-hosted families registered in assets/fonts.json. SCAFFOLD — .woff2 files + licences pending.
Ivy Presto Headline
Heading family (commercial — licence pending)
Weight: 400 · files pending (scaffold)
Proxima Nova
Body family (commercial — licence pending)
Weights: 400, 500 · files pending (scaffold)
Accordion
A vertically stacked set of interactive headings that reveal collapsible content.
Interactive Component
Yes. It comes with default styles that match the minimal, clean aesthetic of the Eureka design, easily customisable with your design tokens.
Yes. It adheres to the WAI-ARIA design pattern, providing full keyboard navigation and correct aria attribute bindings.
{% render 'accordion', items: faq_items %}
Usage Tip: Keep heading labels short to fit nicely on mobile screens.
Use Cases
- Collapsible Frequently Asked Questions (FAQ) components.
- Product detail drawers / dropdown sections (e.g., Shipping, Material Specs).
- Mobile menu secondary lists and category filters.
Best Practices
- Ensure the trigger is a semantic HTML button for accessibility.
- Support keyboard focus visual indicators.
- Keep headings concise; description text should stay readable when expanded.
Blocks
Modular, nested storefront blocks containing structured layouts and settings.
Blocks represent sub-components or content modules (e.g. product cards, slide entries, grid columns) that are nested inside main layout sections.
- Modular & Reusable: Encapsulate styling and schema configs inside standalone settings.
- Dynamic Placement: Can be rearranged, added, or deleted inside parent sections in the Shopify Theme Editor.
Sections
Full-width storefront page slices that merchants customise and rearrange.
Sections form the dynamic layout skeleton of each page template, defining schema settings, storefront spacing controls, and custom block registration.
- Global Sections: Header, Footer, and Announcement Bar instances rendered across multiple templates.
- Content Sections: Featured collections, hero banners, rich text, and slideshows tailored for specific page content.
Copied code variable to clipboard!
