---
title: Design System Reference
description: Bộ quy tắc thiết kế cho SVG diagrams, Web UI và knowns.sh — đảm bảo visual consistency
createdAt: '2026-04-12T06:13:53.895Z'
updatedAt: '2026-04-12T06:13:53.895Z'
tags:
  - design
  - svg
  - style-guide
  - ui
---

# Design System Reference

Bộ quy tắc thiết kế cho Knowns — áp dụng cho SVG diagrams trong README, Web UI, và knowns.sh landing page.

## 1. Color Palette

### Brand Colors (Primary)

| Token | Hex | Usage |\n|-------|-----|-------|\n| Primary | Tailwind `primary` | Main brand accent, CTA buttons |\n| Purple 400 | `#a855f7` | Gradients, badges, glow effects |\n| Purple 600 | `#9333ea` | Dark mode gradient midpoint |\n| Pink 400 | `#f472b6` | Gradient endpoint |\n| Pink 600 | `#db2777` | Light mode gradient endpoint |\n| Blue 400 | `#60a5fa` | Info, links |\n| Blue 500 | `#3b82f6` | Animated beam gradient end |\n| Discord Blue | `#5865F2` | Discord CTA |\n\n### Semantic Colors (cho SVG diagrams)\n\nDựa trên GitHub dark theme palette, dùng trong README SVGs:\n\n| Role | Hex | Usage |\n|------|-----|-------|\n| Background | `#0d1117` → `#161b22` | SVG background gradient |\n| Surface | `#161b22` | Cards, bars |\n| Border | `#30363d` | Borders, dividers |\n| Text Primary | `#e6edf3` | Headings |\n| Text Secondary | `#c9d1d9` | Body text |\n| Text Muted | `#8b949e` | Descriptions, labels |\n| Text Faint | `#484f58` | Footers, hints |\n| Blue | `#58a6ff` | Specs, Docs links, primary accent |\n| Blue Dark | `#1f6feb` | Blue fills |\n| Purple | `#a371f7` | Memory, Init phase |\n| Purple Dark | `#8957e5` | Purple fills |\n| Orange | `#f0883e` | Tasks, Implement phase |\n| Yellow | `#d29922` | Decisions, warnings |\n| Green | `#3fb950` | Code, Commit, success |\n| Green Dark | `#238636` | Green fills |\n| Pink | `#f778ba` | Memory node, Implement converge |\n| Cyan | `#79c0ff` | Templates, Code Index |\n| Surface Dark | `#21262d` | Badge backgrounds |\n\n### Entity Color Mapping\n\nMỗi entity type trong Knowns có 1 màu cố định:\n\n| Entity | Color | Hex |\n|--------|-------|-----|\n| Specs | Blue | `#58a6ff` |\n| Tasks | Orange | `#f0883e` |\n| Docs | Purple | `#a371f7` |\n| Code | Green | `#3fb950` |\n| Memory | Pink | `#f778ba` |\n| Decisions | Yellow | `#d29922` |\n| Templates | Cyan | `#79c0ff` |\n\n## 2. Typography\n\n### Fonts\n\n| Context | Font | Fallback |\n|---------|------|----------|\n| knowns.sh | Inter | system-ui, sans-serif |\n| Monospace | JetBrains Mono | monospace |\n| SVG diagrams | system-ui, -apple-system, sans-serif | — |\n| SVG code/commands | monospace | — |\n\n### Font Sizes (SVG)\n\n| Role | Size |\n|------|------|\n| Title | 18px, weight 700 |\n| Subtitle | 12px, normal |\n| Node title | 13-14px, weight 600 |\n| Node description | 9-10px, normal |\n| Badge/command text | 7px, monospace |\n| Footer | 10px |\n\n## 3. Gradients\n\n### knowns.sh Brand Gradients\n\n```\nHero text:     from-primary via-purple-600 to-pink-600\n               (dark: via-purple-400 to-pink-400)\nBackground:    from-primary via-purple-500/10 to-pink-500/10 + blur-3xl\nDivider:       from-transparent via-white/80 to-transparent\nAnimated beam: from-#a855f7 via-#3b82f6 to-transparent\n```\n\n### SVG Background Gradient\n\n```xml\n<linearGradient id=\"bg\" x1=\"0\" y1=\"0\" x2=\"W\" y2=\"H\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0%\" stop-color=\"#0d1117\"/>\n  <stop offset=\"100%\" stop-color=\"#161b22\"/>\n</linearGradient>\n```\n\n## 4. SVG Diagram Rules\n\n### Structure\n\n1. Outer container: `rx=\"12\"`, background gradient + border `#30363d`\n2. Title block: centered, primary text + muted subtitle\n3. Content area: nodes, edges, cards\n4. Footer: centered muted text, optional badge bar\n\n### Node Style\n\n```xml\n<!-- Rounded rect node -->\n<rect rx=\"10-12\" fill=\"{color}\" opacity=\"0.08-0.15\" filter=\"shadow\"/>\n<rect rx=\"10-12\" stroke=\"{color}\" stroke-width=\"1-1.5\" fill=\"none\"/>\n\n<!-- Circle node -->\n<circle fill=\"{color}\" opacity=\"0.1-0.15\" filter=\"shadow\"/>\n<circle stroke=\"{color}\" stroke-width=\"1.5\" fill=\"none\"/>\n```\n\n### Edge Style\n\n```xml\n<!-- Connection line -->\n<path stroke=\"{color}\" stroke-width=\"1.2\" opacity=\"0.2-0.35\" fill=\"none\"/>\n\n<!-- Arrow -->\n<line stroke=\"#484f58\" stroke-width=\"1.5\"/>\n<polygon fill=\"#484f58\"/>  <!-- arrowhead -->\n\n<!-- Dashed connection -->\n<line stroke-dasharray=\"5,3\" or \"6,4\"/>\n```\n\n### Edge Labels\n\n```xml\n<rect fill=\"#0d1117\" opacity=\"0.8\" rx=\"3\"/>  <!-- background -->\n<text fill=\"{color}\" font-family=\"monospace\" font-size=\"7\" opacity=\"0.7\"/>\n```\n\n### Badge / Command Tag\n\n```xml\n<rect fill=\"{color}\" opacity=\"0.12-0.15\" rx=\"4-6\"/>\n<text fill=\"{color}\" font-family=\"monospace\" font-size=\"7\"/>\n```\n\n### Drop Shadow Filter\n\n```xml\n<filter id=\"shadow\">\n  <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.3\"/>\n</filter>\n```\n\n### Background Texture (optional)\n\n```xml\n<pattern id=\"dots\" width=\"24\" height=\"24\" patternUnits=\"userSpaceOnUse\">\n  <circle cx=\"2\" cy=\"2\" r=\"0.5\" fill=\"#30363d\" opacity=\"0.4\"/>\n</pattern>\n```\n\n## 5. UI Patterns (knowns.sh)\n\n### Cards\n\n```\nbg-card rounded-xl border-border shadow-sm\nhover: shadow-xl border-primary/50\n```\n\n### Buttons\n\n```\nPrimary:   bg-primary text-primary-foreground rounded-lg shadow-primary/25\nSecondary: bg-secondary text-secondary-foreground rounded-md\nGhost:     hover:bg-accent hover:text-accent-foreground\n```\n\n### Badges\n\n```\nrounded-full bg-primary/5 border-primary/20 text-primary text-xs font-medium px-3 py-1\n```\n\n### Animations\n\n- `animate-shiny-text` — shimmer effect on hero text\n- Border beam — animated gradient border\n- Scroll reveal — `opacity:0→1` + `translateY(20px→0)`\n- `active:scale-95` on buttons\n- `backdrop-blur-sm` + `bg-background/80` for glass morphism\n\n## 6. Icons\n\n- Library: Lucide React\n- Style: `stroke=\"currentColor\"`, `stroke-width=\"2\"`, `stroke-linecap=\"round\"`\n- Sizes: `h-4 w-4` (default), `h-5 w-5` (medium), `h-3.5 w-3.5` (small)\n\n## 7. Checklist khi tạo SVG mới\n\n- [ ] Background dùng gradient `#0d1117` → `#161b22` + border `#30363d`\n- [ ] Entity colors theo mapping ở Section 2\n- [ ] Font: `system-ui, -apple-system, sans-serif` cho text, `monospace` cho code\n- [ ] Node opacity fill: 0.08-0.15, stroke-width: 1-1.5\n- [ ] Edge opacity: 0.2-0.35, stroke-width: 1.2\n- [ ] Drop shadow filter trên tất cả nodes\n- [ ] Title 18px bold + subtitle 12px muted\n- [ ] Footer 10px faint text\n- [ ] Outer border-radius: 12px\n- [ ] Responsive: dùng viewBox, không fixed width/height"
