---
name: Bedrock CRM
description: Fyrfärgsreportage utåt, ett lugnt och tätt kontrollbord inåt.
register: product
colors:
  night: "#171b32"
  night-raised: "#202642"
  ink: "#171b32"
  action-indigo: "#4954b8"
  action-indigo-light: "#aeb4e2"
  signal-sulfur: "#d5db57"
  signal-sulfur-light: "#e4e883"
  paper: "#f3f1ea"
  mist: "#e8e9f0"
  surface: "#faf8f3"
  line: "#ced1dc"
  muted: "#666b7e"
  warning-surface: "#f3ead2"
  warning-text: "#7a5800"
  danger-surface: "#f2dfda"
  danger-text: "#84362f"
  success-surface: "#deece7"
  success-text: "#285e51"
typography:
  family: "Schibsted Grotesk Variable, Avenir Next, system-ui, sans-serif"
  product-title:
    fontSize: "1.75rem"
    fontWeight: 590
    lineHeight: 1.1
    letterSpacing: "-0.035em"
  section-title:
    fontSize: "1.125rem"
    fontWeight: 620
    lineHeight: 1.25
  body:
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontSize: "0.75rem"
    fontWeight: 650
    lineHeight: 1.2
  data:
    fontSize: "0.8125rem"
    fontWeight: 560
    lineHeight: 1.35
    fontVariantNumeric: "tabular-nums"
rounded:
  compact: "6px"
  control: "7px"
  panel: "10px"
  shell: "16px"
  pill: "999px"
spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "48px"
components:
  button-primary:
    backgroundColor: "{colors.action-indigo}"
    textColor: "{colors.paper}"
    rounded: "{rounded.control}"
    minHeight: "42px"
    padding: "10px 15px"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.control}"
    minHeight: "42px"
    padding: "10px 15px"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.control}"
    minHeight: "42px"
    padding: "10px 12px"
  work-row:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "0"
    padding: "16px 0"
---

# Bedrock CRM Design System

## Creative North Star

**Fyrfärgsreportage möter ett lugnt kontrollbord.**

Utåt ska Bedrock CRM kännas som en distinkt trycksak om verkligt kundarbete:
vanliga människor mellan kontoret, bilen, kunden och tåget, återgivna med fyra
fasta tryckfärger. Inåt ska samma identitet bli tystare. CRM:et är ett tätt,
förutsägbart arbetsverktyg där nästa handling syns utan att varje yta försöker
vara varumärke.

Den fysiska produktreferensen är en småföretagare som sent på eftermiddagen
öppnar en 14-tumsdator i vanlig kontorsbelysning och behöver se vad som måste
hända härnäst. Det kräver en ljus arbetsyta, hög textkontrast, fast navigation
och få accentfärger.

## Systemets två register

### Marknad

- Färgen är committed: stora nattindigo och handlingsindigo fält får dominera.
- Bilder är viktiga och får bära en hel sektion.
- Svavelgult är en synlig kampanjsignal och primär CTA.
- Rubriker kan vara mycket stora, täta och asymmetriskt placerade.
- Rörelse: en entré, en sticky bildberättelse och en diskret hoverförstoring.

### Produkt

- Färgen är restrained: benvitt och sval yta dominerar.
- Handlingsindigo används för primär handling, aktuellt val och fokus.
- Svavelgult används sparsamt för en verklig signal eller ett nästa steg.
- Rubrikskalan är fast. Produktens text får aldrig bli kampanjtypografi.
- Rörelse tar 150–250 ms och förklarar bara status eller förändring.

## Logo

Vald riktning är **Logga 05, sammanhållet arbete**. Tre horisontella
arbetsstråk hålls ihop av en vertikal söm och en svavelgul signalpunkt.

### Vektormaster och reservformat

- Ljus yta: `marketing/public/brand/bedrock-crm-mark-on-light.svg`
- Mörk yta: `marketing/public/brand/bedrock-crm-mark-on-dark.svg`
- Kanonisk ljus variant: `marketing/public/brand/bedrock-crm-mark.svg`
- SVG-elementen har semantiska id:n för senare, men ännu inte aktiverad,
  animation.
