Design System Inspired by ÔnThiDESIGN.md alpha

ÔnThi's design system embodies a playful, educational, and energetic aesthetic specifically crafted for young learners (grades 1–5). The visual language combines vibrant, optimistic colours with generous whitespace and soft, rounded corners to create an inviting, non-threatening learning environment. Typography is bold and confident, with heavy weights on headings to draw attention and guide focus. The system leverages bright accent colours—particularly lime green and purple—to reinforce game-like engagement and progress feedback. Depth is created through subtle, barely-visible shadows and colour-blocking rather than dramatic layering, keeping the interface clean and accessible. The overall impression is modern, friendly, and deliberately designed to make learning feel like play.

Key Characteristics

• Bright, optimistic primary accent ({colors.primary} — #6366F1) establishing brand identity across CTAs and interactive elements

• Lime-green action buttons (#58CC02) for high-visibility, game-like feedback

• Rounded, pill-shaped buttons and cards promoting a soft, approachable feel

• Bold, heavy typography weights (900) on headings for visual hierarchy and emphasis

• Soft, barely-perceptible shadows using colour-tinted layers rather than dark drop shadows

• Clean, minimalist neutral palette ({colors.canvas} — #F7F7FD) reducing cognitive load

• Playful use of decorative accent colours (orange, cyan, purple) for visual variety and category distinction

### Primary

• Brand Accent ({colors.primary} — #6366F1): Primary call-to-action buttons, active states, brand identity markers, and key interactive elements throughout the platform.

• Link ({colors.link} — #6D28D9): Inline hyperlinks and navigation anchors.

### Accent Colors (Decorative)

• Accent 1 ({colors.accent-1} — #0369A1): Decorative use; observed but no measured role.

• Accent 2 ({colors.accent-2} — #7C3AED): Decorative use; observed but no measured role.

• Accent 3 ({colors.accent-3} — #4F46E5): Decorative use; observed but no measured role.

• Accent 4 ({colors.accent-4} — #C2410C): Decorative use; observed but no measured role.

• Accent 5 ({colors.accent-5} — #FDE68A): Decorative use; observed but no measured role.

• Accent 6 ({colors.accent-6} — #FED7AA): Decorative use; observed but no measured role.

### Neutral Scale

• Canvas ({colors.canvas} — #F7F7FD): Default page background and largest surface areas.

• Ink ({colors.ink} — #1E293B): Primary text, headings, and high-contrast foreground elements.

• Body ({colors.body} — #64748B): Body copy and secondary text.

• Muted ({colors.muted} — #94A3B8): Captions, helper text, and tertiary information.

• Faint ({colors.faint} — #CBD5E1): Placeholder text and very subtle detail.

• Hairline ({colors.hairline} — #E2E8F0): 1px borders, dividers, and thin strokes.

### Surface & Borders

• Neutral 1 ({colors.neutral-1} — #0A0A0A): Deep black, used sparingly for maximum contrast when needed.

• Neutral 2 ({colors.neutral-2} — #EDE9FE): Very light purple-tinted neutral, subtle background emphasis.

### Font Family

Primary Font: Be Vietnam Pro (https://fonts.googleapis.com/)

Fallback stack: Be Vietnam Pro, system-ui, -apple-system, sans-serif

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |

|---|---|---|---|---|---|---|

| Display XL | Be Vietnam Pro | 54px | 900 | 1 | -1.35px | Hero heading; extreme negative tracking for impact |

| Display XXL | Be Vietnam Pro | 110px | 400 | 1.5 | 0px | Extra-large display (rare); lighter weight |

| Heading LG | Be Vietnam Pro | 30px | 900 | 1.2 | 0px | Section headers; bold and commanding |

| Heading MD | Be Vietnam Pro | 24px | 900 | 1.33 | 0px | Subsection titles |

| Heading SM | Be Vietnam Pro | 20px | 900 | 1.4 | 0px | Card titles and module headers |

| Heading XS | Be Vietnam Pro | 15px | 900 | 1.33 | 0px | Small section labels |

| Body XL | Be Vietnam Pro | 24px | 400 | 1.33 | 0px | Large body text in callouts |

| Body LG | Be Vietnam Pro | 16px | 400 | 1.5 | 0px | Primary body copy |

| Body LG Strong | Be Vietnam Pro | 16px | 900 | 1.5 | 0.4px | Emphasized body copy |

| Body MD | Be Vietnam Pro | 14px | 400 | 1.43 | 0px | Standard body text |

| Body SM | Be Vietnam Pro | 13px | 400 | 1.5 | 0px | Secondary body copy |

| Body SM Strong | Be Vietnam Pro | 13px | 700 | 1.38 | 0px | Emphasized secondary text |

| Button SM | Be Vietnam Pro | 14px | 600 | 1.43 | 0px | Standard button text |

| Button SM Strong | Be Vietnam Pro | 14px | 900 | 1.43 | 0.35px / 0px | Heavy button labels; letter-spacing varies |

| Caption MD | Be Vietnam Pro | 12px | 400 | 1.33 | 0px | Helper text and labels |

| Caption MD Strong | Be Vietnam Pro | 12px | 600 | 1.33 | 0px | Emphasized captions |

| Caption MD 2 | Be Vietnam Pro | 12px | 900 | 1.33 | 0px | Very bold caption |

| Caption SM | Be Vietnam Pro | 11px | 400 | 1.5 | 0px | Subtle secondary labels |

| Caption SM Strong | Be Vietnam Pro | 11px | 900 | 1.5 | 1.1px | All-caps strong labels (text-transform: uppercase) |

| Caption XS | Be Vietnam Pro | 10px | 900 | 1.5 | 1px / 0px | Smallest labels; all-caps and standard variants |

### Buttons

#### Filled / Primary Button

• Background: rgb(99, 102, 241) ({colors.primary})

• Text Color: rgb(255, 255, 255) (white)

• Padding: 8px 16px

• Height: 40px

• Font: {typography.button-sm-strong} (14px, weight 900, line-height 20px)

• Border Radius: {rounded.sm} (16px)

• Border: 0px

• Box Shadow: rgb(199, 210, 254) 0px 4px 6px -1px, rgb(199, 210, 254) 0px 2px 4px -2px (soft indigo tint)

• Width: 144.156px (measured)

#### Filled / Action Button (Lime Green)

• Background: rgb(88, 204, 2) (bright lime green)

• Text Color: rgb(255, 255, 255) (white)

• Padding: 14px 28px

• Height: 57px

• Font: {typography.body-lg-strong} (16px, weight 900, line-height 24px)

• Border Radius: {rounded.sm} (16px)

• Border: 0px

• Box Shadow: rgb(187, 247, 208) 0px 10px 15px -3px, rgb(187, 247, 208) 0px 4px 6px -4px (soft green shadow)

• Width: 232.609px (measured)