Agora Design System Deep Dive

1. Brand Overview

Agora’s brand presence is unapologetically tech-forward. The first impression from their site is speed. High-contrast elements, a clean palette dominated by white, black, and electric cyan (#00c2ff), and a typography system that shouts more than it whispers. This is a brand that wants to be seen as a platform for live, real-time interaction — voice, video, streaming — and the design reinforces that immediacy.

The typography choice, Jokker, is bold, geometric, and modern, paired with Arial as a fallback. There’s no serif softness here. The weights go from ultra-light (100) to ultra-bold (900), but most UI elements stick to the mid-heavy range (400–600). This creates a confident, solid feel without being too heavy-handed in body text.

Colors are direct: pure white (#ffffff) for primary surfaces, black (#000000) for anchors, and a single bright cyan (#00c2ff) acting as the main accent. They sprinkle in a handful of functional and accent tones — warm yellows, pinks, greens — but they’re clearly secondary. The palette is tuned for high accessibility in bright/dark contexts, though some accent-on-white combinations may push WCAG contrast limits.

Spacing runs on an 8px base grid, with some anomalies (2px, 7px) suggesting fine-tuning for optical alignment, not just mechanical scaling. Border radii are all over the map, from 4px on small elements to 80px for large avatars or pill shapes. The most common corner style is 12px — clearly the “default” radius for cards, sections, and buttons.

Overall, Agora’s visual language says: fast, technical, interactive. This is a system built for high-energy digital products, not calm editorial experiences. If you’re designing for Agora, you’ll be working with bold type, sharp contrast, and rounded corners that feel modern without being overly playful.

2. Color System

2.1 Primary Colors

Agora’s main brand color is Electric Cyan (#00c2ff). This is the color of CTAs, hover states, and interactive highlights. Cyan signals tech and energy — it’s common in SaaS and live-streaming brands, but Agora’s version is slightly softer than pure #00ffff, giving it a touch of friendliness.

Primary background is White (#ffffff), primary text is Black (#000000). The combination is timeless and ensures high contrast. Compared to competitors like Zoom (which leans into deeper blues), Agora’s cyan feels more modern and less corporate.

2.2 Complete Palette

2.3 Color Relationships

Electric Cyan (#00c2ff) against Black (#000000) is ultra-high contrast (>7:1). White (#ffffff) against Cyan is also good (~4.5:1), but borderline for small text — safe for large UI elements. Medium Gray (#84888b) on White is ~3.5:1 — not WCAG AA for body text, which means it’s best for secondary info, not primary content.

Dark backgrounds (#101010, #131313) paired with White text are extremely accessible, often exceeding 15:1 contrast.

2.4 Usage Guide

• Do use #00c2ff only for interactive elements — buttons, links, hover states.
• Don’t use medium gray (#84888b) for important text; keep it for muted labels.
• Do pair warm accents (#ffc043, #f95959) with dark backgrounds for alerts.
• Don’t overlay cyan on lilac — low contrast, visual noise.
• Do keep backgrounds either pure white or one of the dark shades for consistency.

3. Typography

3.1 Font Families

Primary font: Jokker, fallback to Arial. No serif stacks. Jokker is served via Google Fonts, with Inter also available (likely for body copy in deeper app contexts, though not dominant here).

No variable fonts, no Adobe Fonts.

3.2 Type Scale

Full table includes all extracted values — see JSON in data source.

3.3 Hierarchy

The type scale is aggressive. H1 jumps straight to 160px — huge for web — then drops to 60/56px for section titles. This creates a dramatic visual hierarchy but requires careful balance; otherwise, pages feel top-heavy.

Line heights often sit at ~1.0–1.2 for headings, which tightens appearance. Body text uses 1.4–1.75, keeping it readable. Uppercase is used sparingly — mostly on hero H1 and nav links — to avoid over-shouting.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

4.2 Layout

One breakpoint: 479px — mobile cut-off. This suggests a mobile-first approach, with scaling beyond that point handled fluidly. No fixed container widths extracted, so likely responsive grid with max-widths defined in CSS elsewhere.

5. Visual Elements

Border Radius

Most common: 12px — used on cards, sections, buttons. Other notable radii:

• 4px: small divs
• 8px: cards
• 24px, 25px: pill-like containers
• 72px: pill buttons
• 80px: large circular images
• 50%: perfect circles (avatars)

Shadows

Two styles:

1. Inset dark: rgb(53, 53, 53) 1px 1px 0px 0px inset — used for subtle inner edges.
2. Soft drop: rgba(0,0,0,0.08) 0px 12px 16px -4px, rgba(16,24,40,0.03) 0px 4px 6px -2px — used on elevated surfaces.

Shadows are minimal — depth is often conveyed with borders.

Borders

Common: 1px solid #ffffff (buttons), 1px solid #222 (dividers). Dark shades for container separation.

6. Components

6.1 Buttons

Primary Outline

Default: transparent background, black text, 72px radius, 1px white border. Hover: cyan background, white text, no border. Focus: none.

Solid Dark

Default: #131313 background, white text, 16px padding. Hover: cyan background, white text.

Tertiary

Default: transparent, medium gray text (#84888b), no border. Hover: cyan background, white text.

All buttons share hover behavior: background to #00c2ff, text to white.

6.2 Links

Styles vary:

• White text with underline (footer)
• Black text, no underline, hover to white
• Gray text (#a7aeb5) for muted nav

Uppercase used in nav links.

6.3 Forms

No text inputs extracted in data — possible heavy reliance on framework components (Vuetify).

6.4 Cards

Radius: 12px default. Borders: 1px solid dark shades. Padding: ~12–20px. Shadows minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-electric-cyan: #00c2ff;
  --color-off-white: #f8f8f2;
  --color-gray-medium: #84888b;
  --color-light-salmon: #ffa07a;
  --color-gray-cool: #a7aeb5;
  --color-lime-green: #abe338;
  --color-lilac: #dcc6e0;
  --color-orange-warm: #f5ab35;
  --color-slate-gray: #656f7d;
  --color-light-gray: #d0d4d8;
  /* Typography */
  --font-primary: "Jokker", Arial;
  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-40: 40px;
  --space-80: 80px;
  --space-120: 120px;
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 72px;
  --radius-full: 50%;
  /* Shadows */
  --shadow-inset-dark: rgb(53, 53, 53) 1px 1px 0px 0px inset;
  --shadow-soft-drop: rgba(0,0,0,0.08) 0px 12px 16px -4px, rgba(16,24,40,0.03) 0px 4px 6px -2px;
}

8. AI Coding Assistant Prompt

# Agora Design System Specification

You are an Agora design expert. Build UIs matching their visual language exactly.

## Brand Context
Agora is a real-time engagement platform. Their design is fast, high-contrast, and tech-forward. Bold typography, sharp cyan accents, and a clean black/white base define the look.

## Color Palette
- White: #ffffff — Primary background
- Black: #000000 — Primary text, dark surfaces
- Electric Cyan: #00c2ff — CTAs, hover states, interactive elements
- Off-White: #f8f8f2 — Light panels
- Medium Gray: #84888b — Secondary text
- Light Salmon: #ffa07a — Visual accent
- Cool Gray: #a7aeb5 — Nav links
- Lime Green: #abe338 — Success
- Lilac: #dcc6e0 — Decorative
- Warm Orange: #f5ab35 — Warning
- Slate Gray: #656f7d — Hover borders
- Light Gray: #d0d4d8 — Hover backgrounds

## Typography
Font family: "Jokker", Arial
- H1 hero: 160px, 900, lh 0.80, uppercase
- H1 alt: 60px, 600, lh 1.0
- Button: 22.4px, 400, lh 0.75
- Link: 20px, 400, lh 1.40
- Caption: 14px, 400, lh 1.50

## Spacing & Grid
Base: 8px grid
Values: 2px, 4px, 7px, 8px, 10px, 12px, 16px, 20px, 40px, 80px, 120px

## Border Radius
- sm: 4px — small divs
- md: 8px — cards
- lg: 12px — default cards, buttons
- pill: 72px — pill buttons
- full: 50% — avatars

## Shadows & Depth
- Inset dark: rgb(53,53,53) 1px 1px 0px 0px inset
- Soft drop: rgba(0,0,0,0.08) 0px 12px 16px -4px, rgba(16,24,40,0.03) 0px 4px 6px -2px

## Component Specifications

### Primary Button
Default:
- bg: transparent
- color: #080808
- border: 1px solid #ffffff
- radius: 72px
- padding: 10px 12px
Hover:
- bg: #00c2ff
- color: #ffffff
- border: none

### Solid Dark Button
Default:
- bg: #131313
- color: #ffffff
- padding: 16px
Hover:
- bg: #00c2ff
- color: #ffffff

## Layout & Responsive Rules
- Breakpoint: 479px
- Mobile-first scaling
- Section gaps: multiples of 8px

## Interaction Rules
- Hover: background to #00c2ff, text to white
- Transition: 150ms ease
- Focus: outline none

## DO
- Use only palette colors
- Maintain 8px spacing grid
- Use Jokker for headings
- Keep hover behavior consistent
- Use 12px radius for most containers

## DON'T
- Add shadows outside spec
- Mix sharp and rounded corners
- Use non-palette colors
- Overuse uppercase

## Code Examples

.btn-primary {
  background: transparent;
  color: #080808;
  padding: 10px 12px;
  border-radius: 72px;
  border: 1px solid #ffffff;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #00c2ff;
  color: #ffffff;
  border: none;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-soft-drop);
}

.input {
  border: 1px solid #cfd4d9;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #00c2ff;
  outline: none;
}

9. Summary

TL;DR: Agora’s design system is bold, fast, and high-contrast. Electric cyan drives interactions, heavy Jokker headings establish hierarchy, and the 8px grid keeps layouts tight. Rounded corners (12px default) and minimal shadows balance the intensity.

Brand Keywords:

• tech-forward
• high-contrast
• interaction-focused
• bold-typography
• modern-rounded