Dasa System Design
概览
CSS-only design system for (daas.co.id) — a system integration & data technology company in Indonesia. Tokens and class-based components only, no React, no build step (one optional ~2 KB vanilla script, dasa-ui.js, adds behaviour to dismissible alerts). Derived from the computed styles of the live site and refined with the brand's official color/type/spacing specification (Aug 2026). styles.css is the single entry point: it @imports Google Fonts, then tokens.css, then components.css, in that order (components read the custom properties tokens defines). Load it once; don't link the three files separately unless you need to omit the font import. components.css sets body defaults (background var(--color-bg), text var(--color-text-primary), base font var(--font-copy)). If your root isn't a real , apply those three declarations to your top-level container explicitly. The system is CSS-only; the script is needed for dismissible/auto-closing alerts. Load it once ( ).
README
以下为原文 README 节选，完整内容请查看原文。
Dasa Design System
CSS-only design system for PT Dasa Aprilindo Sentosa (daas.co.id) — a
system integration & data technology company in Indonesia. Tokens and
class-based components only, no React, no build step (one optional ~2 KB
vanilla script, dasa-ui.js, adds behaviour to dismissible alerts). Derived from the
computed styles of the live site and refined with the brand’s official
color/type/spacing specification (Aug 2026).
Versi (v1 & v2)
| Versi | Folder | Keterangan |
|---|---|---|
| v1 | v1/ |
Ukuran tetap (fokus desktop). Stabil, tidak diubah. |
| v2 | v2/ |
Responsif penuh (mobile, tablet, desktop, layar besar). Direkomendasikan. |
Pilih versi di index.html (ui.dasa.my.id), atau langsung pada path stylesheet: v1/styles.css atau v2/styles.css.
Perbedaan v2: token tipografi dan spasi fluid (clamp()), grid mobile-first, breakpoint 480/768/1024/1440/1920, container melebar di layar besar (1320px di 1440+, 1600px di 1920+), navbar membungkus, modal menjadi bottom-sheet di mobile, target sentuh 44px (pointer: coarse), dan dukungan safe-area. Penyesuaian otomatis lewat media query, tanpa deteksi device. Pastikan halaman memiliki ``.
Komponen tambahan v2 (navbar hamburger, sidebar/app-shell, accordion, switch, dropdown, avatar, empty state, skeleton, toast, utilitas layout, fokus keyboard & kontras) dijelaskan di docs/KOMPONEN.md.
Di v2, .card--accent (garis oranye di atas kartu) dihapus; kartu memakai .card biasa.
Setup
styles.css is the single entry point: it @imports Google Fonts, then
tokens.css, then components.css, in that order (components read the
custom properties tokens defines). Load it once; don’t link the three files
separately unless you need to omit the font import.
components.css sets body defaults (background var(--color-bg), text
var(--color-text-primary), base font var(--font-copy)). If your root
isn’t a real ``, apply those three declarations to your top-level
container explicitly.
Optional script: dasa-ui.js
The system is CSS-only; the script is needed only for dismissible/auto-closing
alerts. Load it once (``). Alerts inserted later
(HTMX, fetch) are picked up automatically. Events on the alert: dasa:alert-close
(cancelable, before closing) and dasa:alert-removed (on document, after removal —
useful to re-measure layout). API: DasaUI.dismissAlert(el), DasaUI.initAlerts(root).
Without the script alerts render normally; the close button is inert.
Light & dark mode
Every semantic surface/text token is redefined per theme, not duplicated
into separate components. Default is light; add data-theme="dark" to
`` (or any ancestor) to switch:
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add dasaapp/ui