aharstad91/bimverdi-design

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:

| AI Default | BIM Verdi Instead | |------------|-------------------| | Inter font everywhere | Moderat (fallback: Inter) | | Purple/blue gradients | Warm orange #FF8B5E accent | | Cards with shadows everywhere | Borderless sections + dividers | | Rounded corners (16px+) | Subtle radius (8px buttons, 12px cards) | | Heavy drop shadows | No shadows or very subtle | | Hover on containers | Hover ONLY on interactive elements | | Generic placeholder text | Real Norwegian content |

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

/* Primary */
--color-primary: #FF8B5E;        /* Warm orange - main accent */
--color-primary-dark: #E67A4E;
--color-primary-light: #FFBFA8;

/* Neutrals */
--color-black: #1A1A1A;          /* Primary text */
--color-gray-dark: #383838;
--color-gray-medium: #888888;
--color-gray-light: #D1D1D1;
--color-white: #FFFFFF;

/* Backgrounds */
--color-beige: #F7F5EF;          /* Warm off-white */
--color-beige-dark: #EFE9DE;
body background: #FAFAF8;

/* State */
--color-success: #B3DB87;
--color-error: #772015;
--color-alert: #FFC845;
--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

| Element | Size | Weight | Line Height | |---------|------|--------|-------------| | H1 | 3rem (48px) | 700 | 1.2 | | H2 | 2rem (32px) | 700 | 1.2 | | H3 | 1.5rem (24px) | 600 | 1.2 | | H4 | 1.25rem (20px) | 600 | 1.2 | | Body | 1rem (16px) | 400 | 1.5-1.75 | | Small | 0.875rem (14px) | 400 | 1.5 |

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

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

Use few, consistent spacing values per page.

Layout Widths

| Context | Max Width | |---------|-----------| | Standard content | 1200-1280px | | Forms/flows | 960px | | Side gutters | Consistent, responsive |

Buttons

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

<!-- Primary (filled black) -->
<a href="#" class="bv-btn bv-btn--primary">
  <span class="bv-btn__text">Lagre</span>
</a>

<!-- Secondary (outline) -->
<a href="#" class="bv-btn bv-btn--secondary">
  <span class="bv-btn__text">Avbryt</span>
</a>

<!-- Tertiary (ghost) -->
<a href="#" class="bv-btn bv-btn--tertiary">
  <span class="bv-btn__text">Se mer</span>
</a>

<!-- With icon -->
<a href="#" class="bv-btn bv-btn--primary">
  <span class="bv-btn__icon">[lucide-icon]</span>
  <span class="bv-btn__text">Nytt verktoy</span>
</a>

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

Icons

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

| Icon | Usage | |------|-------| | layout-dashboard | Dashboard | | wrench | Verktoy | | file-text | Artikler | | lightbulb | Prosjektideer | | calendar | Arrangementer | | user | Brukerprofil | | building-2 | Bedrift/Foretak | | chevron-right | Navigate | | plus | Add new | | pencil | Edit | | trash-2 | Delete |

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

Containers & Sections

Default: Borderless sections with dividers

<!-- Standard section -->
<section class="bv-section">
  <h2 class="bv-section__title">Oversikt</h2>
  <p class="bv-section__helper">Valgfri hjelpetekst</p>
  <div class="bv-section__content">
    <!-- Content here -->
  </div>
</section>
<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

<!-- Non-clickable info card -->
<div class="bv-card">
  <div class="bv-card__header">
    <h3 class="bv-card__title">Tittel</h3>
  </div>
  <div class="bv-card__body">
    <p>Innhold</p>
  </div>
  <div class="bv-card__footer">
    <a href="#" class="bv-btn bv-btn--tertiary">
      Se detaljer
      <span class="bv-btn__icon">[chevron-right]</span>
    </a>
  </div>
</div>

Dividers

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

<hr class="bv-divider">

Forms

Layout: 960px max-width, centered

<div class="bv-form-layout">
  <div class="bv-form-section">
    <h3>Seksjonstittel</h3>
    <div class="bv-form-group">
      <label for="field">Feltnavn</label>
      <input type="text" id="field" name="field">
    </div>
  </div>
  <hr class="bv-divider">
  <!-- More sections -->
</div>

Sticky actions bar:

<div class="bv-form-actions bv-form-actions--sticky">
  <a href="#" class="bv-btn bv-btn--tertiary">Avbryt</a>
  <a href="#" class="bv-btn bv-btn--secondary">Lagre som kladd</a>
  <button type="submit" class="bv-btn bv-btn--primary">Lagre</button>
</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 get_header(); ?>

<main class="bv-main">
  <div class="bv-container">
    <!-- Page content -->
  </div>
</main>

<?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)