Tiki

Overview

Tiki is Southeast Asia's fastest-growing e-commerce platform, serving millions of customers across Vietnam with an unmatched selection of products, competitive pricing, and industry-leading logistics. The design system embodies a philosophy of **Pragmatic Clarity**—a visual language that prioritizes speed, trust, and accessibility over decorative flourish. The brand personality is direct, confident, and customer-obsessed: every interface element serves a functional purpose, and the visual hierarchy guides users toward their goals with minimal friction. The emotional response is one of reassurance and efficiency; users feel they're in capable hands. Example sentence in brand voice: "Tiki delivers your order in 2 hours—no surprises, no delays, just what you ordered."

The aesthetic draws from commercial e-commerce best practices while maintaining a distinctly Vietnamese warmth. The color palette combines a vibrant primary blue (#0b74e5) for trust and action, a energetic yellow (#ffc400) for promotions and urgency, and a fresh green (#00ab56) for success and delivery confirmations. Typography relies on Inter—a geometric, highly legible sans-serif—set at precise sizes and weights to create rhythm without ornamentation. The design system rejects skeuomorphism and excessive depth; instead, it uses subtle shadows (0 3px 8px rgba(0,0,0,0.15)), clean borders, and strategic color blocking to establish hierarchy and guide attention.

Colors

The Tiki color system is built on three core brand colors anchored by a dominant primary blue, supported by secondary and tertiary accents that signal different interaction states and content types. **Primary (#0b74e5)** is the signature brand color used exclusively for primary CTAs, links, focus states, and brand-critical interactive elements; it conveys trust and authority. On-primary is pure white (#ffffff) for maximum contrast and legibility. Primary-container (#e3f2fd) and on-primary-container (#003ea1) form a supporting pair for secondary emphasis, such as highlighted sections or disabled states. **Secondary (#ffc400)** is a warm, attention-grabbing yellow reserved for promotional badges, discount labels, and time-sensitive offers; it creates urgency without aggression. Secondary-con

Typography

The Tiki typography system uses Inter across all scales, chosen for its exceptional clarity at small sizes (12px–14px), geometric consistency, and neutral personality that doesn't distract from content. The hierarchy spans eight levels: **Display (60px, 700 weight, -0.04em letter-spacing)** for hero headlines and brand moments; **Headline-lg (40px, 600 weight, -0.02em)** for major section titles; **Headline-md (28px, 600 weight, -0.01em)** for subsection headers; **Title-lg (20px, 600 weight)** for card titles and modal headers; **Body-lg (18px, 400 weight)** for introductory copy and hero descriptions; **Body-md (16px, 400 weight)** for standard body text and product descriptions; **Label-md (14px, 500 weight, 0.01em)** for button text, form labels, and UI labels; **Label-sm (12px, 500 we

Layout

Tiki uses a 12-column fluid grid system with a maximum container width of 1280px, ensuring responsive scaling from mobile (320px) to desktop (1920px+). The grid is implemented via CSS Grid with auto-fit columns that collapse gracefully on smaller viewports. Horizontal spacing follows a semantic scale: **xs (4px)** for micro-spacing within components; **sm (12px)** for spacing between inline elements; **md (24px)** for standard gutter between sections and card padding; **lg (40px)** for major section separation; **xl (64px)** for hero-to-content transitions. The gutter width is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile to maximize content area. Container max-width of 1280px ensures text remains scannable (60–80 characters per line at body-md size). White-sp

Elevation & Depth

Tiki's depth model is achieved through a restrained shadow system and strategic use of borders rather than aggressive drop-shadows. **Level 1 (Base)** is the white surface (#ffffff) with no shadow, used for primary content areas and the page background. **Level 2 (Standard Card)** applies a subtle shadow (0 3px 8px rgba(0,0,0,0.15)) and a 1px border in surface-container-highest (#dddde3), creating gentle separation from the background without visual heaviness. This is used for product cards, category tiles, and standard containers. **Level 3 (Elevated/Modal)** increases shadow to 0 8px 24px rg

Shapes

Tiki's shape philosophy is **Soft-Technical**: rounded corners are used sparingly and purposefully to soften the industrial precision of a commerce platform without introducing playfulness or whimsy. **Buttons and inputs** use a 4px radius (0.25rem), creating a subtle softness that feels modern and approachable while maintaining clear geometric definition. **Cards and containers** use 8px radius (0.5rem) for standard content areas, and 12px (0.75rem) for elevated modals and popovers, creating a visual hierarchy through increasing roundness. **Badges and chips** use full border-radius (9999px)

Components

Action Elements **Buttons** are the primary interaction mechanism. Primary buttons (#0b74e5 background, white text, 40px height, 12px 24px padding, 4px radius) use label-md typography (14px, 500 weight) and transition to #0a5cc8 on hover (200ms ease-in-out). Secondary buttons are transparent with a 1px primary border, inverting to a light blue background (#e3f2fd) on hover. Tertiary buttons have no border or background, appearing as text links; they transition to surface-container-high (#ebebf0) on hover. All buttons include a focus state with a 3px blue ring (0 0 0 3px rgba(11, 116, 229, 0.1)) for keyboard accessibility. Disabled buttons reduce opacity to 50% and remove pointer events.

**Chips and badges** are compact, inline elements used for filtering, tagging, and status indicatio

Do's and Don'ts

**Do**

• Do use primary (#0b74e5) exclusively for primary CTAs, links, and brand-critical interactive elements—never use it for backgrounds or decorative elements.
• Do apply the 24px gutter consistently between sections and use lg (40px) spacing for major breaks to create visual rhythm and reduce cognitive load.
• Do use Inter at precise sizes (12px, 14px, 16px, 18px, 20px, 28px, 40px, 60px) with matching weights (400, 500, 600, 700) to maintain typographic hierarchy—never mix typefaces or use arbitrary sizes.
• Do apply 200ms ease-in-out transitions to all interactive states (hover, focus, active) to provide smooth, predictable feedback.
• Do use the full Material 3 color token system (surface, surface-container, on-surface, primary, primary-container, etc.) via CSS variables to ensure consistency and enable rapid theming.

**Don't**

• Don't use secondary (#ffc400) or tertiary (#00ab56) for primary CTAs—these are reserved for promotions and success states respectively.
• Don't apply shadows heavier than 0 8px 24px rgba(0,0,0,0.12) or use blur effects (backdrop-filter)—Tiki prioritizes clarity and performance over depth effects.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px)—this ensures visual consistency across all components.
• Don't hardcode color hex values inside component styles—always use CSS custom properties (--color-primary, --color-surface, etc.) to maintain the token system.
• Don't use system fonts or generic fallbacks (system-ui, sans-serif)—always specify Inter as the primary font-family with Arial as a fallback for legacy browsers.