−50%
SHOKZ OpenRun bone-conduction headphones — Grey
8-hour battery, Bluetooth 5.1, 26g, IP67. Free US shipping.
SHOKZ
Dino Design System
The live design system behind guihangmy.com, shown with the site's real stylesheet. Every example below is static markup with fake data — nothing here submits, orders, or charges anything. Switch the theme to see every component under all six themes.
Auto uses Dino Dark at night, like the main site. Glass Light pairs with Glass Dark.
Tokens
Every color on the site flows through these variables. The swatches below read their values live from the active theme, so switching themes updates them. No literal color or font appears past the token block.
Surfaces & text
--bg--card--ink--muted--line--surface2--surface3--band--band-line--nav-ink--tabbar-bgAccent & feedback
--accent--accent-dark--accent-soft--on-accent--warn--dangerOrder status palette
--st-new--st-shipping_us--st-arrived--st-weighed--st-shipped_vn--st-arrived_vn--st-delivered--st-cancelledShape
--radius: — one radius for cards, one smaller step for pills and chips (999px).
Glass themes add a backdrop to the page background itself: the colorful layer the frosted surfaces blur against. Without it, glass reads as flat grey.
Type
Be Vietnam Pro for text, JetBrains Mono for codes and numbers. All sizes are pixels — never rem, em, %, vw, or clamp for font-size. The print page is the only exception (points, for print).
Heading 1 — order detail title
Heading 2 — section title
Heading 3 — card title
Body text. Links look like this and inherit the accent color. Muted text is secondary information, small text is fine print and hints.
Mono: DP-1013 · BG-1014 · 1ZXG9979YW16020033
Inline code uses the same mono face.
Pixel scale
| Role | Desktop | Mobile (≤640px) |
|---|---|---|
| Body | 16px | 14px |
| h1 | 23px | 18px |
| h2 | 19px | 16px |
| h3 | 16px | 14px |
| Small | 14px | 13px |
| Table | 15px | 13px |
| Badge | 12px | 12px |
| Nav | 15px | 15px |
| Form fields | 16px | 16px (never smaller — iOS auto-zooms on focus below 16px) |
Headings outside article content are pinned to the same h2/h3 sizes — unstyled headings fall back to browser em sizes and drift from the scale.
Forms
Display only — nothing here submits. Every control is 38px tall on mobile (44px desktop); checkboxes and radios are 24px; textareas stay multi-line with a 72px minimum. Labels sit above fields, never as placeholders alone.
A hint line under a field, in the same small muted style as every other hint on the page.
Segmented control
input[type=text|email|password|number|url|date|time|datetime-local|file] · select · textarea · .seg
Cards
The card is the site's workhorse surface. Everything below uses the same border, radius, and padding — the differences are content, not chrome.
Standard card
Order DP-1013 — a set of purple blank keycaps, currently shipping in the US. Cards carry the section, its text, and its actions, nothing else.
0đ
All settled — nothing owed.
Nov 2
09:41
09:41
Package received in the US
Tracking 1ZXG9979YW16020033 · weight pending
Step 2 — Weighing
The package is weighed, then a final quote is drafted for review before anything is sent.
Key-value list
- Order
- DP-1013
- Batch
- CH-002
- Tracking
- 1ZXG9979YW16020033
.card · .dash-card · .balance-banner · .event-row · .step · .kv
Tables
Two rules govern every table: the last body row carries no bottom border (inside a card it would double up with the card's own edge), and wide tables scroll inside a frame with a 32px edge fade showing where more content hides.
Plain table
| Order | Item | Status | Total |
|---|---|---|---|
| DP-1013 | Keycap set | Shipping US | 225,000đ |
| DP-1014 | Capacitors | Delivered | 2,595,000đ |
Order table with status accents
| Order | Item | Status |
|---|---|---|
| DP-1015 | Wireless mouse | New |
| DP-1013 | Keycap set, purple blank | Shipping US |
| DP-1014 | TEMCo capacitors | Delivered |
Scrollable table with edge fade
| Order | Item | Weight | Fee | Product | Total | Status |
|---|---|---|---|---|---|---|
| DP-1013 | Keycap set | 600g | 225,000đ | 284,399đ | 509,399đ | Shipping US |
| DP-1014 | Capacitors | 1,200g | 350,000đ | 2,394,899đ | 2,744,899đ | Delivered |
The fade follows scroll position (right, both, left, none) and is never clipped to the content box — framed tables put the scroller inside the card so the mask never clips the border.
table · .otable · .trow.st-* · .table-scroll[data-shade]
Badges & chips
Badges are 12px pills for status. Chips are the dashboard variant: the tint is the pill, with the count in a frosted bubble. Dark themes swap both to dedicated dark pairs — the light pastels are unreadable on dark glass.
Badges
New Pending Shipping US Arrived Weighed Sent Shipped VN Arrived VN Delivered Paid Unpaid Accepted Declined Void Cancelled Draft Discord Mod
Chips
New 3 Shipping US 2 Arrived 1 Weighed 4 Shipped VN 2 Arrived VN 1 Delivered 9 Cancelled 1
.badge.* · .chip.* · .chip-n
Alerts
Inline, not modal. Errors stay visible for 6 seconds as toasts; success and neutral toasts for 3.6. The alert box itself is for page-level messages.
Payment failed — the receipt could not be read. Please upload a clearer photo.
Deposit received. The order moves to purchasing.
New batch CH-003 opens when CH-002 closes on its cutoff date.
Deposit deadline passed — the quote needs a refresh before payment.
.alert.error · .alert.ok · .alert.info · .alert.warn
Deals
Deal cards are the one place the grid is 2 columns on phones and up to 4 on desktop, with the image at 150px mobile and 210px desktop. The price bar sits under the image, buttons pin to the bottom, and every card carries the accent border plus ring shadow.
−50%
−41%
COSRX skin-glazing face mask, 50ml
Single mask, stackable clip coupon plus subscribe discount on select accounts.
Amazon
A store blocked from Vietnam carries a warning chip and a “ask Dino to order” action instead of a direct store link.
.deal-grid · .deal-card · .deal-media · .deal-off · .deal-pricebar · .deal-cats · .store-chip
Overlays
Toasts, info popups, and the promotion ribbon. Toasts stack centered at the bottom (24px on desktop, above the tab bar on phones) and dismiss themselves — error in 6 seconds, everything else in 3.6.
Info popup
How is the shipping fee calculated?
Regular items price per kilogram by weight tier; artisan keycaps price per box. The final fee is confirmed at weighing.
Grand opening — 10% off the shipping fee for orders in the launch window.
.toast-stack · .toast · .info-pop · .promo-ribbon
Icons
Lucide only, inline SVG, no icon font, no runtime fetching. The icon sits on the svg itself as class="ic" — style wrappers with a child combinator, never a descendant selector, or the svg inherits the wrapper's rules. Emoji never stand in for icons.
Path data: Lucide 0.469.0, ISC license, same set the main site inlines at build time.
Rules
The standing laws every change to the system follows. They outrank any design tool's defaults.
- Pixels only for font sizes. One desktop set, one mobile set, defined in the stylesheet header. No rem, em, %, vw, or clamp — print sizes in points are the sole exception.
- Check siblings before pushing. New text blocks match the element and class pattern of the sections they ship next to, at the same pixel size for the same role.
- Mobile controls are 38px. Every field, select, date picker, file picker, and button on phones; table-cell buttons stay 28px; checkboxes and radios 24px; textareas keep their 72px minimum.
- Neighbours align. Elements placed side by side render at the same height and vertical alignment, measured — never eyeballed.
- Last table row has no bottom border. Inside a card it would double with the card's own edge.
- Body text never sits on glass. Frosted surfaces carry cards and chrome, never running text; contrast stays 4.5:1 with a solid fallback where backdrop-filter is unsupported.
- Verify visually, not just by code. A rendered screenshot is the proof — measured classes prove wiring, not rendering.
- New component, new showcase entry. A component ships with its example on this page in the same push, like the bilingual docs rule on the main site.
See the Tokens panel for the glass backdrop rule in action — switch to Glass Light or Glass Dark above.