Typography

Quicksand cho cả body và heading — tròn trịa, ấm áp, và thân thiện với trẻ em.

Font Families

Body

Quicksand — The quick brown fox jumps over the lazy dog

Class: font-sans

Heading

Quicksand — The Quick Brown Fox

Class: font-heading

Cả font-sans và font-heading đều trỏ đến Quicksand (variable, weights 300–700). Dùng font-sans cho body, font-heading cho headings.

Size Scale

xs12px

Quicksand — xs size

sm14px

Quicksand — sm size

base16px

Quicksand — base size

lg18px

Quicksand — lg size

xl24px

Quicksand — xl size

2xl30px

Quicksand — 2xl size

3xl40px

Quicksand — 3xl size

4xl48px

Quicksand — 4xl size

Heading Hierarchy

h1 — text-4xl font-bold

The Big Heading

h2 — text-3xl font-bold

Section Title

h3 — text-2xl font-semibold

Subsection

h4 — text-xl font-semibold

Card Title

h5 — text-lg font-medium

Small Heading

h6 — text-base font-medium

Caption Heading

Font Weights

Torito Studio

font-light — Light (300)

Torito Studio

font-normal — Normal (400)

Torito Studio

font-medium — Medium (500)

Torito Studio

font-semibold — Semibold (600)

Torito Studio

font-bold — Bold (700)

Color Palette

Xanh lá rừng làm primary, kem ấm làm muted, hồng pastel làm accent — thiết kế cho sự ấm áp và niềm vui của trẻ em.

Brand Colors

Màu chính có semantic Tailwind token. Dùng token thay vì hardcode hex.

Primary--primary#2F7A3Abg-primary text-primarylight text

Leaf / Ring--ring#75B843bg-ring text-ringlight text

Secondary--secondary#D7ECF8bg-secondary text-secondary-foregrounddark text

Accent--accent#F7B7D4bg-accent text-accent-foregrounddark text

Destructive--destructive#F24B3Dbg-destructive text-destructivelight text

Brand Extras

Màu bổ sung không có semantic token. Dùng arbitrary value bg-[#HEX] khi cần.

Candy Pink—#F48ABDbg-[#F48ABD]dark text

Lime—#B9D96Bbg-[#B9D96B]dark text

Sky Blue—#A9D7F2bg-[#A9D7F2]dark text

Warm Beige—#F7F0E6bg-[#F7F0E6]dark text

Surface Colors

Background--background#FFFFFFbg-backgrounddark text

Card--card#FFFFFFbg-card text-card-foregrounddark text

Muted (Cream)--muted#FFF8EEbg-muted text-muted-foregrounddark text

Border--border#DFECCBborder-border bg-borderdark text

Text Colors

Foreground--foreground#224229text-foreground

Muted FG--muted-foreground#6B7D67text-muted-foreground

Primary--primary#2F7A3Atext-primary

Destructive--destructive#F24B3Dtext-destructive

Spacing Scale

Consistent spacing tokens cho padding, margin, và gaps.

p-14px

p-28px

p-312px

p-416px

p-520px

p-624px

p-832px

p-1040px

p-1248px

p-1664px

Border Radius

Bo tròn, thân thiện — từ subtle đến pill. Base radius là 12px (lg).

sm6pxrounded-sm

md8pxrounded-md

lg (base)12pxrounded-lg

xl16pxrounded-xl

2xl24pxrounded-2xl

3xl36pxrounded-3xl

pill9999pxrounded-full

Shadows

Bóng đổ mềm, ấm với tints xanh lá — tạo chiều sâu thân thiện.

Card

shadow.card — Thẻ nổi nhẹshadow-[0_4px_24px_rgb(47_122_58_/0.10)]

Floating

shadow.floating — Modal / dropdownshadow-[0_12px_40px_rgb(47_122_58_/0.18)]

Hover

shadow.hover — Khi hovershadow-lg shadow-primary/8

Buttons

Pill-shaped CTA là brand standard. Tất cả variants và sizes.

Variants

Sizes

Small — h-9 px-3

Default — h-10 px-4

Large — h-11 px-6

Icon — size-10

Pill vs Standard Radius

Disabled States

Cards

Product card, Info card, và Action/CTA card — bo tròn, bóng mềm, tone ấm.

👕

Dino Adventure Tee

AI-generated design on premium cotton

199.000₫

SML

AI-Powered Design

Tạo thiết kế áo độc đáo với AI studio. Mô tả ý tưởng và xem phép màu.

Unlimited generations
Custom story cho mỗi thiết kế
Preview trước khi đặt hàng

Start Creating

Thiết kế chiếc áo yêu thích tiếp theo cho bé với AI

Chọn từ hàng trăm chủ đề hoặc tạo thiết kế riêng. Mỗi chiếc áo kể một câu chuyện.

Form Elements

Inputs, labels, và field layouts theo Torito brand. Input height: h-10, padding: px-3.5

Input States

Search Input

Form Layout Example

Layout Patterns

Container, hero pattern, và product grid — các pattern layout chuẩn của Torito.

Container

Container chuẩn: max-w-6xl với responsive padding px-4 sm:px-5 lg:px-6

max-w-6xl px-4 sm:px-5 lg:px-6

Hero Pattern

<section className="relative overflow-hidden bg-gradient-to-br 
  from-primary/5 via-background to-accent/10">
  <div className="mx-auto max-w-6xl px-4 sm:px-5 lg:px-6 py-16">
    {/* Hero content */}
  </div>
  {/* Decorative blobs */}
  <div className="pointer-events-none absolute -right-20 -top-20 
    h-64 w-64 rounded-full bg-accent/20 blur-3xl" />
</section>

Product Grid Pattern

<div className="mx-auto max-w-6xl px-4 sm:px-5 lg:px-6">
  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    {products.map(product => (
      <Card key={product.id} 
        className="group hover:shadow-[0_12px_40px_rgb(47_122_58_/0.18)]">
        {/* Product card content */}
      </Card>
    ))}
  </div>
</div>

Motion

Duration tokens cho transitions và animations — nhanh, mượt, thân thiện.

fast150ms

duration-150

Hover, focus, micro-interactions

Hover để xem animation

normal300ms

duration-300

Page transitions, reveals

Hover để xem animation

slow500ms

duration-500

Modals, complex animations

Hover để xem animation

Easing & Patterns

ease-out — Default cho hầu hết transitions (hover, focus)

ease-in-out — Cho transforms và layout shifts

transition-all duration-150 — Pattern chuẩn cho hover states

transition-shadow duration-300 — Cho card hover shadows