Brand Guidelines

Our visual identity system — colors, typography, and components that define the Spree brand

Color Palette

Electric, systematic, and intentional — our color system feels alive, networked, and infrastructure-grade

Primary — Electric Emerald

The flag color. High-saturation emerald for primary CTAs, active states, and key actions. This is unmistakably Spree.

Emerald 400
#2BFFBF
rgb(43, 255, 191)
Emerald 500
#00E6A8
rgb(0, 230, 168)
Emerald 600
#00C891
rgb(0, 200, 145)
Emerald 700
#00A876
rgb(0, 168, 118)

Secondary — Sky & Cyan

Used for gradient accents on bars and design elements, and in dark developer sections. Green-dominant gradients end in this range.

Cyan 400
#4DCFF5
rgb(77, 207, 245)
Sky 500
#5CC3FF
rgb(92, 195, 255)
Teal 600
#2AB8D8
rgb(42, 184, 216)

Anchor Dark — Midnight Core

Infrastructure-grade dark backgrounds. Makes emerald glow, feels OS-level, premium and serious.

Midnight 700
#1F2937
rgb(31, 41, 55)
Midnight 800
#111827
rgb(17, 24, 39)
Midnight 900
#0B1020
rgb(11, 16, 32)
Midnight 950
#070B18
rgb(7, 11, 24)

Neutral — Clean & Controlled

For typography and structure. Neutral should not dominate—Spree is dark-first.

Gray 100
#F4F6F8
rgb(244, 246, 248)
Gray 200
#E5E7EB
rgb(229, 231, 235)
Gray 400
#9CA3AF
rgb(156, 163, 175)
Gray 600
#4B5563
rgb(75, 85, 99)
Gray 800
#1F2937
rgb(31, 41, 55)

Semantic System

Restrained and flat semantic colors to prevent visual chaos

Success
#00E6A8
rgb(0, 230, 168)
Warning
#F59E0B
rgb(245, 158, 11)
Error
#EF4444
rgb(239, 68, 68)
Info
#3B82F6
rgb(59, 130, 246)

Gradients

Subtle gradients add depth and visual interest to our designs

Core Gradient

Subtle radial emerald glow overlay — for active states

radial-gradient(circle at 50% 50%, rgba(43, 255, 191, 0.12) 0%, rgba(11, 16, 32, 0) 50%)
Midnight 900 → Midnight 800 with subtle emerald glow

Medium Gradient

Green-dominant with blue accent — for bars and design elements

