DESIGN SYSTEM v1

The xdface
color system

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

$ npm install @xdface/tokens

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 / Warning

--xd-xp

#F59E0B

Streak / Error

--xd-streak

#EF4444

Badge

--xd-badge

#8B5CF6

Info

--xd-info

#3B82F6

Surface

--xd-surface

theme-aware

Background

--xd-bg

theme-aware

Semantic state tokens

Success

--xd-success

Error

--xd-error

Warning

--xd-warning

Info

--xd-info
xdface

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

32pxweight 700

Heading 2

24pxweight 700

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

17pxweight 400

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

13pxmuted

const action = tokens.gradient.action

JetBrains Mono14px

Learn · Build · Ship

Gradient text via .gradient-text utility

Components

Buttons & badges

Complete button system — variants, sizes, states, and special types.

Action buttons

.xd-btn-action .xd-btn-sm .xd-btn-lg

Ghost & subtle

.xd-btn-ghost .xd-btn-subtle

Special variants

.xd-btn-danger .xd-btn-loading .xd-btn-icon .xd-btn-full

Usage

Copy these class names directly into your HTML or JSX.

<button class="xd-btn-action">Primary</button> <button class="xd-btn-ghost">Ghost</button> <button class="xd-btn-subtle">Subtle</button> <button class="xd-btn-danger">Danger</button> <button class="xd-btn-action xd-btn-sm">Small</button> <button class="xd-btn-action xd-btn-lg">Large</button> <button class="xd-btn-loading">Loading...</button> <button class="xd-btn-icon">✕</button> <button class="xd-btn-action xd-btn-full">Full Width</button>

Badges

Activo 1,240 XP 7 días Nivel 4 Beta
<!-- base badge — add inline styles for color variants --> <span class="xd-badge">Badge</span> <!-- success variant --> <span class="xd-badge" style="background:rgba(22,163,74,0.12);color:#4ade80;border:1px solid rgba(22,163,74,0.25)"> Activo </span> <!-- XP / warning variant --> <span class="xd-badge" style="background:rgba(245,158,11,0.12);color:#F59E0B;border:1px solid rgba(245,158,11,0.25)"> 1,240 XP </span>

FAB Button

Nueva nota

Card hover lift

Nota de ejemplo

Hover para ver el efecto lift

Sidebar chrome

xdface

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.

Forms

Form components

Inputs, selects, checkboxes, and toggles — all theme-aware with green focus rings.

Text inputs

This is a helper text for more context.
Please enter a valid email address.
This field is disabled.
Pick the plan that fits your needs.
Markdown supported.
.xd-input .xd-select .xd-textarea .xd-input-error .xd-label .xd-helper .xd-error-text

Checkboxes & toggles

.xd-checkbox
.xd-toggle

Complete form example

Usage

All form classes are theme-aware — they respond to the data-theme attribute automatically.

<!-- Label --> <label class="xd-label">Label</label> <!-- Text input --> <input class="xd-input" placeholder="Text input" /> <!-- Error state --> <input class="xd-input xd-input-error" /> <span class="xd-error-text">Error message</span> <!-- Helper text --> <span class="xd-helper">Helper text</span> <!-- Select --> <select class="xd-select">...</select> <!-- Textarea --> <textarea class="xd-textarea"></textarea> <!-- Checkbox --> <input type="checkbox" class="xd-checkbox" /> <!-- Toggle --> <input type="checkbox" class="xd-toggle" />

Feedback

Alerts, progress & more

System feedback components — alerts for status messages, progress bars, tabs, and tooltips.

Alerts

Nota guardada correctamente.
Tu racha se perdera si no completas una leccion hoy.
Error al guardar. Intenta de nuevo.
Hay una nueva version disponible del curso.
.xd-alert .xd-alert-success .xd-alert-warning .xd-alert-error .xd-alert-info
<div class="xd-alert xd-alert-success">Success message</div> <div class="xd-alert xd-alert-warning">Warning message</div> <div class="xd-alert xd-alert-error">Error message</div> <div class="xd-alert xd-alert-info">Info message</div>

Progress bar

Leccion 1 de 4 25%
Leccion 2 de 4 50%
Leccion 3 de 4 75%
Curso completado 100%
.xd-progress .xd-progress-bar
<div class="xd-progress"> <div class="xd-progress-bar" style="width:75%"></div> </div>

