UseYu Design System
A living document of our modular CSS architecture and UI components.
1. Typography
Standardized heading hierarchy and paragraph styles. Driven by src/styles/typography.css.
Page Title (.page-title)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Main Text (.text-main): This is a standard paragraph demonstrating the default text color and line height. It provides excellent readability on both light and dark mode backgrounds.
Muted Text (.text-muted): Used for secondary information, descriptions, and captions.
Primary Text (.text-primary): Used for links and accents.
2. Colors
Core semantic color variables mapped to the theme. Driven by src/styles/variables.css.
4. Form Controls & Toggles
Inputs, selects, and interactive toggles. Driven by src/styles/forms.css.
Text Inputs & Selects (.modern-form)
Toggles & Switches
Mode Selector
Script Toggle
5. Badges & Indicators
Status indicators and inline tags. Driven by src/styles/badges.css.
Catalog Types
Difficulty Tiers
Status Labels
Status Pills (Admin)
Speaker Identities (NPCs)
6. Cards, Callouts & Containers
Standardized content containers. Driven by src/styles/cards.css.
Callouts & Tips
Did you know?
Callouts use flexbox to keep their icons in a separate column so text wraps perfectly.
Offline Limit Reached
You have reached your offline download limit. Upgrade to continue.
Universal Content Card (.content-card)
The Journalist
Diego, a driven pragmatist and journalist, logs in to learn Chinese to expand his reporting in Asia.
Entity List Items (.entity-list-item)
Structural Layout Cards
Settings Card (.settings-card)
A flex-column based card used heavily in user settings profiles. It supports a standardized gap and subtle drop shadow.
Admin Panel (.admin-panel)
A slightly beefier block-based container with generous padding used in back-office interfaces. It includes a subtle fade-in animation by default.
7. Modals & Overlays
Dialogs and Modals. Driven by src/styles/modals.css.
Framework Modals (.fw-modal)
Standard dialogs for settings, contact forms, and confirmations.
App Modals (.app-modal)
Rich media modals for gamification, auth, and checkout.
Dictionary Viewer
The global dictionary entry viewer for rich vocabulary definitions.
8. Data Tables
Horizontally scrolling responsive data tables. Driven by src/styles/tables.css.
| Code / ID | Name | Status | Actions |
|---|---|---|---|
| SUMMER26 | Summer Sale Campaign | Active | |
| NEWYEAR-50 | New Year's 50% Off | Expired |
9. Navigation Tabs
Main and Sub-tabs for content switching. Driven by src/styles/forms.css.
Primary Tabs (.ds-tabs)
Secondary Tabs (.ds-sub-tabs)
10. Empty States & Gating Walls
Placeholders for lists and page-level access locks. Driven by src/styles/cards.css.
No Saved Lessons
You haven't bookmarked any lessons yet. Browse the catalog to find something interesting!
Premium Access Required
This section of the application is restricted to Premium subscribers.
11. Progress Indicators
Standardized loading and completion indicators. Driven by src/styles/progress.css.
Linear Progress Bars (.linear-progress)
Mastery Coloring
Radial Timers (.radial-progress)
Lesson Timeline (.lesson-progress-segments)
Interactive scrub/swipe dragging. Unseen segments are gray; seen segments are blue. Scrubbing is restricted to the furthest seen index.
Standard (10 Items)
Dense (20 Items)
Dense (30 Items)
Dense (50 Items)
12. Asset Management UI (Admin)
Components for the Content-Addressable Storage (CAS) media library and inline editors.
1. Inline Contextual Editor (Overlay)
Enable "Inline Editing" in the sidebar, then hover over the image below to see the admin edit affordance.
Inline Edit Demo
When Admin Edit Mode is active, containers wrap their contents in a relative box with an absolute edit overlay.
2. Media Drag & Drop Zone
Drag and drop images here
Supports JPG, PNG, WEBP up to 15MB. Duplicates are ignored via CAS hashing.
3. Asset Grid (Media Library)