- PNG i 1024/160/64/32 px är endast genererade reservformat för PDF och video.
- Favicon: `marketing/public/brand/bedrock-crm-favicon-64.png`
- Apple touch icon: `marketing/public/brand/bedrock-crm-apple-touch-icon-180.png`

### Logo rules

1. Använd alltid rätt ljus/mörk variant. Lägg aldrig en vit platta bakom märket
   för att reparera fel variant.
2. Friytan runt märket ska minst motsvara den gula signalrutans bredd.
3. Minsta digitala storlek är 24 px. Samma SVG-master används i alla digitala
   storlekar; rasterformat får aldrig vara designkälla.
4. Märket får inte roteras, beskäras, få gradient, skugga eller nya färger.
5. Ordmärket “Bedrock CRM” sätts separat i Schibsted Grotesk.

## Color

| Roll | Token | Hex | Användning |
|---|---|---|---|
| Nattindigo | `--bedrock-night` | `#171B32` | Appskal, mörka ytor, huvudtext |
| Mjuk nattindigo | `--bedrock-night-soft` | `#202642` | Hover och sekundär mörk yta |
| Handlingsindigo | `--bedrock-action` | `#4954B8` | Primär handling, aktivt val, fokus |
| Ljus indigo | `--bedrock-action-soft` | `#AEB4E2` | Mörk variant av märket, sekundära markeringar |
| Svavelgul | `--bedrock-signal` | `#D5DB57` | Nästa steg, kort signal, marknads-CTA |
| Varm benvit | `--bedrock-paper` | `#F3F1EA` | Grundyta och ljus text |
| Dimindigo | `--bedrock-mist` | `#E8E9F0` | Sekundära paneler, valda rader |
| Sval yta | `--bedrock-surface` | `#FAF8F3` | Arbetsrader, formulär, läsytor |
| Linje | `--bedrock-line` | `#CED1DC` | Avdelare och hela ramar |
| Dämpad text | `--bedrock-muted` | `#666B7E` | Metadata och hjälptext |
| Varningsyta/text | `--bedrock-warning-surface` / `--bedrock-warning-text` | `#F3EAD2` / `#7A5800` | Väntande eller varning |
| Riskyta/text | `--bedrock-danger-surface` / `--bedrock-danger-text` | `#F2DFDA` / `#84362F` | Riskgranskning och fel |
| Klart-yta/text | `--bedrock-success-surface` / `--bedrock-success-text` | `#DEECE7` / `#285E51` | Bekräftad klarstatus |

Kontrastkontrollen finns i `marketing/docs/COLOR_VALIDATION.md`. Huvudparen
benvit/nattindigo och nattindigo/svavelgul når AAA. Handlingsindigo på benvitt
och sekundärtext på benvitt når AA.

### Named rules

**The Signal Rule.** Svavelgult visar bara nästa handling, en aktiv signal eller
en viktig position. Det används aldrig som lång text eller allmän dekoration i
CRM:et.

**The State Rule.** Varning, risk och klart använder egna semantiska färger men
måste alltid kombineras med text eller ikon. Svavelgult betyder inte automatiskt
varning.

**The Surface Rule.** Innehåll separeras först med avstånd, därefter med linje,
sedan med tonad yta. Skugga är sista utväg.

## Typography

**Familj:** Schibsted Grotesk Variable med Avenir Next och system-ui som
fallback.

Samma familj används på marknad och i produkt för att skapa igenkänning. Det är
storlek, vikt, radavstånd och täthet som byter register.

### Marketing scale

- Hero: `clamp(4.3rem, 8.5vw, 8.7rem)`, vikt 520–540, radavstånd 0.89.
- Sektionsrubrik: `clamp(2.7rem, 5vw, 5.2rem)`, vikt 520.
- Brödtext: 1–1.28 rem, högst 65–70 tecken per rad.

### Product scale

- Sidrubrik: 1.75 rem, vikt 590.
- Områdesrubrik: 1.125 rem, vikt 620.
- Rad-/kundtitel: 0.875–0.9375 rem, vikt 590–620.
- Brödtext: 0.9375 rem, radavstånd 1.55.
- Metadata: 0.75–0.8125 rem, tabular-nums för tid och belopp.

Produktkontroller använder aldrig displaystorlekar, kursiv varumärkestyp eller
dekorativ monospace.

## Imagery

