DESIGN SYSTEM v1

The xdface
color system

A single source of truth for every app in the xdface ecosystem.

Colors

Brand palette

Green → orange is the action gradient. Everything interactive uses this range.

Action Gradient --xd-gradient-action

Action

--xd-action

#16A34A

Action End

--xd-action-end

#EA580C

XP

--xd-xp

#F59E0B

Streak

--xd-streak

#EF4444

Badge

--xd-badge

#8B5CF6

Dark 900

dark-900

#0F0F1A

Surface

--xd-surface

theme-aware

Background

--xd-bg

theme-aware

xd

xdface

dark chrome

Dark Chrome + logo glow

Sidebar & header background gradient

--xd-gradient-dark-chrome

Typography

Type scale

Inter for UI, JetBrains Mono for code. Tight tracking on large sizes.

Display

48px weight 800 tracking -0.03em

Heading 1

32px weight 700

Heading 2

24px weight 700

Body — Inter 17px, line-height 1.7. Used for lesson prose and content areas.

17px weight 400

Caption / muted — 13px, color: text-muted

13px muted

const action = tokens.gradient.action

JetBrains Mono 14px

Learn · Build · Ship

Gradient text via .gradient-text utility

Components

Buttons & badges

Three button variants. Badges for gamification states.

Buttons

Badges

Activo 1,240 XP 7 días Nivel 4 Beta

FAB Button

Nueva nota

Card hover lift

Nota de ejemplo

Hover para ver el efecto lift

Sidebar chrome

xd

xdface

app

Dashboard
Notas
Cursos
Progreso

Deep dark gradient background.
Gradient accent line at top.
Logo glow effect (blur halo).
Active nav: gradient pill + glow.
Inactive: white/35% opacity.

Logos & Icons

App favicons

Two variants of the xdface mark — dark and light.

Dark variant

Dark backgrounds

dark-bg
16
24
32
48
64
128

xdface

dark

+ logo glow

Light variant

Light backgrounds

light-bg
16
24
32
48
64
128

xdface

light

+ logo glow

Same mark, two contexts

app-specific variants

dark

light

Effects

Shadows & glows

Green-tinted shadows reinforce the brand on every interactive element.

Action SM

--xd-shadow-action-sm

Action MD

--xd-shadow-action-md

Action Glow

--xd-shadow-action-glow

Border radius scale

sm

8px

md

12px

lg

16px

xl

20px

full

9999px

Usage

Import tokens

One file. Three ways to consume it.

CSS — any app

@import 'tokens.css';

.btn {
  background:
    var(--xd-gradient-action);
  box-shadow:
    var(--xd-shadow-action-sm);
}

TypeScript

import { tokens }
  from '../design/tokens';

style={{
  background:
    tokens.gradient.action,
}}

Tailwind 4

@theme {
  --color-action:
    #16A34A;
  --color-action-end:
    #EA580C;
}