Brand system
ROOPON brand guidelines
Logos, colours, typography, spacing, and voice for anyone building ROOPON experiences — marketing, product, docs, and partner materials.
Identity
Logo & wordmark
Use the SVG wordmark when possible. Pick the variant that contrasts with the background — dark ink on light UI, light ink on dark UI or photography.
Wordmark — for light backgrounds
SVG
Light theme, white cards, printed materials on white
Wordmark — for dark backgrounds
SVG
Dark theme, orange hero bands, photography overlays
Logo (PNG)
PNG
Dark backgrounds — social previews, slide decks, tools that need raster
Logo black (PNG)
PNG
Light backgrounds when SVG is unavailable
Identity
Favicon & app icon
Visual language
Colour palette
Brand orange
#FF6B35
--brand-orange
Primary CTAs, highlights, key marketing headings, icons
Brand orange (dark)
#C2410C
--brand-orange-dark
Eyebrows, secondary links, outline button labels, badges
Brand gradient
#FF6B35
Hero bands, marketing CTAs, promotional sections
Foreground
#FAFAFA
--foreground
Primary body and heading text (dark theme default)
Background
#0A0A0A
--background
Page background (dark theme — neutral black, not blue-tinted)
Muted surface
#1F1F1F
--muted
Cards, pills, icon wraps, secondary surfaces
CSS tokens (app)
:root {
--brand-orange: #FF6B35;
--brand-orange-dark: #C2410C;
}
.text-brand-orange { color: var(--brand-orange); }
.text-brand-orange-dark { color: var(--brand-orange-dark); }
.border-brand-orange { border-color: var(--brand-orange); }Visual language
Typography
Gabarito
Display / marketing headingsWeights: 800–900
Australia's Savings Membership
font-family: 'Gabarito', sans-serif
Hero headlines, section titles, pricing emphasis
Inter
UI & body copyWeights: 400–600
Partner discounts and member tools - all from one dashboard.
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif
App UI, paragraphs, forms, navigation, docs
Righteous
Accent (limited)Weights: 400
ROOPON
font-family: 'Righteous', cursive
Optional accent only — do not use for body text or long headings
Layout
Spacing & surfaces
Card surface
rounded-2xl border border-border bg-card shadow-sm
UI
Buttons & CTAs
Content
Voice & usage
Do
- Clear, confident, Australian — not hypey or scammy.
- Lead with member value: savings, bonus entries, tools — not “free money”.
- Giveaway copy must match published terms and real prize values.
- Use “member prize draws” / “giveaways” consistently; avoid lottery/gambling framing.
Don't
- Do not stretch, rotate, or recolour the wordmark outside brand orange / approved SVGs.
- Do not use blue-tinted dark backgrounds — use neutral black (--background).
- Do not set orange body text on orange backgrounds (contrast fail).
- Do not use theme `primary` CSS for brand orange — use --brand-orange tokens.
Official site: https://www.roopon.com · Questions: Contact us
