# Pradit (ประดิษฐ์) Design System

**Philosophy:** "Engineer First, Sales Second."  
The aesthetic of Pradit is minimal, precise, and reminiscent of technical documentation or a high-end code editor. It avoids gradients, heavy drop shadows, and stock photography in favor of clean typography, terminal-inspired visual elements, and high information density.

---

## 1. Color Palette

We use a strict semantic color system.

| Token       | Hex       | Usage                                                                            |
| :---------- | :-------- | :------------------------------------------------------------------------------- |
| **Paper**   | `#fdfdfd` | Main background. Slightly off-white to reduce eye strain.                        |
| **Ink**     | `#111111` | Primary text, strong headers, active states.                                     |
| **Subtle**  | `#666666` | Secondary text, metadata, descriptions.                                          |
| **Accent**  | `#2563eb` | Primary action color (Blue-600). Used sparingly for links and active indicators. |
| **Code Bg** | `#1e1e1e` | Dark background for terminal blocks and code snippets (VS Code Dark default).    |

---

## 2. Typography

We use a tri-font stack to separate functional UI from reading content.

### Serif: Merriweather

_Usage:_ Long-form text, blog posts, titles, quotes.
_Why:_ Establishes authority and academic rigor.

### Sans-Serif: Inter

_Usage:_ UI labels, navigation, buttons, short descriptions.
_Why:_ Clean, legible, and modern.

### Monospace: Fira Code

_Usage:_ Code snippets, terminal inputs, tags, dates, metadata.
_Why:_ Signals technical precision.

---

## 3. UI Patterns & Components

### The "Terminal" Aesthetic

Elements that represent "work" (code, search, inputs) should mimic terminal interfaces.

- **Inputs:** No rounded corners (or very slight `rounded-sm`). Bottom borders or dark backgrounds.
- **Prompt:** Use `>` or `$` prefixes for input labels.

### Borders over Shadows

Use 1px borders (`border-gray-200`) to define hierarchy. Shadows should be subtle and used only for floating elements (modals, sticky headers).

### Buttons

- **Primary:** `bg-ink` text-white, `rounded-sm`. Uppercase text, tracking-widest.
- **Secondary:** `border border-gray-200` text-ink.
- **Tags/Pills:** `rounded-full`, `uppercase`, `text-xs`, `font-bold`.

### Interactive Visualizations

Do not use static images for technical concepts. Use code blocks (`TerminalBlock`) or interactive React components (`MatrixViz`) that allow the user to manipulate variables.

---

## 4. Layout Grid

- **Container:** Max-width 7xl (`max-w-7xl`) centered.
- **Spacing:** Generous vertical whitespace (`py-24`).
- **Columns:** 12-column grid for complex layouts (Sidebar takes 3, Content takes 6-9).

---

## 5. Voice & Tone

- **English:** Professional, concise, jargon-correct. No marketing fluff.
- **Thai:** Formal but accessible. Use English terms for specific technical concepts (e.g., "Fine-tuning", "Latency") where a Thai translation would be ambiguous.