320 tokens, 3-layer. reference → semantic → component. single source of truth.
getting started
1thay là design system cho saas dashboards, infographics, và landing pages — thiết kế cho một người làm việc độc lập. hướng dẫn này giúp bạn bắt đầu trong 5 phút.
cài đặt
1
clone + install
git clone https://github.com/kien-day/1thay-com.git
cd 1thay-com && npm install 2
import tokens
src/tokens/tokens.css là single source of truth — 320 tokens, kiến trúc 3 lớp (reference → semantic → component).
/* trong astro — import ở BaseLayout */
import '../tokens/tokens.css';
/* hoặc global.css */
@import 'src/tokens/tokens.css'; 3
dùng components
mỗi component có component tokens riêng — tự động kế thừa brand + dark mode.
import { Button } from '@1thay/core';
import { Card, CardHeader, CardBody } from '@1thay/core';
import { Input } from '@1thay/core';
import { Badge } from '@1thay/core'; 4
chọn brand
4 brand modes. mặc định reputa-blue. chuyển qua data-brand hoặc BrandSwitch.
<div data-brand="reputa-premier">
<Button>nút đỏ</Button>
</div>
<BrandSwitch client:load />kiến trúc hệ thống
24 components, code-first workshop. stories, interaction tests, dark mode + brand variants.
foundations (tokens), patterns (ui), guidelines (best practices).
visual reference — mirrors code. không phải source of truth.
quy trình code-first
storybookbuild component
→ tokens.csschuẩn hoá tokens
→ astrotích hợp page
→ figmađối chiếu
component được build và test trong storybook trước, sau đó tích hợp vào astro pages. mọi giá trị thiết kế đều qua tokens — không hardcode.