Commit f7f61b6a authored by Lê Ngọc Tú's avatar Lê Ngọc Tú

update rules: theme

parent 2ab8e763
# AI Coding Rules: Theme & UI Aesthetics
## 1. Core Theme
- **Theme Mode:** Light Mode only.
- **Style:** Modern Minimalist, clean, and professional. Avoid heavy Glassmorphism; prefer flat design with very subtle drop shadows for depth.
- **Architecture:** Single-page application (SPA) with smooth scrolling navigation.
## 2. Color Palette
- **Backgrounds:** Use crisp white (`bg-white`) and soft slate/off-white (`bg-slate-50` or `bg-slate-100`) to create soft separation between sections without relying on harsh borders.
- **Text:** High contrast for readability. Use dark slate (`text-slate-900`) for headings and medium slate (`text-slate-600` or `text-slate-700`) for paragraphs and secondary text.
- **Primary Accent:** Indigo / Royal Blue (e.g., `indigo-600`). Use this for buttons, interactive elements, hover states, and key highlights to convey a professional, tech-focused (Backend Developer) aesthetic.
## 3. UI Components & Layout
- **Spacing:** Use generous padding and margins (e.g., `py-16` to `py-24` for sections) to let the content breathe.
- **Cards & Elements:** Project and experience cards should have a white background, subtle rounded corners (`rounded-xl` or `rounded-2xl`), and a very light shadow (`shadow-sm` or `shadow`). Hover states can elevate the card slightly (`hover:-translate-y-1 hover:shadow-md`).
- **Icons:** Use Lucide React icons. Ensure stroke width and sizes are consistent across the site.
- **Typography:** Ensure a clean sans-serif font is applied globally with standard antialiasing (`antialiased`).
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment