DESIGN SYSTEM

Duelgo Visual Language

Design System v1.0

03

Color Palette

Brand colors with exact values for both light and dark modes

Primary Colors

Cyan #0FFFF9 var(--cyan) Headlines (dark), CTAs, borders
Hot Pink #FF4081 var(--hot-pink) Highlights, badges, confetti
Deep Purple #3D1570 var(--deep-purple) Card surfaces (dark mode)
Darkest Purple #0E0840 var(--darkest-purple) Dark mode background
Light Purple #F0E6FF var(--light-purple) Body text on dark
Dark Text #2D1B4E var(--dark-text) Body text on light
Light Gray #F5F5F7 var(--surface) Cards/containers (light)
Chart Purple #9D7FFF var(--chart-purple) Data visualizations
White #FFFFFF var(--bg) Light mode background

Dark / Light Mode

Dark Mode

Heading

Description text here

Action
Light Mode

Heading

Description text here

Action

Contrast Checker

Sample
Pairing
Ratio
Rating
Aa
#0E0840 on #FFFFFF 17.4:1 AAA
Aa
#0FFFF9 on #0E0840 10.3:1 AAA
Aa
#2D1B4E on #FFFFFF 12.9:1 AAA
Aa
#F0E6FF on #0E0840 11.3:1 AAA
Aa
#0E0840 on #0FFFF9 10.3:1 AAA
Aa
#0FFFF9 on #FFFFFF 1.26:1 FAIL Never use as text on white
Aa
#FFFFFF on #FF4081 3.33:1 AA Large Only

Background Colors

#0E0840 — Primary dark background
#3D1570 — Surface / card background (dark mode)
04

Typography

Exact sizes for consistent, clear hierarchy with strong contrast

Display Title
FontMontserrat
Desktop72px
Mobile48px
Weight700
Line Height1.1
Color#FFFFFF / #0E0840
Heading Level 1
FontMontserrat
Desktop56px
Mobile36px
Weight700
Line Height1.2
Color#0FFFF9 / #0E0840
Heading Level 2
FontMontserrat
Desktop40px
Mobile28px
Weight700
Line Height1.2
Color#0FFFF9 / #0E0840
Heading Level 3
FontMontserrat
Desktop28px
Mobile24px
Weight700
Line Height1.2
Color#0FFFF9 / #0E0840
Heading Level 4
FontMontserrat
Desktop20px
Mobile20px
Weight700
Line Height1.3
Color#0FFFF9 / #0E0840
Large body text for introductions and key messaging.
FontInter
Desktop20px
Mobile20px
Weight400
Line Height1.6
Color#F0E6FF / #2D1B4E
Regular body text — the workhorse of your content.
FontInter
Desktop16px
Mobile16px
Weight400
Line Height1.6
Color#F0E6FF / #2D1B4E
Small text for labels, captions, and supporting info.
FontInter
Desktop14px
Mobile14px
Weight400
Line Height1.5
Color#F0E6FF / #2D1B4E
CAPTION TEXT
FontInter
Desktop12px
Mobile12px
Weight600
Line Height1.4
Color#0FFFF9 / #3D1570
Montserrat Bold for all headings · Inter Regular/Semibold for body and captions
05

Spacing & Radius

8px base unit for consistent layouts

Spacing Scale

Micro · 4px · Icon spacing, badge gaps
Base · 8px · Minimum unit, small gaps
Small · 16px · Button padding, list gaps
Medium · 24px · Card padding (mobile)
Large · 32px · Card padding (desktop)
XL · 48px · Section margins
2XL · 64px · Large section breaks
3XL · 96px · Page sections

Border Radius

Subtle · 2px Confetti
Full (pill) Buttons
Large · 16px Predictions
XL · 24px Cards
Full Avatars
06

Buttons & States

Three variants, four states, three sizes

On Dark Background
VariantDefaultHoverActiveDisabled
Primary
Default
Hover
Active
Disabled
Secondary
Default
Hover
Active
Disabled
Accent
Default
Hover
Active
Disabled
On Light Background
VariantDefaultHoverActiveDisabled
Primary
Default
Hover
Active
Disabled
Secondary
Default
Hover
Active
Disabled
Accent
Default
Hover
Active
Disabled

Size Comparison

Small · 12px 24px
Default · 16px 32px
Large · 20px 48px

Shadows

Small
Medium
Large
Glow
Pink Glow
07

Components

Reusable UI patterns for the Duelgo platform

Chat Bubbles

