AIO English: Học mọi thứ về tiếng Anh, trong một ứng dụng

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/aioenglish.com -->
<!-- Extracted: 2026-11-05T13:29:13.379Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "AIO English: Học mọi thứ về tiếng Anh, trong một ứng dụng"
description: "AIO English projects a modern, approachable, yet authoritative educational vibe, aiming to make English learning engaging and structured. It balances a friendly tone with a clear, scientific approach to instruction, guiding users through a comprehensive learning path."
colors:
  primary: "#1d1c27"
  neutral: "#4b4858"
  surface: "#f3f2eb"
  on-surface: "#201f1b"
  on-surface-secondary: "#4b4858"
  border: "#ece5fb"
  link: "#201f1b"
typography:
  display-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: "60px"
    fontWeight: "800"
    lineHeight: "60px"
    letterSpacing: "-1.5px"
  headline-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: "16.5008px"
    fontWeight: "800"
    lineHeight: "20.626px"
  headline-md:
    fontFamily: "Bricolage Grotesque"
    fontSize: "18.7008px"
    fontWeight: "700"
    lineHeight: "25.7136px"
  body-md:
    fontFamily: "Quicksand"
    fontSize: "15.4px"
    fontWeight: "500"
    lineHeight: "22px"
rounded:
  sm: "16px"
  md: "999px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#fffdf8"
    textColor: "#1d1c27"
    rounded: "0px 0px 26.5px 26.5px"
    padding: "0px 24px 24px"
    fontSize: "15.4px"
    fontWeight: "500"
    borderColor: "#e5e7eb"
---

# AIO English: Học mọi thứ về tiếng Anh, trong một ứng dụng — Design System

## Overview

AIO English establishes a design atmosphere that is both modern-educational and deeply structured, embodying the archetypes of The Sage and The Caregiver. Our visual language is crafted to be approachable and engaging, guiding users through a comprehensive learning path with a scientific approach to instruction. We draw inspiration from the clarity and user-centric design of platforms like Duolingo and Babbel, while incorporating the depth and structured learning pathways seen in Coursera, and the targeted practice focus of ELSA Speak. The aesthetic balances a friendly, encouraging tone with an authoritative presentation of educational content, ensuring users feel supported yet challenged.

This design system explicitly avoids overly playful or childish aesthetics, despite its approachable nature. It does not lean into a purely corporate or overly academic, dry presentation. Instead, AIO English prioritizes a clean, intuitive interface that fosters focus and minimizes cognitive load, reflecting a commitment to effective learning outcomes. The design is engineered to communicate reliability and expertise without being intimidating, providing a consistent and reassuring environment for learners at all stages.

**Key characteristics:**

- Vibe — modern-educational, structured, approachable, scientific, engaging, comprehensive
- Archetypes — The Sage, The Caregiver
- Comparable to — Duolingo, Babbel, ELSA Speak, Coursera
- Design era — contemporary-functional
- Emotional tone — supportive-empowering
- Target audience — Individuals in Vietnam seeking to learn or improve their English skills, who are looking for a structured, effective, and less 'boring' alternative to traditional methods, likely valuing modern, app-based learning.
- Visual energy — 6/10 (moderate)

## Colors

The color philosophy centers on creating a sophisticated yet inviting learning environment. The primary color, #1d1c27, establishes a deep, authoritative foundation, signaling seriousness of purpose and a premium educational experience. This rich, dark tone provides excellent contrast for readability and projects stability. The surface color, #f3f2eb, offers a clean, bright canvas that enhances legibility and creates an open, approachable feel, preventing the interface from becoming overly heavy. This high-contrast pairing ensures clarity and a modern aesthetic, reinforcing the brand's structured and scientific approach.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#1d1c27` | Near-Black |
| surface | `#f3f2eb` | Linen |
| background | `#f3f2eb` | Linen |
| text | `#201f1b` | Near-Black |
| secondary text | `#4b4858` | Dark Gray |
| border | `#ece5fb` | Lavender |
| link | `#201f1b` | Near-Black |
| muted | `#4b4858` | Dark Gray |

## Typography

Our type system is designed for optimal readability and a modern-educational feel. Quicksand and Nunito, both sans-serifs, provide a clean, friendly, and highly legible base for body text and UI elements, reflecting the approachable aspect of the brand. Bricolage Grotesque is reserved for headlines and key informational elements, offering a contemporary edge and strong visual hierarchy. This combination ensures a clear distinction between content types, guiding the user's eye efficiently through structured lessons and information. The overall effect is one of clarity, professionalism, and engaging accessibility.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Quicksand | body | self-hosted | 500 |
| Bricolage Grotesque | heading | self-hosted | 700, 800 |
| Nunito | body | self-hosted | 500, 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Bricolage Grotesque | 60px | 800 | 60px | -1.5px |
| Heading 2 | Bricolage Grotesque | 16.5008px | 800 | 20.626px | — |
| Heading 3 | Bricolage Grotesque | 18.7008px | 700 | 25.7136px | — |
| Body | Quicksand | 15.4px | 500 | 22px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 22px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.13) 0px 1px 2px 0px, rgba(29, 28, 39, 0.1) 0px 4px 10px -4px, rgba(29, 28, 39, 0.18) 0px 16px 32px -16px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.13) 0px 1px 2px 0px, rgba(29, 28, 39, 0.1) 0px 4px 10px -4px, rgba(29, 28, 39, 0.18) 0px 16px 32px -16px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.1) 0px 1px 2px 0px, rgba(29, 28, 39, 0.3) 0px 8px 18px -12px` |
| card | `rgba(255, 255, 255, 0.75) 0px 1px 0px 0px inset, rgba(60, 44, 20, 0.07) 0px 1px 2px 0px, color(srgb 0.419608 0.352941 0.227451 / 0.6) 0px 16px 30px -20px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.12) 0px 1px 2px 0px, rgba(29, 28, 39, 0.14) 0px 3px 8px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.1) 0px 1px 2px 0px, rgba(29, 28, 39, 0.3) 0px 6px 12px -8px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.1) 0px 1px 2px 0px, rgba(29, 28, 39, 0.3) 0px 8px 18px -12px` |
| button | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 28, 39, 0.1) 0px 1px 2px 0px, rgba(29, 28, 39, 0.3) 0px 6px 12px -8px` |

