Qella · Design System

Brand Reference

A comprehensive reference for colors, typography, components, and spatial decisions. Built on Tailwind v4, shadcn radix-lyra, Geist typefaces, and oklch color space.

Tailwind v4shadcn radix-lyraoklchGeistHugeIcons

01 — colors

Colors

Semantic color tokens defined in oklch color space for perceptual uniformity and wide-gamut display support. All values are mapped through CSS custom properties.

Semantic Palette

background

oklch(1 0 0)

foreground

oklch(0.145 0 0)

primary

oklch(0.646 0.222 41.116)

primary-foreground

oklch(0.98 0.016 73.684)

secondary

oklch(0.967 0.001 286.375)

secondary-foreground

oklch(0.21 0.006 285.885)

muted

oklch(0.97 0 0)

muted-foreground

oklch(0.556 0 0)

accent

oklch(0.97 0 0)

accent-foreground

oklch(0.205 0 0)

destructive

oklch(0.58 0.22 27)

border

oklch(0.922 0 0)

input

oklch(0.922 0 0)

ring

oklch(0.708 0 0)

card

oklch(1 0 0)

Chart Palette

chart-1

oklch(0.837 0.128 66.29)

chart-2

oklch(0.705 0.213 47.604)

chart-3

oklch(0.646 0.222 41.116)

chart-4

oklch(0.553 0.195 38.402)

chart-5

oklch(0.47 0.157 37.304)

Monochromatic warm amber scale — calibrated for single-series data visualization.

02 — typography

Typography

Seven typefaces served from the geist npm package for full glyph support and font-feature-settings access. Sans and Mono for UI; five Pixel variants for display use. Pixel Square is used for the wordmark and decorative accents.

Typefaces

Geist Sans

--font-geist-sans

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Mono

--font-geist-mono

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Pixel Square

--font-geist-pixel-square

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Pixel Grid

--font-geist-pixel-grid

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Pixel Circle

--font-geist-pixel-circle

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Pixel Triangle

--font-geist-pixel-triangle

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Geist Pixel Line

--font-geist-pixel-line

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#$%&*()_+

Type Scale — Geist Sans

5xl

The quick brown fox

4xl

The quick brown fox

3xl

The quick brown fox

2xl

The quick brown fox

xl

The quick brown fox

lg

The quick brown fox

base

The quick brown fox

sm

The quick brown fox

03 — buttons

Buttons

Six variants across four text sizes and four icon sizes. All buttons use rounded-none. The destructive variant uses a tinted background rather than a solid fill.

Variants × Sizes

Variant
xs
sm
default
lg
default
outline
secondary
ghost
destructive
link

Icon Sizes

Variant
icon-xs
icon-sm
icon
icon-lg
default
outline
ghost
destructive

With Icons

04 — badges

Badges

Inline status indicators. 20px height, sharp corners. Five variants mirroring the button system.

Variants

defaultsecondarydestructiveoutlineghost

With Icons

PublishedDraftErrorv1.0.0

In Context

Deployment statusPending→Live

05 — inputs

Inputs

Form controls. Text inputs and textareas are 32px tall at default size. Error states use aria-invalid for accessible validation feedback. All controls inherit the square geometry.

Text Input

Must be a valid email address.

Textarea

This field is required.

Select

06 — cards

Cards

Container component using ring-1 ring-foreground/10 instead of a border. Supports header, content, footer, and action slots. Available in default and sm sizes.

Variants

Basic
Header and content slots only.

Cards use ring-1 ring-foreground/10 for a softer containment edge than a traditional border.

With Footer
Actions live in the footer slot.

The footer renders a top border and consistent padding automatically.

With Action
Top-right header action slot.
Beta

The action slot is positioned via a grid layout inside CardHeader.

Small Size
Reduced padding via data-size="sm".

Compact variant for dense layouts.

Alert Dialog
Confirmation dialogs with media icon.

07 — spacing

Spacing & Radius

4px base unit spacing scale. Border radius is globally 0 (rounded-none) — a deliberate design decision that defines the system's sharp, geometric character.

Spacing Scale

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

20px

space-6

24px

space-8

32px

space-10

40px

space-12

48px

space-16

64px

space-20

80px

space-24

96px

Border Radius

rounded-none

0px

rounded-sm

2px

rounded-md

6px

rounded-xl

12px

rounded-full

∞

The --radius CSS variable is defined at 0.625rem but intentionally overridden everywhere with rounded-none. All components, inputs, cards, dialogs, and badges inherit this zero-radius geometry as a core identity decision.