# GFS Dashboard Header Standard
**Version:** 8.0 | **Updated:** May 2026
**Reference:** [gfs-hub.pages.dev/design-system](https://gfs-hub.pages.dev/design-system)
Copy this exact `` block into every GFS dashboard. No deviations.
---
## Complete Header Block
```html
PAGE TITLE — GFS
```
---
## Closing Body Block
```html
```
---
## Rules
| Rule | Detail |
|------|--------|
| **Title format** | `Page Name — GFS` |
| **Fonts** | Inter (400/500/600/700) + JetBrains Mono (400/500/600) via Google Fonts CDN |
| **Font features** | `font-feature-settings: 'cv01', 'cv02'` on body (Inter alternate glyphs) |
| **Icons** | Lucide via unpkg CDN — init with `lucide.createIcons()` or via `gfs-init.js` |
| **Charts** | Chart.js via jsDelivr — only include if dashboard has charts |
| **CountUp** | Only include if dashboard has animated KPI numbers |
| **CSS tokens** | Copy the entire `:root` block exactly — no modifications, no partial copies |
| **Status tokens** | Always use the 3-token pattern: `--status` (icon), `--status-text` (text on bg), `--status-bg` (background) |
| **Body reset** | `* { margin: 0; padding: 0; box-sizing: border-box; }` — always included |
| **Smoothing** | `-webkit-font-smoothing: antialiased` — always included |
| **Grid columns** | Always `minmax(0,1fr)` — never plain `1fr` |
| **Numeric columns** | `font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right` |
| **Negative numbers** | Parentheses + `color: var(--danger)` — e.g. `($12,400)` |
| **Empty cells** | Em dash `—` — never blank |
| **Cards** | No box-shadow, `1px solid var(--border)`, `border-radius: 10px` |
---
## Do Not
- Change any hex value in `:root`
- Use a different font stack
- Add `box-shadow` to cards
- Use `1fr` instead of `minmax(0,1fr)` for equal columns
- Hardcode colors — always use `var(--token)`
- Skip the body reset or font-smoothing
- Mix icon libraries — Lucide only
- Use emoji in place of Lucide icons
- Use casual/excited language ("Yay!", "Oops!", exclamation marks)
- Name files with spaces or camelCase — always `kebab-case.html`
- Use CSS classes without the `.gfs-` prefix
- Use stock photography or decorative images in dashboards