### Gradients

- `linear-gradient(90deg, rgba(251, 224, 140, 0.35), rgb(251, 224, 140) 12%, rgb(251, 224, 140) 88%, rgba(251, 224, 140, 0.35))`

## Shapes

Border-radius scale:

- `sm` — 16px
- `md` — 999px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#fffdf8`
- Text — `#1d1c27`
- Radius — `0px 0px 26.5px 26.5px`
- Padding — `0px 24px 24px`
- Font size — `15.4px`
- Font weight — `500`
- Border — ` solid #e5e7eb`
- Sample copy — "aɪIĐạiĐộng từĐộng từ chính của câu - nó cho biết chủ ngữ “I” đang làm gì hoặc cả"

## Do's and Don'ts

### Do

- Utilize Bricolage Grotesque at 700 or 800 weight for all headings, rendered in sentence-case.
- Employ Quicksand 500 or Nunito 500, 600, or 700 for body text, maintaining a line-height of 22px.
- Primary text should be #201f1b on a #f3f2eb background in light mode, with #1d1c27 as the primary accent color.
- Secondary buttons should feature a #fffdf8 background, #1d1c27 text, and a distinct border radius of 0px 0px 26.5px 26.5px, with a #e5e7eb border and padding of 0px 24px 24px.
- Apply subtle, multi-layer shadows on cards, such as rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0.05) 0px 1px 2px 0px; and rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px.
- Incorporate a single linear gradient for specific elements, specifically linear-gradient(90deg, rgba(251, 224, 140, 0.35), rgb(251, 224, 140) 12%, rgb(251, 224, 140)).
- Maintain a consistent base spacing unit of 2px for all layout and component spacing.
- Apply border radii of 16px for small elements, and 999px or 9999px for medium and large, creating pill-shaped or fully rounded corners.
- Craft CTAs using action-oriented imperative verbs, often highlighting benefits, and keep vocabulary simple and accessible.
- Utilize a layered design approach with subtle shadows on cards to add depth, rather than a completely flat aesthetic.

### Don't

- Avoid using title case for headings; all headings should strictly adhere to sentence-case.
- Do not use emojis in any marketing or instructional copy.
- Refrain from excessive use of exclamation marks; they should be rare.
- Do not use serif fonts; the brand's typography is exclusively sans-serif (Quicksand, Bricolage Grotesque, Nunito).
- Avoid sharp, angular corners; the brand utilizes rounded corners with radii like 16px, 999px, and 9999px.
- Do not apply shadows to buttons; shadows are reserved for cards and other layered elements.
- Do not deviate from the specified color palette of #1d1c27, #f3f2eb, #201f1b, #fffdf8, and #e5e7eb for core UI elements.
- Avoid overly technical jargon; while some jargon is acceptable, the overall tone should remain accessible.
- Do not use a monochrome color scheme; the brand uses a limited but distinct palette with a primary accent color and a gradient highlight.
- Do not implement a completely flat design; subtle layering and shadows are key to the brand's visual identity.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — action-oriented imperative verbs, some benefit-focused
- Rhetorical devices — repetition

### Sample copy

> Tạm biệt cách học nhàm chán. Không lo mất định hướng với lộ trình học đầy đủ.

> Mọi thứ về tiếng Anh, trong một ứng dụngHọc tiếng Anhthú vịhiệu quảcùngcùng

> Không chỉ có mỗi gõ câu. Bên trong còn nhiều chế độ học để bạn hoàn thiện mọi kỹ năng giao tiếp.

> Gõ buộc não tái tạo

> Gõ rồi ôn giãn cách

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/aioenglish.com) | 100% |
| favicon | — | svg | [link](brands/aioenglish.com/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/aioenglish.com/logo-1.png) | 95% |
| favicon | — | svg | [link](brands/aioenglish.com/logo-2.svg) | 95% |
| favicon | — | png | [link](brands/aioenglish.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/aioenglish.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/aioenglish.com/logo-5.png) | 95% |
| logomark | — | svg | [link](brands/aioenglish.com/logo-svg-6.svg) | 90% |
| logomark | — | svg | [link](brands/aioenglish.com/logo-svg-7.svg) | 90% |

## Sources

- Official brand guidelines — https://aioq.org/en/media-kit
- Live brand page — https://extractvibe.com/brand/aioenglish.com
- Raw JSON — https://extractvibe.com/api/brand/aioenglish.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/aioenglish.com/design.md
- Extracted — 2026-11-05T13:29:13.379Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md