Flattened Dash UI Design System
Unified management design language (Skin B / 1px Hairline Standard) across apps/dash (Staff Ops) and home/dash (User Console).
Flattened Dash UI Language
A crisp, high-density management interface built on solid surfaces, single-pixel hairline dividers, and compact Skin B controls. Eliminates thick gutter trenches, multi-layer shadows, and uneven borders across staff operations and user settings.
1. Visual Do's & Don'ts Comparison
Direct resolution of the reference screenshots: Single 1px hairline boundary vs thick gutter trenches.
Double borders, margins, or heavy shadows create a "trench" or thick line between sidebar and main content. It breaks horizontal flow and wastes screen real estate.
A single hairline border (border-inline-end: 1px solid var(--v-color-border)) provides an absolute, pixel-clean boundary that matches Image 1.
2. Design Tokens & Geometry Foundations
The formal palette, typography scale, spacing rules, and 1px hairline law for data-system="admin".
#f1efe8#0f1714#fffdf7#15211d#ffffff#1b2b26#15211d#e3ece8#53605b#9eb1aargba(21, 33, 29, 0.14)rgba(227, 236, 232, 0.16)#0f5a48#49a389#f8faf8#06120d#166534#4ade80#b91c1c#f87171#b45309#f59e0b3. Flattened Component Catalog
Interactive library of button tabs, filter bars, pagination rows, stat tiles, progress cards, split panes, and tables.
1. Button Tabs & Segmented Pills (Images 3 & 5)
1px hairline border group. Active tabs use primary border with subtle 8% tint fill.
2. Filter Toolbar (Image 3)
Inline label layout, 1px inputs and dropdowns, matching height with action buttons.
3. Pagination Bar (Image 3)
1px numeric button row with tabular numeric alignment, active state highlight.
4. Stat Metric Tiles & Archive Coverage Cards (Image 5)
Clean white surface, bold black numbers, muted gray metadata, slim 6px progress bars.
Translation activity
Counters from translation jobs (not archive coverage).
Archive coverage
Manual recount only. A game is fully translated when every comment anchor has Chinese, Vietnamese, and English text.
5. Master-Detail Split Pane (Images 1 & 4)
Single 1px outer border, single 1px vertical divider, clean header divider.
6. Data Table with 1px Hairlines
Single 1px cell borders, row hover, checkbox selection, and badge chips.
| Name | Parent Event | Games | Badges | Type | Actions | |
|---|---|---|---|---|---|---|
| 2011 Huangshan Cup Round 7 ID: g1 | National Grand Masters | 142 | OfficialGrandmaster | Standard | ||
| 2015 WMSG Men Individual Final ID: g2 | World Mind Sports Games | 88 | Championship | Blitz | ||
| 1998 Yinli Cup Master Division ID: g3 | National Master Invites | 210 | HistoricalClassics | Standard | ||
| 2023 National Team Championship ID: g4 | Vietnam National League | 320 | Official | Standard |
4. Live Staff Ops Console Demo (apps/dash)
Full simulation of Archive, Catalog Groups, Filter Bars, Pagination, and Comment Translation with single-line dividers.
Catalog
Archive
Tournaments, events, and collections — open a group to edit games at scale.
| Name | Parent Event | Games | Badges | Actions | |
|---|---|---|---|---|---|
| 2011 Huangshan Cup Round 7 ID: c101 · Updated: 2026-08-19 | National Grand Masters | 142 | OfficialGrandmaster | ||
| 2015 WMSG Men Individual Final ID: c102 · Updated: 2026-08-18 | World Mind Sports Games | 88 | Championship | ||
| 1998 Yinli Cup Master Division ID: c103 · Updated: 2026-08-15 | National Master Invites | 210 | HistoricalClassics | ||
| 2023 National Team Championship ID: c104 · Updated: 2026-08-10 | Vietnam National League | 320 | Official | ||
| 2018 HanDan Cup Super League ID: c105 · Updated: 2026-08-05 | Super Grandmaster Invitational | 64 | Super GM | ||
| 2006 Bailing Cup Masters ID: c106 · Updated: 2026-08-01 | National Champions Cup | 112 | Classics |
5. Live User Console Demo (home/dash)
Full simulation of Direct Messages, CloudDrive, Account Navigation with single-line master-detail split layout.
Direct Messages
Messages
Chat with accepted friends. Blocked users cannot message you.