Header
A black bar with a white wordmark on the left and label nav on the right. Sticky.
Variants
| Variant | Class | When |
|---|
| Compact | .sys-header | Default, and every inner page. |
| Grow, then shrink | .sys-header--grow + .is-scrolled on <html> | A home page that opens with the wordmark. 192px tall, shrinks to 80px after 40px of scroll. |
| Seal + wordmark | .sys-brand with an img and a span | A brand with a mark (Art Dept’s seal). |
Stipulations
- No bottom border on the bar: black on black adds height and puts the contents above center.
- Logo art is reversed with
filter: brightness(0) invert(1) so it’s pure white, not gray.
- Nav links carry a transparent top border to balance the hover underline.
- Inner pages use the compact header; only home grows.
Site variations
| Site | Variation | Why |
|---|
| Art Dept | Seal + text wordmark; static, 80px | The seal is the brand mark. |
| jonesco.com | JONES© vector wordmark; grows on home, compact on inner pages | Home opens on the brand; inner pages get straight to work. |
| Financial Dashboard | Two-line title with the date under it; static so only the section nav pins; icon button for the changelog | A long, dated document page. |