18 lines
956 B
Markdown
18 lines
956 B
Markdown
|
|
## Styleguide
|
|
|
|
**clavitor.css** is the single global stylesheet for all clavitor web surfaces — marketing site (`clavitor-web`) and the app UI (`clavitor`).
|
|
|
|
- Live: https://clavitor.com/styleguide.html
|
|
- Source: `clavitor-web/clavitor.css`
|
|
|
|
### Rules (no exceptions)
|
|
1. **One stylesheet.** `clavitor.css` only. No Tailwind, no inline styles, no `<style>` blocks.
|
|
2. **One rule per class.** If you need a variant, add a modifier class (e.g. `.card.gold`), not a new inline style.
|
|
3. **One width.** `--width: 1280px` via `.container`. Never hardcode a max-width anywhere else.
|
|
4. **One padding.** `--pad: 2rem` via `.container`. Never hardcode horizontal padding.
|
|
5. **CSS variables for everything.** Colors, spacing, radius, fonts — all via `var(--*)`.
|
|
|
|
### To use in clavitor app
|
|
Copy or symlink `clavitor.css` into `clavitor/web/` and embed it. The token set (colors, fonts, radius) is shared — app UI should feel identical to the marketing site.
|