---

name: brutalist-academic-ui description: Skriptoteket-specific brutalist/academic UI design for the Vue 3 + Vite SPA. Uses Tailwind v4 utilities mapped to HuleEdu tokens and SPA primitives.

Brutalist Academic UI

Opinionated design skill for interfaces where intellectual rigor, typographic precision, and structural honesty matter.

Skriptoteket Compatibility (must follow)

• Vue 3 + Vite SPA only. SSR/HTMX is removed; do not re-introduce it.
• Tailwind CSS v4 with @theme inline token bridge. Prefer utilities in templates over custom CSS.
• Tokens are canonical: src/skriptoteket/web/static/css/huleedu-design-tokens.css (do not edit directly).
• SPA entry point: frontend/apps/skriptoteket/src/assets/main.css (import Tailwind + tokens + theme once).
• Use SPA primitives before inventing new ones:
  • Buttons: .btn-primary, .btn-cta, .btn-ghost
  • Panels (nested): .panel-inset, .panel-inset-canvas
  • Messages: .toast-* (via ToastHost), .system-message* (via SystemMessage)
  • Badges: .status-pill
  • Page text: .page-title, .page-description
• No stacked brutal shadows: only the outermost “panel/card” gets shadow-brutal*. Panels/fields nested inside a shadowed surface must use shadow-none + thicker, uniform borders (panel-inset*, or border-2 border-navy/20) to keep the UI calm and readable.
• No Tailwind default palette leakage in product UI: avoid bg-slate-*, text-gray-*, etc. Use token-mapped utilities (bg-canvas, text-navy, shadow-brutal-sm) or CSS variables (var(--color-*), var(--huleedu-*)).
• Editor ergonomics: full-height editor routes require min-h-0 + overflow discipline; follow the Script Editor layout patterns (route-stage--editor, AuthLayout).

When to Use

Activate when user:

• Builds websites, landing pages, dashboards, documentation sites
• Needs institutional or academic visual language
• Mentions: "brutalist", "academic", "minimal", "serious UI"
• Wants to avoid generic startup aesthetics (gradients, soft shadows, pill-everything)

I Need To...

Quick Reference

Do

• Use token-mapped utilities: bg-canvas, text-navy, border-navy, shadow-brutal-sm, font-serif.
• Use CSS variables when a token is not mapped: p-[var(--huleedu-space-4)], text-[var(--huleedu-text-sm)].
• Use the SPA button primitives for actions.
• Prefer opacity-only transitions (hard borders/shadows shimmer when translated).
• Prefer one brutal shadow per major surface (page card / editor workspace / modal). Nested sections get borders, not shadows.

Avoid

• Tailwind default palette (bg-slate-*, text-gray-*) in product UI.
• Hardcoded hex colors or ad-hoc shadows.
• Large radii, blur/backdrop filters, or decorative gradients.
• Motion/hover transforms that distort “hard” edges (translate, scale) unless there’s a strong UX reason.

Font Stack

Use token fonts via Tailwind utilities: font-sans, font-serif, font-mono.

Button Primitives

Copy<button class="btn-primary">Spara</button>
<button class="btn-cta">Publicera</button>
<button class="btn-ghost">Redigera</button>

Utility Buttons (Toolbars / Micro UI)

Use .btn-ghost as a base and override size/shadow for dense controls:

Copy<button
  class="btn-ghost shadow-none h-[28px] px-2.5 py-1 text-[10px] font-semibold normal-case tracking-[var(--huleedu-tracking-label)] border-navy/30 bg-canvas leading-none"
>
  Formatera
</button>

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.