05 -- Color System
Spectrum on dark.
Gaydar's look is unmistakable -- vivid color moments on deep black. Bold without being loud. Modern without being cold. Green leads, but the full spectrum lives underneath.
Primary Brand Colors
Signal Green
#00FF00
The signature. Logo, online dots, badges, highlights.
Action Green
#30D158
Buttons, send, confirm -- anything you tap.
Action Pressed
#28B54C
Pressed/active button state.
The Spectrum Palette
Presence
#00FF00
The signal. I'm here, I'm visible.
Spark
#EF4444
Chemistry, desire, the moment it clicks.
Radiance
#F59E0B
Celebration, pride, golden hour warmth.
After Dark
#A855F7
Nightlife, exclusivity, evening energy.
Trust
#3B82F6
Safety, verification, the foundation.
Dark Surface Palette
Canvas
#000000
Root background. Pure black, OLED-off.
Near-Black
#050505
Gradient canvas. Just enough warmth.
Surface 1
#0D1117
Cards, list items.
Surface 2
#141414
Elevated cards.
Surface 3
#1C1C1E
Sheets, modals.
Surface 4
#2C2C2E
Input fields.
Functional Colors
Match / Destructive
#EF4444
Match flame, delete, errors.
Warning
#F59E0B
Caution, expiry, time-sensitive.
Info
#3B82F6
Verification badges, informational.
Premium
#A855F7
Special, Pro features.
Color Balance: 70-20-10
70%
Dark
Backgrounds, space, breathing room. The dark canvas is what gives color its power.
20%
White & Gray
Text, UI elements. The structural layer that makes content readable.
10%
Color
The moments that matter. Color is powerful because we use it sparingly. When everything glows, nothing does.
Floating Gradient System
The brand uses a library of ambient atmosphere layers -- soft radial and linear glows floating on near-black canvases. They're not backgrounds. They're moods. Like colored light drifting through a dark room. The effect is bioluminescent.
Warm Glow
Primary -- hero, defaults
Blush + Glow
Romance, connection
Twilight
Privacy, trust, calm
Spectrum Drift
Identity, inclusivity
Spectrum Highlight Gradient
The single sanctioned rainbow in Gaydar. A horizontal four-stop gradient running green → sky → purple → pink, applied to text. This is the only rainbow we use. It exists for one purpose: to make a single word carry the weight of the full community.
Used sparingly, it lands. Used everywhere, it becomes the rainbow-washing we built the brand against. Treat it like a spotlight.
The four stops
| Stop | Name | Hex | Position |
|---|
| 1 | Presence (Signal Green) | #00FF00 | 0% |
| 2 | Open Sky | #38BDF8 | 32% |
| 3 | After Dark | #A855F7 | 66% |
| 4 | Bloom | #F472B6 | 100% |
CSS
background-image: linear-gradient(90deg, #00FF00 0%, #38BDF8 32%, #A855F7 66%, #F472B6 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
When to use it
- One emphasis word per surface where the meaning is "all of us" — inclusivity, community, identity, the whole spectrum collapsed into a single moment. Examples: launch, everyone, spectrum, belong, all.
- Hero headlines for major brand moments: launches, anniversaries, Pride moments, milestones.
- Accent strips on event collateral (1–2 px high), where the gradient itself does the work without text.
When NOT to use it
- Body copy, buttons, links, navigation, or any UI affordance.
- More than one place per surface. If the gradient is on the word "launch," nothing else on the page wears it.
- Light backgrounds. This gradient is built for dark surfaces only.
- As decoration. If you can swap it for a single spectrum color and lose nothing, use the single color instead.
The rule of one
One word. One surface at a time. If you reach for the spectrum gradient twice in the same composition, you're rainbow-washing — pull it back to a single moment.
Accessibility
Every text/background combination meets at least AA contrast.
| Combination | Contrast | Grade |
|---|
| White on Black | 21:1 | AAA |
| Signal Green on Black | 8.6:1 | AAA |
| Gray text (#A3A3A3) on Black | 7.4:1 | AAA |
| Action Green on Black | 6.1:1 | AA |
