Featured
SCM Style Guide
Design tokens, components, and patterns for the Sheltered Cove Marina theme.
Colors
Brand
Primary
#005596 · bg-primary
Primary Dark
#003f73 · bg-primary-dark
Primary Light
#00AFEF · bg-primary-light
Accent Blue
#7ED3F7 · bg-accent-blue
Accent Gold
#FDBE57 · bg-accent-gold
Dark
#1a1a1a · bg-dark
Dark Gray
#31353c · bg-dark-gray
Text
Body
#555555 · bg-body
Body Secondary
#666666 · bg-body-secondary
Emphasis
#333333 · bg-emphasis
Surfaces
Surface
#f5f5f5 · bg-surface
Surface Alt
#f8f8f8 · bg-surface-alt
Surface Muted
#f8f9fa · bg-surface-muted
White
#ffffff · bg-white
Typography
Google Sans Flex (Primary)
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Regular body text at 1rem (20px base) in Google Sans Flex.
Small text — captions, labels, metadata.
Outfit (Display)
Sheltered Cove
Sheltered Cove Marina
Find Your Boat
Heading Scale
H1
Heading One
H2
Heading Two
H3
Heading Three
H4
Heading Four
H5
Heading Five
H6
Heading Six
Buttons
On Light Background
<a href="#" class="btn btn-primary">Label</a>
<a href="#" class="btn btn-dark">Label</a>
<a href="#" class="btn btn-outline">Label</a>
On Dark Background
<a href="#" class="btn btn-white">Label</a>
<a href="#" class="btn btn-outline-white">Label</a>
Button Sizes (with Tailwind overrides)
Shadows
shadow-card
shadow-card-hover
shadow-feature
shadow-feature-lg
Border Radius
rounded-card
8px
8px
rounded-feature
20px
20px
rounded-full
Cards
Inventory Card (In-Stock Boats)
Featured
New
Showroom Card (Catalog Models)
New
New
Blog Card
Safety
•
3 min read
Essential Safety Equipment Every Boater Should Have
The weather is starting to warm, which means boating season is on the horizon! Make sure you have these essentials…
Read More
Maintenance
•
3 min read
How to Winterize Your Boat in 5 Easy Steps
Proper winterization protects your investment and ensures your boat is ready to go when spring arrives…
Read More
Template parts: template-parts/card-inventory.php, template-parts/card-showroom.php, template-parts/card-blog.php
Usage: get_template_part('template-parts/card', 'inventory');
Layout / Containers
container — max-width: 1680px
Links
This is a paragraph with a default link style inside it. Links are primary blue with no underline, darkening on hover.
Utility Reference
| Class | Description |
|---|---|
container | Centered container, max-width 1680px, horizontal padding |
btn | Base button styles (always combine with a variant) |
btn-primary | Primary dark blue background, white text |
btn-dark | Dark gray background, white text |
btn-outline | Transparent background, primary dark border + text |
btn-white | White background, primary text (for dark backgrounds) |
card-boat | Shared card wrapper for inventory & showroom boats (shadow, hover lift) |
card-blog | Blog post card wrapper (shadow, hover lift) |
card-spec | Small pill for boat specs (length, HP, passengers, etc.) |
section-padding | Vertical padding for page sections (5rem top/bottom) |
font-display | Outfit display font |