Tabs

Contenido de la pestana activa.

.xd-tab-list .xd-tab .xd-tab-active
<div class="xd-tab-list"> <button class="xd-tab xd-tab-active">Active</button> <button class="xd-tab">Tab 2</button> <button class="xd-tab">Tab 3</button> </div>

Tooltip

[data-tooltip]
<button class="xd-btn-action" data-tooltip="Tooltip text"> Hover me </button>

Tokens

Spacing scale

Nine steps from 4px to 96px. Use --xd-space-* CSS variables.

--xd-space-1
4px
--xd-space-2
8px
--xd-space-3
12px
--xd-space-4
16px
--xd-space-5
24px
--xd-space-6
32px
--xd-space-7
48px
--xd-space-8
64px
--xd-space-9
96px

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

Logos & Icons

App favicons

Two variants of the xdface mark — dark and light. Automatically switched via media queries.

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

Usage

Import tokens

One file. Three ways to consume it.

Install

npm install @xdface/tokens

Import

// TypeScript import { tokens } from '@xdface/tokens' // CSS custom properties import '@xdface/tokens/css' // Tailwind preset const preset = require('@xdface/tokens/tailwind')

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 preset

// tailwind.config.js
const preset =
  require('./tailwind.preset');

module.exports = {
  presets: [preset],
}

Motion

Duration & easing

Seven tokens covering speed and feel. Hover the boxes to feel each value.

Duration

fast

100ms

--xd-duration-fast

normal

150ms

--xd-duration-normal

slow

300ms

--xd-duration-slow

slower

500ms

--xd-duration-slower

Easing

default

Standard browser ease

--xd-ease-default

in-out

Material smooth

--xd-ease-in-out

spring

Springy overshoot

--xd-ease-spring

Typography Scale

Text size tokens

Nine steps from xs (11px) to 5xl (48px), each mapped to a CSS custom property.

Display

--xd-text-5xl 3rem

Hero heading

--xd-text-4xl 2.25rem

Section title

--xd-text-3xl 1.875rem

Card heading

--xd-text-2xl 1.5rem

Subheading

--xd-text-xl 1.25rem

Large body

--xd-text-lg 1.125rem

Body text — Inter Regular. Comfortable reading for paragraphs.

--xd-text-base 1rem

Small / UI label

--xd-text-sm 0.875rem

Caption / overline

--xd-text-xs 0.6875rem

Line heights

The quick brown fox
jumps over the lazy dog

tight — 1.2

Headings, display

--xd-leading-tight
The quick brown fox
jumps over the lazy dog

snug — 1.375

Large text

--xd-leading-snug
The quick brown fox
jumps over the lazy dog

normal — 1.5

UI text

--xd-leading-normal
The quick brown fox
jumps over the lazy dog

relaxed — 1.625

Body copy

--xd-leading-relaxed
The quick brown fox
jumps over the lazy dog

loose — 1.85

Long-form prose

--xd-leading-loose

Components v0.1

Cards, skeleton & overlays

New shared utilities in tokens.css — no framework required.

.xd-card / .xd-card-hover

Static card

xdface Vault

Surface bg + border + radius-lg. Use for any content panel.

.xd-card

Hover card

Hover me

Lifts 2px on hover with theme-aware card shadow.

.xd-card-hover --xd-shadow-card-hover

.xd-skeleton

Shimmer animation via @keyframes xd-shimmer · uses --xd-surface and --xd-surface-2

.xd-overlay / .xd-backdrop

.xd-overlay .xd-backdrop --xd-z-overlay (40) --xd-overlay-bg

.xd-kbd

⌘K Search
⌘S Save
Ctrl⇧P Command palette
Esc Dismiss
Tab Focus next
.xd-kbd border-bottom-width: 2px --xd-shadow-xs

Neutral shadow scale

xs

--xd-shadow-xs

sm

--xd-shadow-sm

md

--xd-shadow-md

lg

--xd-shadow-lg

xl

--xd-shadow-xl

card-hover

--xd-shadow-card-hover

Z-index scale

dropdown

--xd-z-dropdown

10

sticky

--xd-z-sticky

20

fixed

--xd-z-fixed

30

overlay

--xd-z-overlay

40

modal

--xd-z-modal

50

popover

--xd-z-popover

60

toast

--xd-z-toast

70

tooltip

--xd-z-tooltip

100