AG

Atoms

Smallest independent UI units — single function, single purpose

Atomic Components

Single function, single purpose components that form the building blocks of the design system.

Buttons

8 button types with token mappings

Primary Button

Main action of a page

Example: Save, Submit, Create

Secondary Button

Supporting action

Example: Cancel, Edit, View Details

Tertiary / Ghost Button

Low emphasis or inline

Example: Learn more, Back

Destructive Button

Dangerous or irreversible action

Example: Delete, Remove, Reset

Icon Button

Icon-only (no label)

Example: Search, Close, Settings

Text Button / Link Button

Inline textual action

Example: View all, Forgot password?

Toggle Button

On/Off state

Example: Grid ↔ List, Favorite

FAB (Floating Action Button)

Floating, circular primary

Example: + new item on mobile

Inputs

9 input types with token mappings

Text Field (Single-line)

For short text input

Example: Name, Email, Username

Textarea (Multi-line)

For longer text

Example: Description, Notes

Search Field

Input + Icon Button

Example: Search bar, filter search

Number Field

Numeric input (with up/down arrows)

Example: Price, Quantity

Password Field

Hidden characters + toggle icon

Example: Login forms

Select / Dropdown

Input + options list

Example: Country, Category

Date Picker

Input + calendar icon

Example: Date of birth, Schedule

File Upload Field

Input + "Upload" button or drag area

Example: Upload CV, Attachments

Drop file here

Combobox / Autocomplete

Input + suggestion dropdown

Example: Tag selection, Quick search

Switches

5 switch types with token mappings

Standard Switch (Toggle)

On/Off toggle for a setting

Example: Enable notifications

Labeled Switch

Switch + label on right or left

Example: Dark Mode, Auto Save

Dark Mode
Dark Mode

Icon Switch

Switch with icons for On/Off states

Example: 🌙 / ☀️ for dark/light mode

Disabled Switch

Non-interactive (grayed out)

Example: When permission denied

Loading Switch (optional)

Shows transition state

Example: For async toggles

Avatars

6 avatar variants with token mappings

Image

User photo or entity image

Example: Profile picture, team member photo

Initials

Fallback letters, colored background

Example: AG for "Azin Ghasemi", "JS" for "John Smith"

AG
AG
AG

Icon

Placeholder / system avatar

Example: Default user icon, system account

Status

Avatar + presence dot

Example: Online indicator, active user

AG
AG
AG

Group

Overlapping members

Example: Team avatars, multiple users

AG
JS
MD
AG
JS
MD
AG
JS
MD

Anonymous

Generic silhouette

Example: Unidentified user, guest account

Badges

5 badge types with token mappings

Notification

Count bubble showing number

Example: "3" unread messages, "99+" items

3
3
3

Status

Dot or label indicating state

Example: "Active", "Online", "Pending"

●
●
●

Text / Label

Text label badge

Example: "New", "Beta", "Admin", "Pro"

New
New
New

Outline

Tag-style badge with border

Example: Category tags, filter chips

Tag
Tag
Tag

Icon

Small symbol badge

Example: Checkmark "✔️", star "⭐", lock "🔒"

✔️
✔️
✔️

Icons

Icon sizing, context, and state tokens

View Icon Details

Icon Categories

System Icons

Used across UI

Action Icons

Represent user actions

Navigation Icons

Sidebar / tab symbols

Status Icons

Feedback / state

Media Icons

File or media interactions

Social / Brand Icons

External integrations

Icon Sizes

icon-size-xs

12px

Status dots, small badges

icon-size-sm

16px

Inline with small text, inputs

icon-size-md

20px

Default size (most common)

icon-size-lg

24px

Card actions, toolbars

icon-size-xl

32px

Empty states, hero visuals

icon-size-xxl

48px

Splash / onboarding illustrations

Icon Context

Default / Neutral

Gray-600

On Brand Surface

White

On Neutral Surface

Gray-700

Action / Interactive

Brand tone

Success

Green

Warning

Yellow

Error

Red

Disabled

Muted gray

Inverse / Dark Mode

Light tone

Icon States

Default

Neutral gray / brand tone

Hover

Slightly darker or accent color

Active

Brand-600 or accent shade

Disabled

Gray-400

On Dark / On Brand

White

Typography

3-layer token hierarchy: Core → Semantic → Component

Token Hierarchy

Core Tokens
Raw font values
font-size-16
Semantic Tokens
Context meaning
text-heading-lg
Component Tokens
Applied usage
button-text

Core Tokens

Raw font values (editable by Brand / Design Ops)

Font Families

Inter, Roboto, or Open Sans
Courier New, monospace

Font Sizes

12px
14px
16px
18px
20px
24px
32px
40px

Line Heights

1.2
1.4
1.6

Font Weights

400
500
600
700

Letter Spacing

-0.5%
0%
+1%

Text Case

uppercase
none

Semantic Tokens

Context meaning (editable by Design System Team)

Headings(xl, lg, md, sm, xs)

Page title
Page title
Section title
Section title
Subheading
Subheading
Minor title
Minor title
Card titles
Card titles

Body & Supporting Text

Long reading
This is an example of Long reading text that demonstrates how it appears in the interface.
Default paragraph
This is an example of Default paragraph text that demonstrates how it appears in the interface.
Dense data, captions
This is an example of Dense data, captions text that demonstrates how it appears in the interface.
Footnotes, legal text
This is an example of Footnotes, legal text text that demonstrates how it appears in the interface.

Labels & UI Text

Prominent label
Prominent label
Form label
Form label
Button or chip label
Button or chip label

Display & Numbers

Hero headline
Hero headline
Dashboard KPI title
Dashboard KPI title
Data or code
Data or code

Component-Level Typography Tokens

Applied usage (editable by Designers / Developers)
Button
{text-label-sm}
Input Label
{text-label-md}
Table Header
{text-label-sm}
Card Title
{text-heading-sm}
Toast Message
{text-body-sm}

Line Height & Vertical Rhythm

Text SizeLine HeightRatio
12px16px1.33
14px20px1.43
16px24px1.5
20px28px1.4
24px32px1.33
32px40px1.25

Atomic Design Recommendations

ContextRecommended TokenNotes
Dashboard titlestext-heading-lgMust stand out clearly
Card titlestext-heading-smCompact readability
Form labelstext-label-mdMedium weight for clarity
Paragraph texttext-body-mdHigh contrast, readable
Captions / Hintstext-body-smSubtle but legible
Button texttext-label-smAll caps optional
Data / Codetext-mono-smUse monospaced family

Divider / Separator

Content above divider

Content below divider

Content with vertical divider

Left content
Right content

Content with text divider

OR

Tooltip

Top Tooltip
Bottom Tooltip
Left Tooltip
Right Tooltip

Progress / Spinner

Spinners

Progress Bars

25% Complete

50% Complete

75% Complete