Aliens Wiki
Cinematic Knowledge Experience
0%
Aliens Wiki
Now Playing
Aliens Wiki · HIEN
⌨️ Keyboard Shortcuts
→Next slide ←Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Wiki Article · Cinematic

Design Token

Design token ek named entity hai jo kisi visual design attribute ki value store karta hai — jaise…

Overview
🌟

Design Token — Quick Facts

📌

Property: Detail

🎯

Name: Design Token

⚡

Category: Web Design, Design System, UI…

🔑

Type: Named Variable / Design Primitive

Topic 1
📥 📥 🧠 🔬 💡 🎯

Infobox

🎨 | Property | Detail | |---|---| | Name | Design Token | | Category | Web Design, Design…
Topic 2
✏️

Simple Explanation

✏️ Real-Life Analogies | Analogy | Design Token Mapping | |---|---| | Paint color code |…
Topic 3
🔒

Token Hierarchy — Mermaid Diagram

🖌️ `mermaid flowchart TD subgraph GLOBAL["🌍 Global Tokens (Raw Values)"] G1["blue-500:…
Topic 4
📐

Token Categories

📐 | Category | Kya Define Karta Hai | Example Tokens | |---|---|---| | Color | Brand…
Topic 5
📥 📥 🧠 🔬 💡 🎯

Token Levels

🖼️ | Level | Also Called | Description | Example | |---|---|---|---| | Global | Primitive,…
Topic 6
✨

Design Token vs CSS Variable vs SASS Variable

💡 | Aspect | Design Token | CSS Custom Property | SASS Variable | |---|---|---|---| |…
Topic 7
🔒

Theming with Tokens

🌈 | Token | Light Theme Value | Dark Theme Value | |---|---|---| | color-bg-page | #FFFFFF…
Topic 8
✨

Tools

✨ | Tool | By | Description | |---|---|---| | Style Dictionary | Amazon | Token JSON →…
Topic 9
🎨

Benefits

🎨 | Benefit | Description | |---|---| | Single source of truth | Ek jagah value define —…
Topic 10
✏️ 📊 🔬

Best Practices

✏️ 1. 3-level hierarchy use karo. Global → Alias → Component. Direct hex values components…
Comparison
✨

Design Token vs CSS Variable vs SASS Variable

⚖️

Platform: Agnostic — web, iOS, Android,…

⚖️

Runtime: Depends on output format

⚖️

Theming: ✅ Built for theming

Diagram
📥 ⚙️ 🔬 💡

Visual Flow

📊 Diagram visualization — details in narration
Related Topics

See Also

📖

Design system

🔗

CSS

💡

Color

📚

Typography

🔑

Component

🌐

UI

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 1

Design Token ka sabse sahi definition kya hai?

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 2

Design Token ka 'Name' kya hai?

Complete! 🎉
COMPLETE

Design Token Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅

Design Token Complete

➡️

Design system

1/18
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
✅
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
📝 Speaker Notes
—
⏭️ Up Next
—
—
🗂️ All Slides