Brurock · Light & airy · Sept 2026

Brurock UI kit

One visual language for the paintings and the website. Soft blue, pink and purple on an off-white ground, with Plum Ink for text and lines. Click any swatch to copy its code.

Foundations

Colour

Three brand colours, each with a full scale. Steps with the same number have about the same lightness across the three colours, so they always go together.

Scales

50–200 for backgrounds and large areas. 300–400 for main shapes and buttons. 500–700 for lines, text on colour, and depth. The outlined step is the core colour.

Neutrals

Status colours (website only)

Soft versions of green, yellow and red for messages such as "Sold" or "Message sent". They are tuned to sit quietly next to the brand colours.

SuccessSent, saved, available
NoticeReserved, few left
ErrorSold, something went wrong
Foundations

Typography

Bricolage Grotesque for headings has a hand-made, slightly playful shape that suits an artist. Figtree keeps body text calm and easy to read. JetBrains Mono is for small details like sizes, years and colour codes.

AaBricolage GrotesqueHeadings · 500, 700
AaFigtreeBody, buttons, forms · 400–700
AaJetBrains MonoCaptions, details · 400
Display
72 / 1.0 · 700
Soft Noise
Heading 1
48 / 1.05 · 700
New works, autumn 2026
Heading 2
34 / 1.1 · 700
Originals and prints
Heading 3
24 / 1.2 · 500
Quiet Current, 2026
Lead
20 / 1.5 · 400
A series about slowing down, painted in light blues, pinks and violets.
Body
16 / 1.6 · 400
Each piece starts with a loose sketch in pencil, then builds up in thin layers of acrylic until the colours feel like they are floating on the canvas.
Small
14 / 1.5 · 400
Shipping within Norway takes 3–5 working days.
Label
12 · 600 · caps
Available now
Caption
12.5 · mono
Acrylic on canvas · 100 × 120 cm · 2026
Foundations

Space & shape

Everything is spaced on a 4-pixel rhythm. Corners are soft and round, like the shapes in the paintings.

Spacing
Corner radius
sm · 6
md · 12
lg · 20
pill
Shadow
sm · resting
md · hover
lg · pop-ups
Components

Buttons

Use one primary button per view for the most important action. Colour buttons are for sorting and categories, never for the main action. Button text is always Plum Ink on pastels.

Variants
Colour
Sizes
States
Components

Forms

Labels always sit above the field. Focus shows a soft purple glow. Errors use the soft red and say how to fix the problem.

This email is missing its ending, for example ".com".
Helps me suggest the right size.
Preferred format
Stay in touch
Newsletter sign-up
Components

Tags & filters

Tags describe a work. Filters let visitors sort the gallery. The selected filter turns Plum Ink so it stands out clearly.

Availability
Available Reserved Sold Print edition 12/50
Category
Acrylic on canvas Series: Soft Noise Mural
Filters
Components

Messages

Short, friendly and specific. Say what happened and what the visitor can do next.

✓
Message sent

Thanks, Ingrid. I usually reply within two days.

!
Only 3 prints left

This edition of Quiet Current is almost sold out.

×
Couldn't send your message

Check your internet connection and try again.

i
Studio closed 14–21 October

Orders placed that week ship on 22 October.

Toast
Added to favourites
Components

Cards

The artwork card is the main building block of the gallery. The image always comes first and keeps a 4:5 portrait ratio.

Quiet Current
Acrylic on canvas · 100 × 120 cm · 2026
Available24 000 kr
Pale Signal
Giclée print · 50 × 70 cm · edition of 50
3 left2 400 kr
Lavender Hours
Acrylic on canvas · 80 × 100 cm · 2026
Sold—
Nov142026
Exhibition

Soft Noise, opening night

Galleri Nord, Oslo · 18:00–21:00. The first full showing of the new pastel works.

"It feels like the paintings are breathing. I bought one and it changed the whole room."
Collector, Trondheim
Putting it together

Page example

A front page built only from the pieces above. Lots of off-white space lets the art do the talking.

New series · 2026

Soft Noise

Twelve new paintings in light blue, pink and lavender. Quieter colours, same energy.

Quiet Current 2026
Pale Signal 2026
Lavender Hours 2026
Morning Tide 2026
Guidelines

In the art

Let one colour lead each piece. A rough 60 / 30 / 10 split keeps the work calm: the lead colour covers most of the area, the second supports it, and the third is the accent. Plum Ink is for lines and detail.

Do

  • Let one colour lead per piece or page section.
  • Use Plum Ink for text, lines and deep shadows.
  • Combine steps with the same number, such as all 200s, for balance.
  • Give the colours room. Off-white space is part of the look.

Don't

  • Put white text on pastel backgrounds. It's hard to read.
  • Use pure black for large areas. Keep it for small, strong accents.
  • Place pink and purple side by side in equal large areas. Separate them with blue or off-white.
  • Mix in the old saturated colours next to the pastels.
For the developer

CSS tokens

Copy these into the website's stylesheet to use the same colours, fonts and spacing everywhere.

/* Brurock UI kit · colours */
:root {
  --blue-50: #ECFAFB;  --blue-100: #D7F3F5;  --blue-200: #B8E9EC;  --blue-300: #A9E3E7;
  --blue-400: #6EB9BF; --blue-500: #428E93;  --blue-600: #286266;  --blue-700: #16393B;
  --pink-50: #FFF3F8;  --pink-100: #FEE5EF;  --pink-200: #FAD1E1;  --pink-300: #EFC0D3;
  --pink-400: #D198B0; --pink-500: #A36E85;  --pink-600: #724A5B;  --pink-700: #432A35;
  --purple-50: #FEF3FB;  --purple-100: #FBE6F5; --purple-200: #F4D2EB; --purple-300: #D8B4CE;
  --purple-400: #CA99BD; --purple-500: #9D6F91; --purple-600: #6E4B65; --purple-700: #402B3B;
  --offwhite: #F1F6F0; --plum-ink: #2C1F28; --black: #030506;
  --success: #C9EFD9; --success-ink: #2E6148;
  --notice: #F0E4BF;  --notice-ink: #635423;
  --error: #FFD9D2;   --error-ink: #77463F;

  /* Type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Space (4px rhythm) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Shape */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
}