80 lines
3.0 KiB
Markdown
80 lines
3.0 KiB
Markdown
# 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.
|