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
Animated Value Cycle Toggles (.shortcut-item)
5. Badges & Indicators
Status indicators and inline tags. Driven by src/styles/badges.css.
Catalog Types
Difficulty Tiers
Catalog Meta & Count Pills
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)
4. Asset Picker Modal
13. Catalog Architecture & Modern Library
Modernized, reusable catalog heroes, interactive filter pills, generative artwork fallbacks, and content cards.
1. Catalog Hero Variants (.catalog-hero-wrapper)
The CatalogHero component powers collection overviews, works browsing, and cinematic work intros with responsive ambient backdrops.
Library Catalog
Explore story-driven series, books, and standalone lessons organized by difficulty and topic.
The Journalist in Beijing
Follow Diego's journey navigating modern Beijing while acquiring essential conversational fluency and cultural nuance. Through authentic conversations with taxi drivers, street vendors, university scholars, and old courtyard neighbors, he unpacks colloquial idioms and modern vocabulary in natural contexts.
Journalistic investigations, everyday urban colloquialisms, and modern Chinese idioms.
2. Segmented Difficulty Filter Pills
Tactile pill controls for difficulty and thematic filtering.
3. Programmatic Book Cover Placeholders
Deterministic, modern abstract vector covers rendered dynamically with 3D-ish isometric book illustrations, curated editorial color palettes, and Chinese calligraphy titles seeded by work ID.
4. Live Catalog Cards (Tightened Layout & Deduplication)
The three core cards of our catalog system: CollectionCard, SeriesCard, and LessonCard. Optimized for mobile above-the-fold density with 2-line clamped descriptions, redundant chapter title prefix stripping (via stripDuplicateChapterPrefix), and consistent Explore Collection / Explore Series action link affordances.
一碗热气腾腾的兰州拉面
Order like a local at a bustling noodle counter late at night in Xi'an and master culinary expressions.
5. Catalog Pagination Controls
Responsive pagination navigation bar supporting large libraries without massive initial DOM payloads.