Official guidelines for representing FAST across all touchpoints. Premium, precise, built for operators who value clarity over noise.
The FAST wordmark is the primary brand identifier. Set in Inter 900 weight with 0.12em letter-spacing. The lightning bolt icon is the secondary mark for compact spaces (favicons, app icons, 16-32px contexts).
Maintain minimum clear space equal to the height of the "F" character on all sides of the wordmark.
Use gold gradient wordmark on dark backgrounds
Use dark wordmark on light backgrounds
Maintain clear space around the logo
Use the icon alone at small sizes (16-32px)
Stretch, rotate, or distort the wordmark
Change the gradient colors
Place on busy or low-contrast backgrounds
Add effects like shadows or outlines
Built around premium gold on abyss-level black. Gold conveys value and exclusivity. The dark foundation creates depth and focus. Status colors are used sparingly for functional feedback only.
High-contrast neon palette for functional feedback. Used sparingly to draw attention to state changes.
Premium light mode for the widget and operator-facing UIs. Warm cream foundation with deeper gold accents for WCAG AA contrast.
Higher contrast variants for WCAG AA compliance on the #fefcfb background.
Inter is the sole typeface. JetBrains Mono for code. No other fonts are used across any FAST product, documentation, or marketing material.
| Role | Size / Weight |
|---|---|
| Display | 2.25rem / 800 |
| Heading | 1.25rem / 700 |
| Subheading | 0.9375rem / 600 |
| Body | 0.9375rem / 400 |
| Caption | 0.75rem / 500 |
| Micro | 0.7rem / 600 |
FAST speaks with quiet confidence. Our audience is technical decision-makers at sportsbook operators. We demonstrate value through precision and clarity, not hype.
Precise and technical
Confident without arrogance
Direct and concise
Solutions-oriented
Respectful of expertise
Hyperbolic or salesy
Casual or jokey
Condescending or instructive
Vague or hand-wavy
Trendy or buzzword-heavy
The UI lives in near-black space. Layers are distinguished by subtle opacity shifts (0.02 - 0.04), not by color. Glass borders at 0.06 define edges without weight.
Gold is reserved for primary actions, active states, and key metrics. It is never decorative. If everything is gold, nothing is.
Operators need data, not whitespace. Compact layouts with clear hierarchy. Every pixel should serve a purpose.
Animations use cubic-bezier(0.22, 1, 0.36, 1) for a premium feel. Transitions are 200-400ms. Nothing bounces. Nothing overshoots.
Consistent spacing creates rhythm. Border radius creates warmth without softness.
| Element | Value |
|---|---|
| Spacing scale | 4 - 8 - 12 - 16 - 20 - 24 - 32 - 40 - 48 - 56 - 64 - 80 |
| Cards / modals | border-radius: 16-20px |
| Buttons / inputs | border-radius: 10-12px |
| Badges / pills | border-radius: 20px |
| Icons / avatars | border-radius: 8px |
| Glass border | rgba(255, 255, 255, 0.06) |
| Card background | rgba(255, 255, 255, 0.02) |
| Easing curve | cubic-bezier(0.22, 1, 0.36, 1) |
| Transition duration | 200-400ms |
Key values for implementing FAST's visual identity in code.
| Token | Value |
|---|---|
| Font family | Inter (Google Fonts) |
| Code font | JetBrains Mono |
| Gold gradient | linear-gradient(135deg, #c9a227, #dbb94e, #f0d78c) |
| Primary background | #050507 |
| Glass border | rgba(255, 255, 255, 0.06) |
| Nav blur | backdrop-filter: blur(16px) |
| Logo spacing | letter-spacing: 0.12em |
| Logo weight | font-weight: 900 |
Logo files and implementation references.