What a goal! ⚽
This match is incredible! 🔥
Best sports app ever!
Home team is dominating 💪
Radius24px 24px 24px 6px
Padding16px 20px
Font Size16px
BG Color#FF4081
Text Color#FFFFFF

Stat Cards

50K+
Active Users
↑ Trending Up
2.5M
Predictions Made
↑ Trending Up
95%
Satisfaction
↑ Trending Up
Card BG#3D1570
Border2px solid #0FFFF9
Radius24px
Number Size48px
Number Color#0FFFF9

Confetti

corner-br
corner-tl
scatter
zoomed crop

Confetti Pattern Rules

1
Source: assets/confetti.svg
2
Shape: Half-circle / quarter-circle forms 6×7 grid of organic rounded shapes at 1724×1614px
3
Color: #FF4081 (Hot Pink)
opacity controlled by placement class
4
Placement classes .confetti-corner-br / .confetti-corner-tl (100% opacity, 60% width) · .confetti-corner-tr / .confetti-corner-bl (100% opacity, 50% width) · .confetti-scatter (100% opacity, 120% width)
5
Technique Single <img> element per placement, cropped by parent overflow:hidden. Replaces dozens of individual dot divs.
6
Accessibility Decorative only: use alt="" (empty alt). pointer-events:none prevents interaction.
08

Presentation Slides

8 essential templates for impactful presentations (16:9, responsive)

SLIDE 1 — TITLE WITH AUTHOR

We are building a
Multimodal AI tool
for Commerce

FY
Fatima Yusuf

Dark background · Display title with color emphasis · Avatar + name

SLIDE 2 — CONTENT OVERVIEW

DUELGO

Overview

The purpose of this document is to present our interactive gaming platform for sports fans.

Duelgo transforms passive viewing into active participation. Fans predict match outcomes in real-time, compete with friends, and earn rewards. Our chat-based interface makes predictions seamless and instant engagement possible. The platform creates a community where every moment matters.

Duelgo Platform
Series 2024 Confidential

Purple surface · Vertical brand label · Lead paragraph in cyan · Body in light purple · Footer metadata

SLIDE 3 — THREE COLUMN

Headline

Subhead

Real-time predictions during live matches. Compete with fans worldwide. Chat-based interface for instant engagement.

Subhead

Earn points for accurate predictions. Climb leaderboards. Unlock achievements and rewards for top performers.

Subhead

Connect with fellow fans. Share strategies. Build your reputation in the community.

Document Name
Series 2024 Confidential

Light purple background · Large headline · Three equal columns · Footer

SLIDE 4 — KEY FEATURES

Key Features

Real-time Predictions

Make instant predictions during live matches with our chat interface

Leaderboards

Compete globally and track your ranking against other fans

Rewards System

Earn points and unlock achievements for accurate predictions

Social Features

Connect with fans, share strategies, build your community

Dark background · Cyan heading · 2×2 feature grid with pink bullet dots

SLIDE 5 — DATA & STATISTICS

Foundation AI Models

Our proprietary models deliver industry-leading accuracy for live sports predictions.

42%

Engagement increase

86%

Prediction accuracy

White background · Large stat numbers · Bar chart visualization · 50/50 split

SLIDE 6 — SECTION BREAK

Chapter Title

Dark background · Centered display title

SLIDE 7 — TESTIMONIAL

Duelgo has completely changed how we watch sports. The real-time predictions keep us engaged throughout every match, and competing with friends makes it even more exciting.

— Sarah Chen, Beta User

Purple surface · Centered large quote · Pink quotation marks · Cyan attribution

SLIDE 8 — CLOSING / CTA

Ready to Play?

Join thousands of fans

Get Started

Dark background · Display title · CTA button

09

Banner Templates

Social media, email, and website hero banner templates with real photography

Social Media Banner

Dark Variant

Light Variant

Hero Banner

Dark Variant

Light Variant

10

Accessibility & Guidelines

WCAG AA compliance and inclusive design requirements

Color Contrast

All text must meet WCAG AA: 4.5:1 minimum ratio

UI components: 3:1 minimum ratio

Never use Cyan (#0FFFF9) as text on white backgrounds

PASS 7.2:1 FAIL 2.1:1

Focus States

2px solid cyan (#0FFFF9) outline on all interactive elements

Focused Button

Touch Targets

Minimum 44×44px for all mobile buttons and links

44px

Reduced Motion

Respect prefers-reduced-motion — disable confetti, float, and decorative animations

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }