---
name: homeoffice-theme
description: >
Build HTML pages and UI components in HomeOffice Design System style.
Flat, white, hairline-border SaaS. Full Thai font support (Bai Jamjuree + Anuphan).
Use for any request involving HomeOffice UI, cf-* classes, or Thai-language SaaS pages.
triggers:
- homeoffice
- cf-card
- cf-btn
- cf-stat
- hairline
- Bai Jamjuree
- Anuphan
- ระบบหลังบ้าน
version: 2.0.0
---
# HomeOffice Design System — Skill Entry Point
> **How to use this skill:**
> This file is the entry point. For implementation, **always read the appropriate ref/ files** before writing any code:
>
> | Task | Read |
> |------|------|
> | CSS tokens, colors, shadows | `ref/tokens.md` |
> | Component HTML (cf-* classes) | `ref/components.md` |
> | Page layout, sidebar, header, grids | `ref/layouts.md` |
> | Tier system, zones, page patterns | `ref/patterns.md` |
>
> For a new full page: read **all four** ref files before writing a line of HTML.
---
## Design Principles
HomeOffice is a **flat, white, hairline-border** SaaS design system for Thai business apps.
- **White is the canvas.** No gradients, no card shadows by default. Separation via hairline borders (`1px solid rgb(var(--c-line) / 0.10)`).
- **Ink is always dark navy** `rgb(26 32 50)`, never pure black.
- **Accent is a single blue** `rgb(37 99 235)` — use sparingly for primary actions only.
- **Typography is bilingual**: Bai Jamjuree for display/headings/numbers, Anuphan for body text. Both support Thai.
- **Icons**: Lucide SVG only, `stroke-width="2"`, no emoji as UI elements.
- **Mobile-first**: base 390px → `md` 768px → `lg` 1024px.
---
## Quick Start: Minimal Page Shell
```html
Page Title — HomeOffice
...
หมวดหมู่ · หน้าย่อย
ชื่อหน้า
คำอธิบายสั้นๆ
...
...
...
...
```
---
## File Reference Index
```
homeoffice-theme/
├── SKILL.md ← You are here (entry point + quick start)
└── ref/
├── tokens.md ← CSS custom properties, colors, shadows, layout vars
├── components.md ← All cf-* component classes with full HTML examples
├── layouts.md ← Sidebar, header, main grid, sticky/fixed patterns
└── patterns.md ← Tier system, zone badges, page eyebrows, module taxonomy
```
**Read order for a new page build:**
1. `ref/tokens.md` — paste token block into `