Adventure
Adventure cards are a good place for the warmer accent tone occasionally, but the shell should still stay disciplined.
Type
Adventure
Season
Spring-Fall
Occasional Highlight
Theme Styleguide
A reference page for the visual system, design tokens, and reusable interface patterns.
Use this page for the rules and primitives. Use the component showcase for fully composed page examples.
This page documents the current theme language: color, typography, spacing, section treatments, buttons, and interactive patterns.
Styleguide Index
Toggle the section list to free up space while you review the page.
Styleguide Index
Toggle the section list to free up space while you review the page.
Overview
The styleguide documents the rules. The showcase demonstrates how those rules get composed into pages.
Keep this page focused on reference material: tokens, type treatments, spacing, and standard patterns.
How to use this page
This is the design reference layer, not a second showcase.
Use the styleguide when you need to confirm the intended treatment for a heading, button, divider, color, or spacing rule.
Use the components showcase when you need to see how those patterns combine into landing pages, location pages, events, and editorial layouts.
Reference page
Rules, tokens, and usage notes
Showcase page
Applied composition examples
Pair this page with a separate WordPress page using the Components Showcase template.
Color System
The palette stays neutral first, with blue as the primary accent and orange as an occasional highlight.
Use the cooler blue accent for primary interactive emphasis. Use the logo orange sparingly for selective emphasis, especially in dividers, badges, or higher-energy adventure moments.
Stone 50
bg-stone-50
#fafaf9
Default page background.
White
bg-white
#ffffff
Panels, cards, and documentation surfaces.
Stone 950
text-stone-950
#0c0a09
Primary heading and dark surface treatment.
Stone 600
text-stone-600
#57534e
Body copy and secondary interface text.
Primary Blue
bg-sky-700
Tailwind sky-700
Default accent for primary actions, editorial headers, and active emphasis.
Blue Soft
bg-sky-50
Tailwind sky-50
Soft accent backgrounds and quiet emphasis surfaces.
Logo Orange
brand-orange
#F36815
Secondary accent. Use occasionally, not as the dominant interface color.
Accent usage
Use color with restraint. Most of the system should still feel neutral and editorial.
Primary Blue Accent
Occasional Orange Accent
Neutral Foundation
Blue
Primary emphasis
Buttons, active states, standard editorial section treatments.
Orange
Selective emphasis only
Adventure moments, accent dividers, display headers, occasional badges.
Typography
Roboto anchors the headings and navigation, while the body stays clean and readable.
This page shows the actual type treatments in use rather than a separate theoretical scale.
Heading and body treatments
Heading samples below use the current theme sizing and font treatment.
Display Heading
Roboto 900 / large hero-scale heading
Move the story forward with stronger visual hierarchy.
Section Heading
Roboto 700 / section-scale heading
Section headings should feel clear, confident, and editorial.
Body Copy
Readable editorial body treatment
Body copy should stay neutral, spacious, and easy to scan. It should not compete with the headings or become too light against the page background.
Nav / Utility Type
Roboto uppercase with tighter tracking
Adventures Locations Events News Shop
Eyebrow / Kicker
Small all-caps editorial utility label
Design Language Reference
Spacing and Containers
The layout system uses consistent container widths, horizontal gutters, and roomy vertical spacing.
Most standard content should sit inside the container rhythm, while only selected heroes and featured moments break out edge-to-edge.
Container rhythm
These examples document the current layout rules already used in the theme.
Standard content container: `container mx-auto px-4 sm:px-8`
Horizontal Gutter
Base pages and sections use `px-4 sm:px-8` as the standard outer padding.
Section Rhythm
Primary styleguide/showcase sections use generous vertical spacing, typically `space-y-16` to `space-y-20`.
Breakout Moments
Overlay heroes and selected featured sections can break to full viewport width for stronger contrast.
Section Headers and Dividers
Section headers and dividers create rhythm without relying on heavy boxed section wrappers.
Use the default header for quiet sections, editorial for the standard upgraded pattern, and display only for higher-impact areas.
Header expressions
These are the canonical section header treatments currently available in the theme.
Default
Default stays restrained and easy to reuse.
This is the baseline for quieter sections where the typography should do most of the work.
Editorial
Editorial is the standard upgraded section treatment.
Use this for most major section openings once the page needs a little more structure.
Display
Display is reserved for stronger moments like adventures or campaigns.
The display variant should feel selective, not routine.
Divider expressions
Dividers are preferred over wrapping every section in a bordered shell.
Editorial Transition
Adventure Transition
Card Patterns
Cards should adapt to content type without becoming separate design systems.
The same shared card language can support blog, adventure, event, and feature moments through content and media choices rather than entirely different chrome.
Core card directions
These examples show how the current card system can stretch across different content types while staying visually related.
Blog
Blog cards should feel editorial and readable first, with image support but no overly promotional treatment.
Category
Blog
Read Time
5 min
Event
Event cards should surface the date and location quickly while still giving the title enough room to breathe.
Date
May 3-4
Location
Jockey's Ridge
Card guidelines
The card shell should stay consistent enough that different content types still feel related on the same page.
Blog
Editorial-first
Readable headline, restrained metadata, optional image.
Adventure
More visual energy
Stronger imagery and occasional orange accent are acceptable, but keep the chrome consistent.
Event
Metadata-led
Date, location, and urgency should be discoverable quickly.
Structure
One shared card language
Prefer adapting the current cards over creating a one-off card type for every content model.
Standard Card
A quieter utility card still has a place in the system.Use the base card for informational support content, quick references, or lower-emphasis side content.
Surfaces and Panels
Panels, alerts, and badges should feel useful and structured, not overly decorative.
The surface system should support information density while keeping the overall site calm and neutral.
Informational surface
Alerts should feel supportive and clear, with color used as meaning rather than decoration.
Success state
Use success sparingly for confirmations or positive system states.
Warning state
Reserve warning for friction, caution, or temporary issues that need attention.
Badges and quiet emphasis
Badges should stay lightweight and mostly informational.
Neutral Badge
Blue Accent
Orange Accent
Success
Warning
Interactive Patterns
Dropdowns, accordions, and form fields should feel direct and predictable.
Motion and styling should support comprehension, not become the main event.
Dropdown pattern
Primary nav dropdowns should stay compact, easy to reach, and visually tied to the navigation rhythm.
Accordion pattern
Accordions should use quiet surfaces and clear open-state cues.
What should open by default? +
Only use a default-open state when one item is clearly the most important thing a visitor needs to read first.
Where should accordions appear? +
Use them for FAQs, event logistics, policy notes, or any long supporting information that should remain scannable.
Field pattern
Form fields should stay straightforward and readable, with clear labels and modest input styling.
A standard field pairs a visible label with a supportive hint when needed.
Example error treatment for invalid input.