linear-gradient(101.99deg, #00E6A8 0%, #2AB8D8 75%, #5CC3FF 100%)
Emerald 500 → Teal 600 → Sky 500

Dark Background

Structured gradient for sections — feels engineered

linear-gradient(180deg, #0B1020 0%, #111827 100%)
Midnight 900 → Midnight 800

Brand Guidelines

Our visual identity system — colors, typography, and components that define the Spree brand

Color Palette

Electric, systematic, and intentional — our color system feels alive, networked, and infrastructure-grade

Primary — Electric Emerald

The flag color. High-saturation emerald for primary CTAs, active states, and key actions. This is unmistakably Spree.

Emerald 400
#2BFFBF
rgb(43, 255, 191)
Emerald 500
#00E6A8
rgb(0, 230, 168)
Emerald 600
#00C891
rgb(0, 200, 145)
Emerald 700
#00A876
rgb(0, 168, 118)

Secondary — Sky & Cyan

Used for gradient accents on bars and design elements, and in dark developer sections. Green-dominant gradients end in this range.

Cyan 400
#4DCFF5
rgb(77, 207, 245)
Sky 500
#5CC3FF
rgb(92, 195, 255)
Teal 600
#2AB8D8
rgb(42, 184, 216)

Anchor Dark — Midnight Core

Infrastructure-grade dark backgrounds. Makes emerald glow, feels OS-level, premium and serious.

Midnight 700
#1F2937
rgb(31, 41, 55)
Midnight 800
#111827
rgb(17, 24, 39)
Midnight 900
#0B1020
rgb(11, 16, 32)
Midnight 950
#070B18
rgb(7, 11, 24)

Neutral — Clean & Controlled

For typography and structure. Neutral should not dominate—Spree is dark-first.

Gray 100
#F4F6F8
rgb(244, 246, 248)
Gray 200
#E5E7EB
rgb(229, 231, 235)
Gray 400
#9CA3AF
rgb(156, 163, 175)
Gray 600
#4B5563
rgb(75, 85, 99)
Gray 800
#1F2937
rgb(31, 41, 55)

Semantic System

Restrained and flat semantic colors to prevent visual chaos

Success
#00E6A8
rgb(0, 230, 168)
Warning
#F59E0B
rgb(245, 158, 11)
Error
#EF4444
rgb(239, 68, 68)
Info
#3B82F6
rgb(59, 130, 246)

Gradients

Subtle gradients add depth and visual interest to our designs

Core Gradient

Subtle radial emerald glow overlay — for active states

radial-gradient(circle at 50% 50%, rgba(43, 255, 191, 0.12) 0%, rgba(11, 16, 32, 0) 50%)
Midnight 900 → Midnight 800 with subtle emerald glow

Medium Gradient

Green-dominant with blue accent — for bars and design elements

linear-gradient(101.99deg, #00E6A8 0%, #2AB8D8 75%, #5CC3FF 100%)
Emerald 500 → Teal 600 → Sky 500

Dark Background

Structured gradient for sections — feels engineered

linear-gradient(180deg, #0B1020 0%, #111827 100%)
Midnight 900 → Midnight 800

Brand Guidelines

Our visual identity system — colors, typography, and components that define the Spree brand

Color Palette

Electric, systematic, and intentional — our color system feels alive, networked, and infrastructure-grade

Primary — Electric Emerald

The flag color. High-saturation emerald for primary CTAs, active states, and key actions. This is unmistakably Spree.

Emerald 400
#2BFFBF
rgb(43, 255, 191)
Emerald 500
#00E6A8
rgb(0, 230, 168)
Emerald 600
#00C891
rgb(0, 200, 145)
Emerald 700
#00A876
rgb(0, 168, 118)

Secondary — Sky & Cyan

Used for gradient accents on bars and design elements, and in dark developer sections. Green-dominant gradients end in this range.

Cyan 400
#4DCFF5
rgb(77, 207, 245)
Sky 500
#5CC3FF
rgb(92, 195, 255)
Teal 600
#2AB8D8
rgb(42, 184, 216)

Anchor Dark — Midnight Core

Infrastructure-grade dark backgrounds. Makes emerald glow, feels OS-level, premium and serious.

Midnight 700
#1F2937
rgb(31, 41, 55)
Midnight 800
#111827
rgb(17, 24, 39)
Midnight 900
#0B1020
rgb(11, 16, 32)
Midnight 950
#070B18
rgb(7, 11, 24)

Neutral — Clean & Controlled

For typography and structure. Neutral should not dominate—Spree is dark-first.

Gray 100
#F4F6F8
rgb(244, 246, 248)
Gray 200
#E5E7EB
rgb(229, 231, 235)
Gray 400
#9CA3AF
rgb(156, 163, 175)
Gray 600
#4B5563
rgb(75, 85, 99)
Gray 800
#1F2937
rgb(31, 41, 55)

Semantic System

Restrained and flat semantic colors to prevent visual chaos

Success
#00E6A8
rgb(0, 230, 168)
Warning
#F59E0B
rgb(245, 158, 11)
Error
#EF4444
rgb(239, 68, 68)
Info
#3B82F6
rgb(59, 130, 246)

Gradients

Subtle gradients add depth and visual interest to our designs

Core Gradient

Subtle radial emerald glow overlay — for active states

radial-gradient(circle at 50% 50%, rgba(43, 255, 191, 0.12) 0%, rgba(11, 16, 32, 0) 50%)
Midnight 900 → Midnight 800 with subtle emerald glow

Medium Gradient

Green-dominant with blue accent — for bars and design elements

linear-gradient(101.99deg, #00E6A8 0%, #2AB8D8 75%, #5CC3FF 100%)
Emerald 500 → Teal 600 → Sky 500

Dark Background

Structured gradient for sections — feels engineered

linear-gradient(180deg, #0B1020 0%, #111827 100%)
Midnight 900 → Midnight 800

Typography

Clear, readable typography hierarchy for optimal user experience

Display Large

Font: System UI / Sans-serif

text-6xl • 3.75rem • 60px

Heading 1

Font: System UI / Sans-serif

text-5xl • 3rem • 48px

Heading 2

Font: System UI / Sans-serif

text-4xl • 2.25rem • 36px

Heading 3

Font: System UI / Sans-serif

text-3xl • 1.875rem • 30px

Heading 4

Font: System UI / Sans-serif

text-2xl • 1.5rem • 24px

Heading 5

Font: System UI / Sans-serif

text-xl • 1.25rem • 20px

Body Large

Font: System UI / Sans-serif

text-lg • 1.125rem • 18px

Body Regular

Font: System UI / Sans-serif

text-base • 1rem • 16px

Body Small

Font: System UI / Sans-serif

text-sm • 0.875rem • 14px

Caption

Font: System UI / Sans-serif

text-xs • 0.75rem • 12px

Real-World Examples

See how our brand elements come together in actual designs — X banner format (1500x500)

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →
Spree×MC

Dark Mode X Banner — 3:1 Aspect Ratio

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →
Spree×MC

Light Mode X Banner — 3:1 Aspect Ratio

Typography

Clear, readable typography hierarchy for optimal user experience

Display Large

Font: System UI / Sans-serif

text-6xl • 3.75rem • 60px

Heading 1

Font: System UI / Sans-serif

text-5xl • 3rem • 48px

Heading 2

Font: System UI / Sans-serif

text-4xl • 2.25rem • 36px

Heading 3

Font: System UI / Sans-serif

text-3xl • 1.875rem • 30px

Heading 4

Font: System UI / Sans-serif

text-2xl • 1.5rem • 24px

Heading 5

Font: System UI / Sans-serif

text-xl • 1.25rem • 20px

Body Large

Font: System UI / Sans-serif

text-lg • 1.125rem • 18px

Body Regular

Font: System UI / Sans-serif

text-base • 1rem • 16px

Body Small

Font: System UI / Sans-serif

text-sm • 0.875rem • 14px

Caption

Font: System UI / Sans-serif

text-xs • 0.75rem • 12px

Real-World Examples

See how our brand elements come together in actual designs — X banner format (1500x500)

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →
Spree×MC

Dark Mode X Banner — 3:1 Aspect Ratio

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →
Spree×MC

Light Mode X Banner — 3:1 Aspect Ratio

Typography

Clear, readable typography hierarchy for optimal user experience

Display Large

Font: System UI / Sans-serif

text-6xl • 3.75rem • 60px

Heading 1

Font: System UI / Sans-serif

text-5xl • 3rem • 48px

Heading 2

Font: System UI / Sans-serif

text-4xl • 2.25rem • 36px

Heading 3

Font: System UI / Sans-serif

text-3xl • 1.875rem • 30px

Heading 4

Font: System UI / Sans-serif

text-2xl • 1.5rem • 24px

Heading 5

Font: System UI / Sans-serif

text-xl • 1.25rem • 20px

Body Large

Font: System UI / Sans-serif

text-lg • 1.125rem • 18px

Body Regular

Font: System UI / Sans-serif

text-base • 1rem • 16px

Body Small

Font: System UI / Sans-serif

text-sm • 0.875rem • 14px

Caption

Font: System UI / Sans-serif

text-xs • 0.75rem • 12px

Real-World Examples

See how our brand elements come together in actual designs — X banner format (1500x500)

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →

Dark Mode X Banner — 3:1 Aspect Ratio

Partnership Announcement

Spree Partners with Mastercard

Bringing infrastructure-grade loyalty rewards to millions of cardholders across the network

Read Announcement →

Light Mode X Banner — 3:1 Aspect Ratio

Ready to Scale

Need Brand Assets?

Download our complete brand kit including logos, colors, and typography guidelines