Designmanual 01 · 21 augusti 2026

Bedrock CRM:s visuella identitet

Marknadssidan får vara uttrycksfull. CRM:et ska vara lugnt, tätt och förutsägbart. Båda känns ändå som samma Bedrock CRM.

Tre designprinciper

Signal, inte pynt

Svavelgult visar en handling, en position eller ett viktigt skifte. Det fyller aldrig produkten bara för att skapa färg.

Reportage utåt

Marknadsbilder visar riktiga arbetssituationer och bryts ner till fyra tryckfärger. Ingen flytande UI, inga robotar, ingen AI-teater.

Arbetsro inåt

CRM:et använder ljusa arbetsytor, fasta rader och tydliga statusord. Informationen, inte behållaren, ska synas först.

Färgpalett

Committed på marknadssidan, restrained i produkten. Nattindigo och benvit bär systemet. Indigo betyder handling. Svavelgult betyder signal.

Nattindigo

#171B32--bedrock-night

Appskal, mörka arbetsytor, huvudtext

Mjuk nattindigo

#202642--bedrock-night-soft

Hover i mörk navigation och sekundär mörk yta

Handlingsindigo

#4954B8--bedrock-action

Primär handling, aktivt val, fokus

Ljus indigo

#AEB4E2--bedrock-action-soft

Lugn information och markerad sekundäryta

Svavelgul

#D5DB57--bedrock-signal

Nästa steg, korta signaler, kampanjaccent

Varm benvit

#F3F1EA--bedrock-paper

Grundyta, ljus text, dokumentkänsla

Dimindigo

#E8E9F0--bedrock-mist

Sekundära produktpaneler och valda rader

Sval yta

#FAF8F3--bedrock-surface

Arbetsrader, formulär och läsytor

Dämpad text

#666B7E--bedrock-muted

Metadata på ljusa ytor, aldrig huvudtext

Linje

#CED1DC--bedrock-line

Rader, fält och lugna avdelare

Varningsyta

#F3EAD2--bedrock-warning-surface

Bakgrund för väntande eller varning

Varningstext

#7A5800--bedrock-warning-text

Text och ikon för varningsstatus

Riskyta

#F2DFDA--bedrock-danger-surface

Bakgrund för riskstatus

Risktext

#84362F--bedrock-danger-text

Text och ikon för riskstatus

Klart-yta

#DEECE7--bedrock-success-surface

Bakgrund för klarstatus

Klart-text

#285E51--bedrock-success-text

Text och ikon för klarstatus

Logga 05, sammanhållet arbete

Tre arbetsstråk möts i en gemensam punkt. Symbolen får aldrig beskäras, roteras, få gradient eller byta färg utanför de dokumenterade varianterna.

På ljus yta

På mörk yta

Friyta Minst signalrutans bredd runt märket.

Minsta storlek 24 px digitalt. Samma SVG-master används i alla storlekar.

Ordnamn Sätt “Bedrock CRM” separat i Schibsted Grotesk, aldrig inuti bildfilen.

Motivform De tre stråken får användas som bildmask. Behåll proportionerna, sömmen och signalpunkten.

Typografi

En familj, tydligt arbete. Schibsted Grotesk skapar samma röst från kampanjrubrik till tät kundrad.

Ett CRM du faktiskt använder.

Produktens arbetsrubrik

Vad behöver hända härnäst?

14:30 · Lind & Form · Nästa kontakt i morgon

Bildbibliotek

Källan ska först fungera som ett trovärdigt reportagefoto. Fyrfärgsbehandlingen kommer efteråt och använder exakt samma palett som gränssnittet.

Säljare på väg från ett kundmöte — 01Efter kundmötet

Företagare i en parkerad bil — 02Parkerad bil

Företagare vid sin bärbara dator — 03Vid datorn

Säljare på en tågstation — 04Mellan möten

Säljare i en kundlokal — 05I kundens miljö

Gör: vardagliga platser, rimliga väskor och datorer, naturliga kroppar, negativ yta, observerad känsla. Ett pågående samtal är vardagskontext, inte bevis på röststyrning.

Gör inte: svävande gränssnitt, papper som systemmetafor, robotar, perfekt stockleende, orange-teal-filmlook eller ett objekt som saknar praktisk förklaring. Skriv alltid den faktiska produktinteraktionen bredvid bilden.

Så översätts identiteten till CRM:et

En lugn produktversion av samma system. Benvit arbetsyta, nattindigo navigering, indigo för handling och svavelgult bara för det som behöver uppmärksamhet nu.

Fredag 21 augusti

Det här behöver hända idag

Plan4 uppgifter · 3 h 10 min

Följ upp offerten med Lind & FormUnderlag förberett · 35 min
09:30
Förbered mötet med KvarnvikTvå öppna frågor · 45 min
11:00
Granska svar till AnnaOutlook-utkast sparat
14:30

Illustrativ designspecifikation, inte en skärmbild av nuvarande produkt.

Komponentvokabulär

Kontroller är kompakta och konsekventa. Status skrivs alltid ut i text. Ingen dekorativ kortmosaik.

Nästa steg

PlaneradVäntar på svarRiskgranskaKlarPrivatDelat

Lind & FormOffertuppföljning · i morgon

SpararBehåll fältet öppet medan ändringen pågår.

SparatVisa bekräftelsen nära det som ändrades.

Kunde inte sparaDin text ligger kvar. Försök igen när anslutningen är tillbaka.

Nyare version finnsBehåll din text och visa serverversionen bredvid innan användaren väljer.

Rad laddar

Skelettet följer arbetsradens form. Tillgänglig status: “Laddar uppgifter”.

Tom lista

Inga uppgifter här än.Skapa den första när det finns något konkret att följa upp.

Återanvändbar bildprocess

Prompta först en verklig situation. Lägg aldrig produktstilen direkt i bildmodellen. Identiteten skapas i den lokala fyrfärgsbehandlingen.

1. Fotokälla

Use case: photorealistic-natural
Asset type: Bedrock CRM editorial website image
Primary request: a candid documentary photograph of a small-business owner in one ordinary customer-work moment
Scene/backdrop: a physically plausible Swedish office, customer site, station or safely parked car
Subject: calm and focused, natural hands and posture, ordinary work bag or computer
Style/medium: authentic 35 mm reportage photography, subtle grain, observational rather than posed
Composition/framing: horizontal 3:2, action on the right with a calm field on the left when copy needs room
Lighting/mood: Nordic daylight, purposeful and unhurried
Constraints: no visible app UI, no floating interface, no logos, no readable signs, no text, no watermark
Avoid: generic corporate stock pose, glossy AI-ad look, orange-teal grade, surreal objects, paper workflow metaphor

2. Fyrfärgsbehandling

python3 marketing/scripts/apply_brand_halftone.py \
  marketing/assets/hero-reportage-v4/source/INPUT.png \
  marketing/public/media/hero-reportage-v4/OUTPUT.webp

Exakta utdatafärger: #171B32, #4954B8, #D5DB57 och #F3F1EA.

Ladda ner hela designmanualen