BACK TO WORK WORK IN PROGRESS

PROJECT_04 // DIALECT_UI

ONE COMPONENT.
ELEVEN VOICES.

Dialect is a library of voices.

Dialect UI is a Vue 3 component library where every component ships with 11 complete visual implementations, from editorial elegance to brutalist punch to Y2K nostalgia. Same API, completely different look.

#Vue3#DesignSystem#CSS#11Themes
01

CARD_SHOWCASE

Below, the same <DCard> rendered in every dialect simultaneously. No config changes, no CSS overrides, just a different voice.

Refined restraint

editorial

Clean geometry, serif authority, and deliberate whitespace. The newspaper front page as interface.

Systematic clarity

swiss

Grid-locked precision, functional type, and rational color. Design as information architecture.

Raw impact

brutal

Stark contrasts, heavy borders, and unapologetic weight. Every element demands attention.

Sterile precision

clinical

Muted surfaces, hairline dividers, and surgical spacing. The interface disappears behind the data.

Soft dimension

clay

Rounded forms, warm shadows, and tactile depth. Components you want to reach out and touch.

Extruded light

neumorph

Soft raised surfaces and inset wells. The screen becomes a sculpted material.

Hand-drawn warmth

sketch

Wobbly borders, imperfect lines, and notebook charm. Digital UI with analog soul.

Retro-digital glow

y2k

Gloss, gradients, and chrome. The optimistic future that early-2000s interfaces promised.

Playful sugar

candy

Bold pastels, bubbly shapes, and joyful motion. UI that refuses to take itself seriously.

Iridescent fantasy

unicorn

Holographic shifts, aurora gradients, and ethereal glow. Interface as daydream.

Terminal green

phosphor

Monospace grids, scanline flicker, and CRT warmth. The hacker aesthetic, rendered in components.

02

HOW_IT_WORKS

ONE API

Every component has a single, stable API. Props, slots, events stay the same. Only the visual implementation changes per dialect.

CSS TOKENS

Each theme defines its own design tokens like colors, radii, shadows, typography and motion. Components reference tokens, not hardcoded values.

DIALECT PROVIDER

Wrap any subtree in <DDialectProvider> to override the active theme locally. Multiple dialects coexist on one page.

40+ COMPONENTS

Buttons, cards, inputs, modals, charts, navigation, all fully themed. Every component, every dialect, both light and dark mode.

03

TECH_STACK

Vue 3 // Composition API
TypeScript // Full Type Safety
CSS Custom Properties // Design Tokens
Vite // Build Tool
0 Dependencies // Pure Vue + CSS
04

BY_THE_NUMBERS

11Dialects
40+Components
0Dependencies
22Color Modes
05

STATUS

Dialect UI is currently in active development. The core architecture, token system and all 11 theme implementations are in place. Component coverage is expanding. More details and documentation will follow as the project matures.