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.

3.0 KiB Raw Blame History