# Design System

> Design System: a note from the Obsidian vault behind https://saifsiddiqui.in.

Canonical URL: https://saifsiddiqui.in/hi-latn/brain/design-system/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/brain/design-system/ · hi: https://saifsiddiqui.in/hi/brain/design-system/ · kn: https://saifsiddiqui.in/kn/brain/design-system/ · ur: https://saifsiddiqui.in/ur/brain/design-system/ · te: https://saifsiddiqui.in/te/brain/design-system/ · ar: https://saifsiddiqui.in/ar/brain/design-system/

**Type:** design  
**Status:** accepted  
**Created:** 2026-07-17  
**Tags:** design, system

## 🎨 Design System

Principle: minimal, editorial, timeless. Whitespace + type do the work; motion is seasoning. Reinforces [North Star - Site as Proof](/brain/north-star-site-as-proof/), restraint reads as taste.

**Type:** variable display (General Sans / Aeonik) + text (Inter / Geist); non-Latin via Noto per script (see [Internationalization](/brain/internationalization/)). Fluid `clamp()` scale, body ≤ 68ch.

**Color:** "Stone", warm greige, **hueless**; accent is charcoal (light) / warm stone (dark). Full tokens + rationale: [D011 - Colour Direction Stone](/brain/d011-colour-direction-stone/). Tokens for **both** light + dark, verified AA in both themes and all scripts. No-flash theme script.

**Spacing/grid:** 8px scale; 12-col fluid grid; generous vertical rhythm. **Logical properties** everywhere so RTL mirrors automatically.

**Motion:** micro 150–250ms, reveals 400–700ms, hero ~1s; `expo.out` easing; animate on enter once; transforms/opacity only; `prefers-reduced-motion` → final states. Full mapping in [D003 - Visual Restraint and One WebGL Moment](/brain/d003-visual-restraint-and-one-webgl-moment/).

## Yahan se linked

- [D002 - Tech Stack](/hi-latn/brain/d002-tech-stack/)
- [D003 - Visual Restraint and One WebGL Moment](/hi-latn/brain/d003-visual-restraint-and-one-webgl-moment/)
- [D006 - i18n Seven Languages and RTL](/hi-latn/brain/d006-i18n-seven-languages-and-rtl/)
- [D011 - Colour Direction Stone](/hi-latn/brain/d011-colour-direction-stone/)
- [Internationalization](/hi-latn/brain/internationalization/)
- [Open Questions](/hi-latn/brain/open-questions/)
- [Portfolio Brain](/hi-latn/brain/portfolio-brain/)
- [Roadmap](/hi-latn/brain/roadmap/)
- [WebGL Hero](/hi-latn/brain/webgl-hero/)

Saare notes: [/hi-latn/brain/](/hi-latn/brain/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages