Professional Style Guide
Curated UI specifications, interactive component standards, responsive typography scales, and responsive micro-animations aligned with Tide Raider's branding system.
1. Color Token System
Color Token
Primary Black#000000
var(--color-primary)Primary color for heavy headers, core layouts, and brand navigation.
Color Token
Swell Blue#60A5FA
var(--color-tertiary)Primary accent mapping out wave suitability, star glows, and active nodes.
Color Token
Badge Gold#D6B588
var(--color-badge)Branding background for locked sessions, Hidden Gems, and active filters.
Color Token
UI Success#10B981
var(--color-ui-success)Indicates optimal conditions matches and verified scraping sources.
Color Token
UI Warning#F59E0B
var(--color-ui-warning)Used for medium suitability scores and moderate ocean hazards.
Color Token
UI Error#EF4444
var(--color-ui-error)Used for extreme warnings, shark incidents, and severe wind limitations.
Color Token
SaaS Canvas Tan#F8F8F8
var(--color-bg-tan)The main page backdrop content surface used for card clusters and lists.
Color Token
Medium Border Tan#E8E8E8
var(--color-border-tan)Clean boundary line separating dashboard widgets and lists.
2. Typography Sandbox
Tide Raider Breaker Intelligence
.heading-1 / --font-size-5xlTide Raider Breaker Intelligence
.heading-2 / --font-size-4xlTide Raider Breaker Intelligence
.heading-3 / --font-size-3xlTide Raider Breaker Intelligence
.heading-4 / --font-size-2xlTide Raider Breaker Intelligence
.heading-5 / --font-size-xlTide Raider Breaker Intelligence
.heading-6 / --font-size-baseInter
Default body typography used for ocean parameters readouts, recent logs comments list, table coordinates, filter selections, and technical charts.
Montserrat
Branded font used exclusively for massive hero titles, primary spot indicators, uppercase promotional cards, and section divisions.
3. SaaS Component Replica Grid
Interactive BeachCard
This is a Premium Hidden Gem break. Unlock to access coordinates, live ratings and recent logs.
Swartkop Point Reef
Hidden GemJames Peterson
"Solid offshore barrels breaking nicely on the mid-tide!"
Filter Selection Tabs
Forecast Badges
4. Interaction & CSS Animation Lab
Glassmorphism Surface
Translucent backdrop container with fine light borders (`.bg-brand-dark`), glowing signals, and gradient textual outlines (`.text-brand-gradient`).
Text Shadow Glow
Uses text shadow layers mapped to primary branding colors (`.neon-text`) to emulate severe alerts, weather warnings, or priority conditions status indicators.
Dynamic Class Tester
Click on the buttons below to dynamically attach classes and test each Tide Raider custom CSS animation state on the wave element below.
5. Spacing Scale & Metrics
Base-20 Layout Spacing Scale
Tide Raider follows a strict base-20 modular layout scaling system for grid margins, column gaps, and widget gutters.
Micro alignment, border paddings, indicator margin gaps.
4px (--spacing-xs)Grid row padding gaps, label tag heights, flex separations.
8px (--spacing-sm)Core card internal padding, sidebars column padding grids.
20px (--spacing-md)Dashboard sections margins, main headers separations.
40px (--spacing-lg)Main Hero header banner tops, huge landing sections gaps.
60px (--spacing-xl)Extreme page top margins, massive container buffers.
80px (--spacing-2xl)Typography Metrics Specifications
Visual guidelines governing line-heights, letter spacing trackings, and relative font sizes across templates.
Default weight mapping out comments list, readouts descriptions.
400 (--font-weight-normal)Default headings titles weight and tags labels emphasis.
500 (--font-weight-bold)Heavy weight mapped to primary titles and strong parameters values.
600 (--font-weight-heading)Extremely tight relative leading reserved strictly for headings.
1.2 (--line-height-tight)Extended readable leading mapping out multi-line descriptive text.
1.5 (--line-height-normal)Used on popup filter dialogs, menus indicators, active states.
0 4px 6px -1px rgba(0, 0, 0, 0.1)