MerArt · Brand Platform

A living brand
& design system

This is the MerArt brand platform — one source for logo, colours, typography, components and tone of voice. Built as a scalable platform, not a static document, so the brand stays consistent across web, print and social media.

1
design system
6
colour tokens
2
typefaces
reuse
02 — Colours

Colour system & tokens

A calm, neutral base with one clear accent. The accent is reserved for the most important element — action and focus.

accent
Plum
#8C5A63
Primary · action · focus
ink
Ink
#1C1B19
Text · strong contrast
gray-500
Grey
#57524C
Secondary text
sage
Sage
#B7B9B5
From the logo · secondary
sand
Sand
#F1EDE6
Surface · sections
paper
Paper
#FAF8F3
Background
Aa · white on plum ✓ AA
Aa · white on ink ✓ AAA
Aa · ink on paper ✓ AAA
Aa · plum on sand ✓ AA
03 — Typography

Typography & scale

Cormorant Garamond brings elegance and character to headings; Jost brings calm readability to body text and UI. A simple scale keeps the rhythm consistent.

DisplayBrandCormorant Garamond · 48 · 600
Heading H1A system that scalesCormorant Garamond · 32 · 600
Heading H2Consistency on every surfaceCormorant Garamond · 24 · 500
BodyCalm, readable body text for longer content and documentation.Jost · 17 · 400
CaptionMetadata, captions and small text.Jost · 13 · 400
Aa Gg Kk Øø 24
Cormorant Garamond
Display & headings · 400–700
Aa Gg Kk Øø 24
Jost
Body & UI · 300–600
04 — Components

Component library

Reusable building blocks with defined states — the same logic on web, print and social.

Buttons
Badges
BrandNewCampaign
Cards
Project card

Image surface, title and supporting text.

Form fields
05 — Tone of voice

Voice & tone

MerArt speaks warmly, clearly and knowledgeably — like a creative professional, not an agency. Precise without being stiff.

Warm

Human and welcoming, never cold or corporate.

Clear

Simple language, short sentences, no inflated words.

Skilled

Confident in the craft — shows rather than over-explains.

Aesthetic

The words carry the same care as the visuals.

How we say it
«A cohesive visual system — built to last.»
How we don't say it
«We deliver innovative, groundbreaking synergistic brand solutions.»
06 — Use

Applications

One system, many surfaces — business cards, social media and web all draw from the same tokens and components.

MER·
Mariana Gausdal
Graphic designer
mariana@merart.no
www.merart.no · +47 941 97 484
Campaign
New season,
new identity
merart.no
Tips
Design systems 101
Part 1 of 3
Get in touch
07 — How it's built

Built with vibe coding

This platform — and Leid.no's brand platform (brand.leid.no) — is designed and coded with «vibe coding»: I describe intent and design in natural language and build working, production-ready platforms with AI-assisted development in Replit. Design and code in one flow.

01

Define the system

Colours, typography and components are set as reusable tokens.

02

Describe & build

I describe the intent in plain language and generate working code iteratively.

03

Iterate visually

Adjust live against the design system until the expression feels right.

04

Publish

The finished platform is deployed directly — like brand.leid.no.

Vibe codingReplitHTML / CSS / JSDesign systemsResponsiveDeploy
Reference

See the platform in production

The same approach, built for Leid.no — a scalable design system for Rental, Marketplace and Proff.