Design System
Our color system is built on carefully curated palettes that create a cohesive and accessible visual language.
Primary Colors (Blues)
8 shades from mid-tone to deep navy, providing flexibility for UI elements, overlays, and dark themes.
Primary 50
#e4effa
Primary 100
#c8e0f6
Primary 200
#8dc4ee
Primary 300
#5da8d8
RGB(93, 168, 216)
Primary 400
#4b8ab2
RGB(75, 138, 178)
Primary 500
#3b6e8fFKLF
RGB(59, 110, 143)
Primary 600
#366380
RGB(54, 99, 128)
Primary 700
#274a61
RGB(39, 74, 97)
Primary 800
#193344
RGB(25, 51, 68)
Primary 900
#0c1d29
RGB(12, 29, 41)
Primary 950
#06121b
RGB(6, 18, 27)
Secondary Colors (Yellow-Green)
10 shades from bright yellow-green to deep olive, used for accents and calls-to-action.
Secondary 50
#f6ff7b
RGB(246, 255, 123)
Secondary 100
#ebf527
RGB(235, 245, 39)
Secondary 200
#d7e023
RGB(215, 224, 35)
Secondary 300
#c3cc1f
RGB(195, 204, 31)
Secondary 400
#b0b81b
RGB(176, 184, 27)
Secondary 500
#9fa617
RGB(159, 166, 23)
Secondary 600
#7c810f
RGB(124, 129, 15)
Secondary 700
#5c6009
RGB(92, 96, 9)
Secondary 800
#3e4104
RGB(62, 65, 4)
Secondary 900
#222301
RGB(34, 35, 1)
Secondary 950
#151701
RGB(21, 23, 1)
Tertiary Colors (Orange)
2 warm orange shades for subtle accents and highlights.
Tertiary 400
#d97800
RGB(217, 120, 0)
Tertiary 500
#bb650e
RGB(187, 101, 14)
Greyscale
12-step grayscale providing precise control for text, backgrounds, and UI elements.
White
#ffffff
RGB(255, 255, 255)
Grey 50
#f6f6f6
RGB(246, 246, 246)
Grey 100
#e7e7e7
RGB(231, 231, 231)
Grey 200
#d1d1d1
RGB(209, 209, 209)
Grey 300
#b0b0b0
RGB(176, 176, 176)
Grey 400
#888888
RGB(136, 136, 136)
Grey 500
#6d6d6d
RGB(109, 109, 109)
Grey 600
#5d5d5d
RGB(93, 93, 93)
Grey 700
#4f4f4f
RGB(79, 79, 79)
Grey 800
#454545
RGB(69, 69, 69)
Grey 900
#3d3d3d
RGB(61, 61, 61)
Black
#000000
RGB(0, 0, 0)
Utility Colors
Functional colors for user feedback and system messages.
Success Green
#1b8653
RGB(27, 134, 83)
Error Red
#d12828
RGB(209, 40, 40)
Component Colors
Special colors for specific component use cases.
Eyebrow Invert
#ffb68e
RGB(255, 182, 142)
Our typography system uses Canela Text for headings and Outfit for body text, creating an elegant and readable hierarchy with fluid responsive scaling. All letter-spacing values use em units for better accessibility.
Headings
All headings use Canela Text Light (300) with responsive fluid scaling across breakpoints.
Heading 1: The Ultimate Golf Experience
Canela Text Light, Fluid 42px – 56px, Line Height 1.1
Heading 2: Championship Courses Await
Canela Text Light, Fluid 36px – 44px, Line Height 1.2
Heading 3: World-Class Amenities
Canela Text Light, Fluid 27px – 40px, Line Height 1.2
Heading 4: Dining and Recreation
Canela Text Light, Fluid 24px – 32px, Line Height 1.2
Heading 5: Guest Services
Canela Text Light, Fluid 20px – 27px, Line Height 1.2
Heading 6: Details and Features
Canela Text Light, 24px, Line Height 1.2
Heading Variants
Card Titles: Featured Properties
Same as H6 – Canela Text Light, 24px, Line Height 1.2
Canela Text Light, 21px, Line Height 1.2
Sub-Nav Items: Secondary Menu
Outfit Regular, 16px, Line Height 1.6, Letter Spacing 0.03em
Body Text Styles
Body text uses Outfit Light (300) and Regular (400) weights with carefully tuned letter spacing in em units.
Body Intro: Experience three championship golf courses designed by legends of the sport, each offering unique challenges and breathtaking views across 16,000 acres of pristine Florida landscape.
Outfit Regular, Fluid 20px – 32px, Line Height 1.65
Body XLarge: Streamsong offers an unparalleled golf experience with three world-renowned courses, luxury accommodations, and exceptional dining.
Outfit Light, Fluid 16px – 18px, Line Height 1.6, Letter Spacing 0.03em
Body Large: Our championship courses feature dramatic elevation changes, native vegetation, and strategic bunkering that challenge golfers of all skill levels.
Outfit Light, 16px, Line Height 1.8, Letter Spacing 0.03em
Body Base: This is the standard body text used throughout the site for maximum readability. Perfect for longer paragraphs and content-heavy sections.
Outfit Light, 15px, Line Height 1.6, Letter Spacing 0.03em
Body Small: Used for captions, footnotes, and supplementary information that supports the main content.
Outfit Light, Fluid 12px – 14px, Line Height 1.8, Letter Spacing 0.03em
Body XSmall: For metadata, timestamps, and fine print in compact UI elements.
Outfit Regular, Fluid 10px – 12px, Line Height 1.4, Letter Spacing 0.03em
Body Tiny: The smallest text size for legal disclaimers and minimal UI elements.
Outfit Regular, 10px, Line Height 1.2, Letter Spacing 0.03em
Special Text Styles
Special styles for labels, eyebrows, buttons, and forms with accessible em-based letter spacing.
EYEBROW TEXT
Outfit Medium, 14px, Uppercase, Letter Spacing 0.1em
EYEBROW THICK
Outfit Bold, 14px, Uppercase, Letter Spacing 0.2em
LABELS
Outfit Medium, 11px, Uppercase, Letter Spacing 0.2em
LABELS THICK
Outfit Bold, 12px, Uppercase, Letter Spacing 0.2em
Outfit SemiBold, 10px, Uppercase, Letter Spacing 0.2em
NEW: Outfit SemiBold, 11px, Uppercase, Letter Spacing 0.2em
Form Text Styles
NEW: Typography styles specifically designed for form elements.
Form Label
Outfit Regular, 12px, Line Height 1.0
Form Label Tiny
Outfit Regular, 11px, Line Height 1.0
Form Input Text
Outfit Light, 13px, Line Height 1.4
Our button system features four distinct variants with three size options. All buttons use Outfit SemiBold, 10px, uppercase, with 0.2em letter spacing.
Button Variants
Four button styles for different contexts and backgrounds.
Dark Button (Default)
Black background, white text. Hover: Primary 500 (#3b6e8f).
Light Button
White background, grey text. Hover: Primary 500.
Ghost Dark Button
Transparent with grey border. Hover: Primary 500 fill.
Ghost Light Button
Transparent with white border. For dark backgrounds.
Link Styles
Text links with button typography for visual consistency.
Link Groups
Use .link-group for consistent spacing.