Phase 2:
Design Implementation

Dawn v15.4.1 → WinSport Design System

WinSport Theme · Shopify 2.0 · Figma to Code

What Changed

10
Files Modified
453
Lines of Custom CSS
5
Color Schemes

Pixel-accurate Figma-to-Shopify conversion demonstrating
custom design system implementation on Dawn theme base.

Color Palette

Beige
#F5F0EB
Dark Navy
#3A3A4A
Deep Navy
#2C2C3A
White
#FFFFFF
Warm Beige
#E8DFD6

Headings

Cormorant Garamond

Serif with italic accents for luxury feel

Body

Work Sans — clean and modern sans-serif for readability and balance.

Light weight (300) for elegant body text

Header

Before — Dawn Default
Dawn default header
After — WinSport
☰
Screenshot: WinSport header
  • Logo position: left → middle-center
  • Menu type: dropdown → drawer (hamburger)
  • Added "SHOP" text link in navigation
  • Cart icon → "BAG" text with count
  • Search icon hidden for minimal aesthetic
  • Announcement bar removed

Hero Banner

Before — Dawn Default
Dawn default hero
After — WinSport
🖼
Screenshot: WinSport hero
  • Height: default → 90vh full-viewport
  • Heading: 4.8rem mobile → 9.6rem desktop Cormorant serif
  • <em> italic accent in "Gear Up for Winter"
  • CTA: solid button → outline "SHOP GEAR" with hover fill
  • Dark overlay for text contrast on imagery

Homepage Sections

Before — Dawn Default
Dawn default homepage
After — WinSport
🏠
Screenshot: WinSport homepage
  • Layout: hero → brand story (image-with-text) → featured collection
  • Featured collection: 4 columns, portrait images, no quick-add
  • Warm beige background (scheme-1) throughout
  • Product cards: transparent bg, serif titles, subtle hover zoom

Product Page

Before — Dawn Default
Dawn product page
After — WinSport
🛍
Screenshot: WinSport product
  • Background: white → dark navy (scheme-2)
  • Simplified: removed image-with-text + multicolumn sections
  • Added collapsible tabs: Materials, Produced In, Categories
  • Related products on light background (scheme-1) for contrast
  • Variant pills with minimal borders, uppercase labels

Collection Grid

Before — Dawn Default
Dawn collection page
After — WinSport
📷
Screenshot: WinSport collection
  • Image ratio: adapt → portrait (fashion-optimized)
  • Grid: default → 4 columns desktop, 2 columns mobile
  • Filters: horizontal layout with minimal borders
  • Quick-add buttons hidden — clean card aesthetic

Footer

Before — Dawn Default
Dawn footer
After — WinSport
✉
Screenshot: WinSport footer
  • Background: white → dark navy (scheme-2)
  • Newsletter input: underline-only minimal style
  • Headings: uppercase, Work Sans, wide letter-spacing
  • Links: opacity hover transition (0.6)

Technical Details

  • ✔ winsport-custom.css — 453 lines custom CSS
  • ✔ theme.liquid — font loading + CSS include
  • ✔ settings_data.json — 5 color schemes
  • ✔ header-group.json — centered layout
  • ✔ header.liquid — SHOP + BAG links
  • ✔ footer-group.json — dark navy scheme
  • ✔ index.json — hero + brand story
  • ✔ product.json — dark scheme + tabs
  • ✔ collection.json — portrait 4-col grid
  • ✔ cart.json — clean white scheme

Approach

  • → Zero modifications to Dawn's core Liquid logic
  • → All styling via single custom CSS overlay (winsport-custom.css)
  • → Layout changes via JSON settings only — fully admin-configurable
  • → Italic accents via <em> tags + font variant loading
  • → Mobile-first responsive with breakpoints at 749px and 990px

Dawn → WinSport

Figma-to-Shopify conversion
demonstrating custom design system implementation
on Shopify 2.0 architecture.

WinSport Theme · Phase 2 Complete
Built on Dawn v15.4.1 · Shopify Online Store 2.0