Sixhands Design System · v1.0 · Apr 2026
A design system for Sixhands — a Japanese-Australian salad bar in Singapore. Warm, hand-made, a little cheeky. These tokens, components and characters keep our consumer app fun and gamified — and our admin app focused and clean.
A playful loyalty app with mascots, stamps and gifting. Warm cream backgrounds, round shapes, rewarding micro-interactions.
A focused operator tool for staff and managers. Dense data, predictable tables, reduced chrome — same brand, lower volume.
Logo, wordmark, voice. A Japanese-Australian salad bar — hand-made feel, a little cheeky, always warm.
Warm, direct, a little playful. Written like a friend at the counter. No corporate filler, no exclamation-mark overload — but earned warmth.
A grounded palette: forest green for authority, cream for warmth, lime for energy. Muted supporting tones keep admin surfaces calm.
Brand · core
Support · warm & muted
System · feedback
Usage — Consumer
Cream backgrounds, butter warm zones for hero content, forest for CTAs and headings. Lime only for contrast inside forest CTAs, and for small delight accents. Blush is reserved for character work.
Usage — Admin
Cream background retained for brand continuity. Forest used sparingly — table headers, active nav, primary actions. Avoid butter/blush in data-heavy views; prefer cream-2 for striping.
Nohemi for warmth and personality. Inter for UI precision. Damion as a rare scripted accent for brand moments only.
Generous, round, quiet. Round corners are our strongest shape signature — everything from pills to cards.
Spacing scale · 4pt
Radii
Elevation
Elevation is subtle — we rely on color and round shapes to separate surfaces, not drop-shadow stacks.
Components for the mobile app. Round, tactile, generous padding. Inspired by the hand-built diner feel.
Buttons · Primary
Buttons · Secondary
Buttons · Ghost & Text
Input fields
Filter chips
Checkboxes
Try it — live
Hover, focus, and press the components below to feel the real transitions. Static states above stay as reference.
Buttons
Primary lifts on hover, dips on press. Try keyboard Tab.
Inputs — focus ring
Filter chips — toggle
Checkboxes — toggle
Click to toggle · tick snaps in with a scale bounce.
Points & rewards
Nudge banner
Bottom navigation
5 tabs · cream surface · subtle top-shadow lift.
Composition · Home screen
A warm cream canvas with a butter blob behind the hero. Mascot character anchors order entry; points and gifts sit directly beneath as tappable pill stats. Bottom nav floats on a raised cream surface for thumb reach.
Tablet & desktop. Brand is quieter: less color, more density. Inter leads, Nohemi is used only for page-title and brand moments.
| Customer ID | Name | Points | Orders | Status | Member since |
|---|---|---|---|---|---|
| SH-1028 | Sharmaine Low | 1,240 | 38 | Active | Jan 2024 |
| SH-1029 | Marcus Yeo | 840 | 22 | Active | Mar 2024 |
| SH-1030 | Priya Nair | 110 | 4 | Dormant | Aug 2024 |
| SH-1031 | Hiro Tanaka | 0 | 0 | Blocked | Feb 2025 |
| SH-1032 | Aisha Rahman | 512 | 14 | Active | Oct 2024 |
Admin retains the brand's cream canvas + forest sidebar. Data surfaces use white with cream-2 striping and forest headers for scannability.
Eight mascots, one family. Heavy 6px black line, flat fills, soft-retro smile. Used as avatars, empty-states and delight moments. Consumer-only.
Usage
Don't
24×24 grid, 1.8px stroke, rounded joints. Forest deep for default, forest for active, moss for inactive. Filled variants reserved for bottom-nav active state.