Skip to content
DOL Studio

Logo

Design: Stable Code: Coded brandidentity 23 Figma sets 15 standalone DOL logo / General v2

Live preview

DOL English main brand

<DolPlatformLogo product="main" size="xs"|"sm"|"md"|"lg"|"xl" />. md = h-8 (default · 32px).
DOL English logoxs · h-5
DOL English logomd · h-8 (default)
DOL English logoxl · h-12

22 platform products

Smart matrix from Figma DS V2 23923:38622. Per cell: SVG = copy markup · Fig = copy JSON for DOL Library plugin (Paste tab) · ↓ = download .svg.
DOL English logo
main
↓
DOL logo
general-v1
↓
DOL English logo
general-v2
↓
DOL Academy logo
academy
↓
DOL THPT logo
thpt
↓
Tự học IELTS logo
tuhoc-ielts
↓
Từ điển VA logo
tudien-viet-anh
↓
DOL Grammar logo
grammar
↓
Super LMS logo
super-lms
↓
DOL Wiki logo
wiki
↓
Teacher LMS logo
teacher-lms
↓
CS logo
cs
↓
TA logo
ta
↓
CMCD logo
cmcd
↓
EC logo
ec
↓
Admin logo
admin
↓
PD logo
pd
↓
Bug Killer logo
bug-killer
↓
Police logo
police
↓
Marketer logo
marketer
↓
Sale Admin logo
sale-admin
↓
Management logo
management
↓
Referral logo
referral
↓

Variants — layout × tone

Using product="academy" (full coverage). layout ∈ default | simple | symbol. tone ∈ default | gray-dark-bg.
DOL Academy logo
layout="default" · light
DOL Academy logo
layout="simple" · light
DOL Academy logo
layout="symbol" · light
DOL Academy logo
layout="default" · dark
DOL Academy logo
layout="simple" · dark
DOL Academy logo
layout="symbol" · dark

Responsive — auto-switch by container

layout="responsive" auto-picks default / simple / symbol by host container's inline-size. ≥200px → default · 80-200px → simple · <80px → symbol. Pure CSS, no JS.
DOL Academy logoDOL Academy logoDOL Academy logo
~280px → default
DOL Academy logoDOL Academy logoDOL Academy logo
140px → simple
DOL Academy logoDOL Academy logoDOL Academy logo
60px → symbol

Import & files

Import
import { Logo } from "@dol/ui/logo";
Source file
packages/@dol/ui/src/logo/Logo.tsx

Figma source

Figma source 23 sets
Page
Logo
Sets
23 + 15 standalone
Primary set
DOL logo / General v2 · 6 variants Open in Figma →
Showing: DOL logo / General v2
11 other sets (+ 11 more not listed)
  • DOL logo / Admin 6 variants Figma →
  • DOL logo / Bug Killer 6 variants Figma →
  • DOL logo / CMCD 6 variants Figma →
  • DOL logo / CS 6 variants Figma →
  • DOL logo / EC 6 variants Figma →
  • DOL logo / General v1 4 variants Figma →
  • DOL logo / Grammar 4 variants Figma →
  • DOL logo / Main DOL English 6 variants Figma →
  • DOL logo / Management chung chung 6 variants Figma →
  • DOL logo / Marketer 6 variants Figma →
  • DOL logo / PD 6 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Logo
Slug: `logo`
Domain: general · Category: display
Design: stable · Code: coded


## Description
DOL brand marks + sub-product logos. 22 sets cover DOL AI / Alpha / Beta badge variants.


## Import
```ts
import { Logo } from "@dol/ui/logo";
```
Source: `packages/@dol/ui/src/logo/Logo.tsx`


## Figma source
Page: Logo
Sets: 23
Primary: DOL logo / General v2
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=36585-5573

Related

  • DOL Academy logo

    Program logo

    Design only

  • Avatar, User

    Coded
  • Tag label

    Tag

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    Coded

  • Divider

    Coded

  • Order number

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).