BIM Verdi Design Skill

This skill generates frontend code for BIM Verdi (bimverdi.no) that follows the established design system and avoids generic "AI slop" aesthetics.

Anti-Pattern Awareness

LLMs naturally converge toward high-probability outputs. In frontend design, this creates generic results. Avoid these AI defaults:

Design Philosophy

Variant B: Dividers & Whitespace is the standard.

Core principles:

• P1: Whitespace + hairline dividers are primary structure (not boxes)
• P2: Only buttons, links, menu items are clickable
• P3: Information = borderless sections; Actions = buttons/links
• P4: Never show empty fields (hide or show "Ikke oppgitt")
• P5: Calm, consistent enterprise style (minimal visual noise)

Color Palette

css
1/* Primary */
2--color-primary: #FF8B5E;        /* Warm orange - main accent */
3--color-primary-dark: #E67A4E;
4--color-primary-light: #FFBFA8;
5
6/* Neutrals */
7--color-black: #1A1A1A;          /* Primary text */
8--color-gray-dark: #383838;
9--color-gray-medium: #888888;
10--color-gray-light: #D1D1D1;
11--color-white: #FFFFFF;
12
13/* Backgrounds */
14--color-beige: #F7F5EF;          /* Warm off-white */
15--color-beige-dark: #EFE9DE;
16body background: #FAFAF8;
17
18/* State */
19--color-success: #B3DB87;
20--color-error: #772015;
21--color-alert: #FFC845;
22--color-info: #005898;

Usage rules:

• Primary orange: CTA buttons, active states, important links
• Never introduce new accent colors without explicit decision
• Text is always #1A1A1A or #383838
• Backgrounds are warm (beige family), never pure white or gray

Typography

Font stack: 'Moderat', 'Inter', system-ui, -apple-system, sans-serif

Rules:

• No ALL CAPS except sparingly for labels/overlines
• Semantic heading order (H1 -> H2 -> H3)
• Good line height for readability

Spacing System

8px base scale: 4, 8, 12, 16, 24, 32, 40, 48, 64

css
1--spacing-xs: 0.5rem;   /* 8px */
2--spacing-sm: 1rem;     /* 16px */
3--spacing-md: 1.5rem;   /* 24px */
4--spacing-lg: 2rem;     /* 32px */
5--spacing-xl: 3rem;     /* 48px */
6--spacing-2xl: 4rem;    /* 64px */

Use few, consistent spacing values per page.

Layout Widths

Buttons

Standard button: 36px height, 8px radius, Inter Medium 14px

html
1<!-- Primary (filled black) -->
2<a href="#" class="bv-btn bv-btn--primary">
3  <span class="bv-btn__text">Lagre</span>
4</a>
5
6<!-- Secondary (outline) -->
7<a href="#" class="bv-btn bv-btn--secondary">
8  <span class="bv-btn__text">Avbryt</span>
9</a>
10
11<!-- Tertiary (ghost) -->
12<a href="#" class="bv-btn bv-btn--tertiary">
13  <span class="bv-btn__text">Se mer</span>
14</a>
15
16<!-- With icon -->
17<a href="#" class="bv-btn bv-btn--primary">
18  <span class="bv-btn__icon">[lucide-icon]</span>
19  <span class="bv-btn__text">Nytt verktoy</span>
20</a>

Sizes: --small (28px), --medium (36px), --large (44px)

Icons

Framework: Lucide Icons (https://lucide.dev)

Sizes: 16px (small), 20px (medium), 24px (large)

Containers & Sections

Default: Borderless sections with dividers

html
1<!-- Standard section -->
2<section class="bv-section">
3  <h2 class="bv-section__title">Oversikt</h2>
4  <p class="bv-section__helper">Valgfri hjelpetekst</p>
5  <div class="bv-section__content">
6    <!-- Content here -->
7  </div>
8</section>
9<hr class="bv-divider">

Soft panels (rare, only for action groups):

• No shadow
• Subtle background (#F7F5EF) or hairline border
• Never hoverable

Cards

Cards are NOT clickable unless explicitly designed with:

1. Explicit "Se detaljer" link + chevron
2. Defined hover/focus states
3. Documented as exception

html
1<!-- Non-clickable info card -->
2<div class="bv-card">
3  <div class="bv-card__header">
4    <h3 class="bv-card__title">Tittel</h3>
5  </div>
6  <div class="bv-card__body">
7    <p>Innhold</p>
8  </div>
9  <div class="bv-card__footer">
10    <a href="#" class="bv-btn bv-btn--tertiary">
11      Se detaljer
12      <span class="bv-btn__icon">[chevron-right]</span>
13    </a>
14  </div>
15</div>

Dividers

Hairline divider: 1px, low contrast (#E5E5E5 or similar)

html
1<hr class="bv-divider">

Forms

Layout: 960px max-width, centered

html
1<div class="bv-form-layout">
2  <div class="bv-form-section">
3    <h3>Seksjonstittel</h3>
4    <div class="bv-form-group">
5      <label for="field">Feltnavn</label>
6      <input type="text" id="field" name="field">
7    </div>
8  </div>
9  <hr class="bv-divider">
10  <!-- More sections -->
11</div>

Sticky actions bar:

html
1<div class="bv-form-actions bv-form-actions--sticky">
2  <a href="#" class="bv-btn bv-btn--tertiary">Avbryt</a>
3  <a href="#" class="bv-btn bv-btn--secondary">Lagre som kladd</a>
4  <button type="submit" class="bv-btn bv-btn--primary">Lagre</button>
5</div>

Page Templates

Archive page (e.g., /deltakere/)

PageHeader: Title + count + primary action button
|
Filter/search (if applicable)
|
Grid/List of items
|
Pagination

Single page (e.g., /deltakere/firmanavn/)

Breadcrumb
|
PageHeader: Title + actions (Edit, etc.)
|
Two-column layout:
  Left: Borderless sections (Oversikt, Detaljer)
  Right: Aside blocks (Status, Snarveier)

Form page (e.g., /min-side/nytt-verktoy/)

Breadcrumb
|
PageHeader: Title + helper text
|
960px form layout with sections + dividers
|
Sticky action bar

Interaction Rules

Clickable elements MUST be:

• <button> or button component
• <a> or link component
• Menu item
• Explicit row action with icon + label

Hover states:

• ONLY on interactive elements
• Links: underline on hover
• Buttons: background change
• Containers: NEVER hover

Focus states:

• Always visible (outline/ring)
• WCAG AA compliant

WordPress/PHP Context

This is a WordPress theme. Use:

• PHP for templates (single-foretak.php, archive-foretak.php)
• ACF fields for custom data
• Existing CSS classes from design-system.php
• Lucide icons as inline SVG

Template structure:

php
1<?php get_header(); ?>
2
3<main class="bv-main">
4  <div class="bv-container">
5    <!-- Page content -->
6  </div>
7</main>
8
9<?php get_footer(); ?>

Checklist Before Generating

When generating UI code, verify:

• Using existing CSS classes from design-system.php
• Following Variant B (dividers/whitespace, not boxes)
• Containers are NOT clickable
• Only interactive elements have hover/pointer
• Empty fields hidden or show "Ikke oppgitt"
• Layout widths: 1200-1280 standard, 960 for forms
• Spacing on 8px scale
• Colors from palette only
• Lucide icons only
• Norwegian text (not lorem ipsum)
• Semantic HTML (proper headings, buttons vs links)
• Accessible (labels, focus states, contrast)