### The reportage rule

1. Källbilden måste först fungera som ett trovärdigt 35 mm-reportagefoto.
2. Situationen ska gå att förklara utan AI: efter mötet, parkerad bil, kontor,
   tågstation eller kundlokal.
3. Väskor, telefonhållare, datorer, hörlurar, händer och arkitektur måste vara
   praktiskt rimliga.
4. Ingen flytande UI, robot, ljusglob, pappersmetafor, perfekt stockpose eller
   orange-teal-filmlook.
5. Bilden konverteras lokalt till exakt fyra färger med
   `marketing/scripts/apply_brand_halftone.py`.

Personer får vara mitt i ett vanligt kund- eller kollegasamtal, men bilden får
aldrig beskrivas som att den visar inbyggd röststyrning eller diktering till
CRM:et. Bilden är vardagskontext. Den intilliggande texten ska alltid beskriva
den verkliga interaktionen: användaren skriver till assistenten och granskar
resultatet.

### Image library

- `01-efter-kundmotet.webp`: huvudhero, person och handling på höger sida.
- `02-parkerad-bil.webp`: stillastående bil, telefon i normal hållare.
- `04-tagstation.webp`: mellan möten, vertikal beskärning fungerar.
- `05-kontoret.webp`: vardagligt arbete vid bärbar dator.
- `06-kundlokalen.webp`: säljare i en rimlig kundmiljö.

Källor ligger i `marketing/assets/hero-reportage-v4/source/`. Färdiga
webbassets ligger i `marketing/public/media/hero-reportage-v4/`.

## Product layout

### App shell

- Vänster navigation: 208–232 px, nattindigo, en aktiv rad i
  handlingsindigo.
- Primär arbetsyta: benvit eller sval yta, maximalt två innehållskolumner.
- Kontextpanel: 280–360 px när ett valt mail, kundkort eller ärende behöver
  sekundärt underlag.
- Sidrubriken beskriver arbetsområdet, aldrig ett marknadslöfte.
- “Idag” förblir synligt när navigationen kollapsar.

### Information hierarchy

1. Vad behöver användaren göra?
2. Vilken kund eller post gäller det?
3. Vilket underlag och vilken status finns?
4. Vilken systemdetalj behöver visas just nu?

Rapporttal och sekundära köer får aldrig trycka bort dagens faktiska arbete.

## Components

### Buttons

- Primär: handlingsindigo, benvit text, 42–44 px höjd, 7 px radie.
- Sekundär: sval yta, nattindigo text, hel 1 px ram.
- Ghost: transparent, handlingsindigo text, används för lågprioriterad radåtgärd.
- Marknads-CTA kan vara svavelgul och pill-formad. Produktens primärknapp är
  däremot en lugnt rundad rektangel.
- Alla knappar har default, hover, focus, active, disabled och loading.

### Inputs and inline edit

- Etikett ovanför fältet, aldrig en placeholder som enda etikett.
- Sval eller benvit yta, hel ram, 42 px minsta höjd.
- Fokus: handlingsindigo ram plus yttre ring utan layoutförskjutning.
- Sparning visar “Sparar”, “Sparat” eller ett konkret fel.
- Vid versionskonflikt behålls osparad text och aktuell serverversion visas
  bredvid. Ingen tyst överskrivning.

### Work rows

- Listor och rader används före kort.
- Uppgift/kund/mail är den visuellt starkaste texten.
- Tid, status och källa är sekundär metadata.
- Aktiv rad kan få dimindigo bakgrund. Färg används inte som enda signal.
- Radåtgärder visas konsekvent på hover/fokus och är alltid tillgängliga via
  tangentbord.

### Status

- `Planerad`: dimindigo yta, nattindigo text.
- `Väntar på svar`: neutral ton plus utskriven status.
- `Riskgranska`: dämpad röd yta, danger-text och ikon.
- `Klar`: dämpad grön yta, success-text och ikon.
- `Privat` och `Delat` skrivs ut explicit, aldrig bara som lås- eller personikon.

### Empty, loading and error

- Loading använder skelett i radens faktiska form.
- Empty state lär användaren nästa möjliga handling utan marknadsslogan.
- Fel säger vad som inte sparades och vad användaren kan göra nu.
- En modell som är nere stoppar inte originaldata från att sparas.

