STYLE GUIDE
Prairie Cedar Workshop — the complete visual design system for Julius Cedar. Every token, component, state, and interaction. Locked for future stages.
Colour Palette
The Cedar Cycle — warm earth tones drawn from Western Red Cedar grain, prairie gold, and charcoal timber. No bright blues, no neon, no SaaS gradients.
Deep Cedar Brown
--primary
Weathered Timber
--secondary
Warm Prairie Gold
--accent
Charcoal Timber
--dark
Natural Parchment
--background
Soft Cedar Dust
--surface
Forest Success
--success
Text
--foreground
Muted Text
--muted-foreground
Borders
--border
Typography
Bebas Neue for headings — large, confident, high contrast. Source Sans 3 for body — readable, professional, friendly.
THE STANDARD IN CEDAR
font-heading · 72px · uppercase · letter-spacing 0.01em
Section Heading
font-heading · 48px
Subsection Heading
font-heading · 36px
Card Heading
font-heading · 24px
Western Red Cedar is naturally resistant to rot, decay, and insects without chemical treatment. It's dimensionally stable, stays cool underfoot, and ages beautifully. For visible surfaces like decks, fences, and siding, cedar delivers a premium look and longer life.
font-body · 18px · line-height 1.65
Premium Product Grades
font-heading · 12px · uppercase · tracking 0.2em
Buttons
Square corners only. No rounded pills. Primary = Deep Cedar Brown. Secondary = outlined. CTA hover = subtle lift, fast transition.
Primary Button
Secondary / Outline
Accent CTA — Warm Prairie Gold
States
All buttons lift 3px on hover with a 0.2s transition.
Form Components
The "Project Manifest" — quote form fields. Square inputs, clear labels, generous spacing.
Input Fields
Select & Textarea
Component Library
Reusable cards for products, testimonials, delivery info, service areas, and blog posts.
Product Cards
Cedar Lumber
Premium Western Red Cedar lumber in all standard dimensions
Cedar Fence Boards
Premium Western Red Cedar lumber in all standard dimensions
Cedar Deck Boards
Premium Western Red Cedar lumber in all standard dimensions
Testimonial Cards
We've been buying cedar from Julius for over 15 years. The quality is always consistent and the guys know their stuff.
Mark T.
Fence Contractor, Saskatoon
First time building a deck and they walked me through everything. Made the whole project easy.
Sarah L.
Homeowner, Saskatoon
The drive-in loading is a game changer. I pull in, they load up, and I'm back on site in 20 minutes.
Dave R.
General Contractor, Martensville
Delivery Information Cards
Local Delivery
Same-day delivery may be available in Saskatoon when scheduling allows. Delivery fees apply.
- Saskatoon
- Subject to scheduling
- Staff-loaded
Drive-In Loading
Pull into our covered loading bay.
- Staff pre-load orders
- No sorting through piles
- Free on-site parking
Service Area Cards
Saskatoon
Local delivery available in Saskatoon. Delivery fees may apply. Visit our yard at 102 71st Street East.
Regina
Pickup at 102 71st Street East, Saskatoon. Our staff loads your order.
Prince Albert
Pickup at 102 71st Street East, Saskatoon. Our staff loads your order.
Blog Cards
How to Choose the Right Cedar Deck Boards
A practical guide to selecting cedar decking grades, dimensions, and finishes for your outdoor project.
5 Tips for Building a Cedar Fence That Lasts
A practical guide to selecting cedar decking grades, dimensions, and finishes for your outdoor project.
How to Stain Cedar Siding for Maximum Longevity
A practical guide to selecting cedar decking grades, dimensions, and finishes for your outdoor project.
Cedar Grain Divider
The signature brand element. A reusable divider inspired by horizontal cedar grain patterns. Appears throughout the site at section transitions, product showcases, CTA separators, and footer transitions.
Variant: Line (default)
Variant: Stamp (with label)
Variant: Plank (stacked bands)
In context — section transition
Section content above
Section content below
Icon System
Line icons with lumberyard-inspired iconography. Cedar products, delivery, building materials, DIY. No corporate or tech icon sets.
Spacing System
Generous whitespace and breathable gutters (64px+) that allow textures and imagery to dominate. Architectural tension between tight technical data and expansive imagery.
Section Padding
py-20 md:py-28 (80px / 112px vertical)
Container Width
max-w-7xl (1280px) with px-6 gutters
Reading Width
max-w-2xl / max-w-3xl for body copy
CTA Sections
Primary CTA: Request a Quote. Secondary CTA: Call Now. Same-day response promise.
CTA — Dark (Charcoal Timber)
CTA with Cedar Grain Divider
NEED HELP CHOOSING?
Call us — we'll guide you to the right product.
Mobile Examples
Mobile first. Sticky Call Now + Request Quote buttons. Large tap targets, readable typography, fast load, smooth scrolling.
Mobile Sticky CTA Bar
JULIUS CEDAR
Mobile Slide-Out Menu
JULIUS CEDAR
PRAIRIE CEDAR WORKSHOP
This design system is locked for all future stages. Quality Materials, Honest Advice, Better Builds.