Brutalist Academic UI
Opinionated design skill for interfaces where intellectual rigor, typographic precision, and structural honesty matter.
Skriptoteket Compatibility (must follow)
- No Tailwind / utility CSS frameworks (see
docs/adr/adr-0029-frontend-styling-pure-css-design-tokens.md).
- Use HuleEdu tokens + component classes (see
.agent/rules/045-huleedu-design-system.md and src/skriptoteket/web/static/css/huleedu-design-tokens.css).
- Prefer existing classes before inventing new ones:
.huleedu-btn, .huleedu-card, .huleedu-link, .huleedu-table, .huleedu-row.
When to Use
Activate when user:
- Builds websites, landing pages, dashboards, documentation sites
- Needs institutional or academic visual language
- Mentions: "brutalist", "academic", "minimal", "no gradients", "serious UI"
- Wants to avoid AI-generated aesthetic (purple gradients, Roboto, pill buttons)
I Need To...
| Task |
Read |
| Align with Skriptoteket tokens + button hierarchy |
.agent/rules/045-huleedu-design-system.md |
| Understand grid/typography/color principles |
fundamentals.md |
| Build page structure, layouts, navigation |
patterns.md |
| Create data tables, ledgers, state rows |
examples/tables-ledgers.md |
| Build buttons, cards, interactions |
examples/components.md |
Quick Reference
Banned
- Purple/startup gradients
- Roboto, Open Sans, Lato, Inter
- Tailwind / utility-first styling that bypasses tokens
border-radius > var(--huleedu-radius-lg) (8px) for containers- Decorative blobs, floating shapes
- Soft shadows, backdrop blur
- Scale/bounce hover animations
Font Stack
/* Use HuleEdu token fonts (defined in src/skriptoteket/web/static/css/huleedu-design-tokens.css). */
font-family: var(--huleedu-font-serif); /* long-form reading */
font-family: var(--huleedu-font-sans); /* UI */
font-family: var(--huleedu-font-mono); /* code/ids */
Spacing Scale
/* Representative spacing tokens (4px base scale). */
--huleedu-space-1: 4px; --huleedu-space-2: 8px; --huleedu-space-3: 12px; --huleedu-space-4: 16px;
--huleedu-space-6: 24px; --huleedu-space-8: 32px; --huleedu-space-12: 48px; --huleedu-space-16: 64px;
Color Palette
/* Use HuleEdu tokens for all color decisions (no hardcoded hex). */
--huleedu-navy: #1C2E4A; /* ink */
--huleedu-canvas: #F9F8F2; /* paper */
--huleedu-burgundy: #4D1521; /* accent / CTA / attention */
--huleedu-warning: #D97706;
--huleedu-error: #DC2626;
Core Principle
The best interface is one where you notice the content, not the interface. Every element earns its place. Typography does the work. Whitespace is structure.
1---2name: brutalist-academic-ui3description: Skriptoteket-specific brutalist/academic UI design. Use for Vue/Vite SPA and SSR templates when you want grid-based layouts, systematic typography, and high-contrast “academic” aesthetics, while staying compatible with Skriptoteket’s pure-CSS + HuleEdu token stack (no Tailwind).4---56# Brutalist Academic UI78Opinionated design skill for interfaces where intellectual rigor, typographic precision, and structural honesty matter.910## Skriptoteket Compatibility (must follow)1112- **No Tailwind / utility CSS frameworks** (see `docs/adr/adr-0029-frontend-styling-pure-css-design-tokens.md`).13- **Use HuleEdu tokens + component classes** (see `.agent/rules/045-huleedu-design-system.md` and `src/skriptoteket/web/static/css/huleedu-design-tokens.css`).14- Prefer existing classes before inventing new ones: `.huleedu-btn`, `.huleedu-card`, `.huleedu-link`, `.huleedu-table`, `.huleedu-row`.1516## When to Use1718Activate when user:19- Builds websites, landing pages, dashboards, documentation sites20- Needs institutional or academic visual language21- Mentions: "brutalist", "academic", "minimal", "no gradients", "serious UI"22- Wants to avoid AI-generated aesthetic (purple gradients, Roboto, pill buttons)2324## I Need To...2526| Task | Read |27|------|------|28| Align with Skriptoteket tokens + button hierarchy | `.agent/rules/045-huleedu-design-system.md` |29| Understand grid/typography/color principles | [fundamentals.md](fundamentals.md) |30| Build page structure, layouts, navigation | [patterns.md](patterns.md) |31| Create data tables, ledgers, state rows | [examples/tables-ledgers.md](examples/tables-ledgers.md) |32| Build buttons, cards, interactions | [examples/components.md](examples/components.md) |3334## Quick Reference3536### Banned3738- Purple/startup gradients39- Roboto, Open Sans, Lato, Inter40- Tailwind / utility-first styling that bypasses tokens41- `border-radius` > `var(--huleedu-radius-lg)` (8px) for containers42- Decorative blobs, floating shapes43- Soft shadows, backdrop blur44- Scale/bounce hover animations4546### Font Stack4748```css49/* Use HuleEdu token fonts (defined in src/skriptoteket/web/static/css/huleedu-design-tokens.css). */50font-family: var(--huleedu-font-serif); /* long-form reading */51font-family: var(--huleedu-font-sans); /* UI */52font-family: var(--huleedu-font-mono); /* code/ids */53```5455### Spacing Scale5657```css58/* Representative spacing tokens (4px base scale). */59--huleedu-space-1: 4px; --huleedu-space-2: 8px; --huleedu-space-3: 12px; --huleedu-space-4: 16px;60--huleedu-space-6: 24px; --huleedu-space-8: 32px; --huleedu-space-12: 48px; --huleedu-space-16: 64px;61```6263### Color Palette6465```css66/* Use HuleEdu tokens for all color decisions (no hardcoded hex). */67--huleedu-navy: #1C2E4A; /* ink */68--huleedu-canvas: #F9F8F2; /* paper */69--huleedu-burgundy: #4D1521; /* accent / CTA / attention */70--huleedu-warning: #D97706;71--huleedu-error: #DC2626;72```7374## Core Principle7576The best interface is one where you notice the content, not the interface. Every element earns its place. Typography does the work. Whitespace is structure.
diegosouzapw