## Motion

- Produktövergångar: 150–250 ms, `cubic-bezier(.16,1,.3,1)`.
- Animera opacity och transform, inte layoutmått.
- Ny eller uppdaterad rad kan tona in en gång.
- Sparstatus och kollapsad kontext får rörelse eftersom tillståndet ändras.
- Ingen orchestrerad sidentré, parallax eller dekorativ puls inne i CRM:et.
- `prefers-reduced-motion` respekteras överallt.

## Reusable prompts

### Website photo source

```text
Use case: photorealistic-natural
Asset type: Bedrock CRM editorial website image and design-system reference
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 color 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 interface, no floating UI, 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
```

### Office variant

```text
Primary request: a candid documentary photograph of a Swedish small-business owner working at a laptop in a modest real office during an ordinary colleague call
Subject: calm and focused, seated at the laptop, naturally mid-conversation with a colleague, one hand near the keyboard
Composition/framing: horizontal 3:2, medium-wide, subject and laptop in the right half, calm darker office field on the left
Constraints: no visible app UI, no readable screen content, no floating interface, no microphone prop, no logos, no text
```

### Customer-site variant

```text
Primary request: a candid documentary photograph of a small-business salesperson moving through a real customer showroom or light warehouse between meetings
Subject: ordinary white wireless earbuds during a normal customer call, normal dark laptop bag, phone put away, walking naturally
Composition/framing: horizontal 3:2, person on the right third, meaningful workplace around them, calm shadowed area on the left
Constraints: physically plausible location, no floating UI, no phone in hand, no headset boom, no logos, no readable signs, no text
```

### Four-color treatment

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

Utdatafärgerna ska vara exakt `#171B32`, `#4954B8`, `#D5DB57` och
`#F3F1EA`. Färgbehandlingen ska inte göras i bildmodellen.

### Archived logo-generation prompt

Detta sparas bara som proveniens för hur riktningen togs fram. Produktionsmärket
ska alltid hämtas från masterfilerna ovan och får aldrig återskapas med en
bildmodell.

```text
Use case: logo-brand
Asset type: Bedrock CRM symbol
Primary request: a quiet customer record made from three horizontal rounded bands held together by one continuous vertical seam, with one small sulfur-yellow signal square tucked into the seam
Style/medium: flat Swiss-modern geometric mark, asymmetrical but balanced, bold silhouette, readable at 36 px
Color palette: night indigo #171B32, action indigo #4954B8, sulfur yellow #D5DB57, warm bone #F3F1EA
Constraints: no wordmark, no text, no gradient, no shadow, no bevel, no glow, no mockup
Avoid: chart, staircase, pencil, document, building, book, database cylinder, chatbot, robot, sparkle, leaf, energy company
```

## Do and do not

### Do

- Visa nästa faktiska arbete före rapporttal.
- Använd samma knapp-, fält-, rad- och statusvokabulär på varje sida.
- Markera tydligt vad som är personligt och vad som är gemensamt.
- Visa när ett underlag är lokalt, föreslaget eller bekräftat.
- Låt bildspråket bära marknaden och arbetsstrukturen bära produkten.

### Do not

- Ingen generisk SaaS-mosaik av likvärdiga kort.
- Ingen glassmorphism, gradienttext, färgad sidrand eller staplade kort.
- Ingen marknadsföringshero eller slogan inne i den autentiserade arbetsytan.
- Ingen svavelgul dekoration utan verklig signal.
- Ingen AI-funktion som döljer osäkerhet eller genomför extern handling utan
  tydlig mänsklig kontroll.
- Ingen påstådd röststyrning, automatisk mailsändning eller automatisk
  kalenderändring innan det är en verifierad produktfunktion.

## Living references

- Visuell manual: `/designsystem/`
- Marknadskod: `marketing/src/pages/index.astro`
- Designmanualkod: `marketing/src/pages/designsystem.astro`
- Globala marknadstokens: `marketing/src/styles/global.css`
- Produkt-/manualspecimen: `marketing/src/styles/design-system.css`
- Färgvalidering: `marketing/docs/COLOR_VALIDATION.md`
- Bildpromptar och generationsanteckningar: `marketing/assets/hero-reportage-v4/README.md`