GRANSKAD
Bajsögat Designenheten
§1898
Designdoktrin · BJÖ-DD-001 · v1.0

Sanitetsbrun,
formaliserad.

Den här guiden är ett internt arbetsdokument för Bajsögats designenhet. Den reglerar färgsystem, typografisk hierarki och knappskick — så att ingen någonsin behöver tveka om vilken nyans av brunt som signalerar myndighetsutövning. Spoiler: det är den varma. Alltid den varma.

Tema
Sanitetsbrun · enpolig värme
Typsnitt
Plus Jakarta Sans · Mono: JetBrains
Geist
Statligt arkivpapper. Inte fintech.
Reglerar
Färg · typ · skick · röst · knappar
§01
Färgsystem

Sanitetsbrun, och dess vänner.

Paletten är enpolig: brunt är dominans, allt annat är temperatur. Varma neutraler bär layouten; statusfärger används sparsamt och med referens till klassificering. Ingen kall accent. Ingen lila bias. Ingen mörkt-läge-bias. Detta är ett dagsljusinstrument.

9 tokenWCAG AA verifieradHSL-källa i globals.css
#734D2BBRAND
Sanitetsbrun
primary · hsl(28 45% 31%)
Primärknapp, länkar, brand. Den varma polen.
#503B2ADEEP
Djup Sanitetsbrun
brown · hsl(27 37% 23%)
Premiumknapp-skugga, tunga rubriker.
#F4C247ACCENT
Svensk Guld
amber · hsl(43 89% 62%)
Statusprick, focus-ring, ärendeprio.
#F9F6F1BG
Bone-White
background · hsl(39 38% 96%)
Bärande yta. Papper, inte plattform.
#231E1AINK
Bläck
foreground · hsl(28 14% 12%)
All brödtext och rubrik. Aldrig ren svart.
#855300WARN
Begränsad
warning · hsl(33 100% 26%)
Text-status. Aldrig fyllning.
#BA1A1ACRIT
Kritisk
critical · hsl(0 75% 42%)
Endast vid akut bortskaffning.
#6C30C2CLSF
Klassificerad
classified · hsl(263 64% 46%)
Den enda violetta tillåtelsen. Sparsamt.
§02
Typografi

Plus Jakarta Sans. Inget annat behövs.

Ett typsnitt för allt. JetBrains Mono enbart för metadata, stämplar och klassificeringskoder. Italik används med återhållsamhet och alltid med avsikt.

Display 400–800Mono 400/500/600Tabular nums på
Display · 96 / 0.95 / 700
Sanitetshygien som underrättelse.
H1 · 64 / 1.02 / 700
Varje park är en polygon.
Section · 44 / 1.05 / 700
Sanitetsbruna myndighetsknappar.
H2 · 36 / 1.10 / 700
Validerad i kommunal drift sedan 2023.
H3 · 22 / 1.25 / 600
Fyra moduler. Ett sammanhållet underrättelsesystem.
Body · 17 / 1.55 / 400
Bjs.eye är Sveriges första integrerade plattform för spårning, identifiering och åtalsförberedelse av fekal nedskräpning i offentlig miljö. Byggd för svensk kommunal verklighet. Validerad i fält.
Small · 13 / 1.45 / 400
Mätningar avser publicerade hotzonsindex, ej anekdotiska iakttagelser. Källa: SP/RISE 2024.
Mono · 12 / 1.45 / 500
DNA-MATCH · POLYGON STK-04 · 14:23:08
§03
Måttsystem

Radie, raster, skugga.

Hela systemet vilar på en 4-pixlig grundenhet. Radier växer i steg om 2; skuggor är alltid varma och alltid dämpade. Inget glas, ingen neon, inga lila gradient-aurorabakgrunder.

Bas 4px5 radier3 hairlines

Radie

r-sm · 6px
--r-sm
r-md · 10px
--r-md
r-lg · 12px
--r-lg
r-xl · 18px
--r-xl
pill · 999
badges

Raster

sp-1 · 4px
hairline
sp-2 · 8px
inline
sp-4 · 16px
stack
sp-6 · 32px
section
sp-8 · 64px
module

Skugga

sh-1 · vila
cards
sh-2 · lyft
hover
sh-3 · vägd
popover
sh-press
buttons
sh-focus
amber
§04
Knappar

Premium-knappsystem · 7 sanktionerade varianter.

Hela knapphierarkin följer samma konstruktion: 5 skikt, varma skuggor, hårfin gradient-kant, dämpat brus, gradient-text där färgen tillåter. Skillnaden ligger enbart i vilken pol som dominerar — bläck, papper, guld, kritisk röd, eller frånvaron av yta tills någon hovrar.

7 varianter · 1 cva5 skick3 storlekarAuto-wrappad __labelDrop-in mot shadcn Button
SHOWCASE · ALLA 7 VARIANTER
PÅ BONE-WHITE
DEFAULT-SKICK
EN PER ROLL
SHOWCASE · PÅ MÖRK YTA
SAMMA TOKENS · BÄR ÄVEN HÄR
KONTRAST AA+
FOOTERS / OVERLAYS

Default variant="default"

Primär CTA. Sanitetsbrun, djupt indragen i papperet. Använd för "Begär demo", "Skicka", "Spara".

Skick · default · hover · active · focus · disabled
Storlek · sm · md · lg

Action variant="action"

Svensk guld. Brand-accent · använd där brådskan ska bära visuellt — "Aktivera ärende", "Eskalera till åtal".

Skick
Storlek

Secondary variant="secondary"

Hairline-outline med gradient-brun kant. Står bredvid en primär — "Se plattformen", "Läs hela rapporten".

Skick
Storlek

Outline variant="outline"

Bone embossed · letterpress-känsla på papper. Tertiär handling — "Arkivera", "Pausa bevakning", karusellpilar.

Skick
Storlek

Ghost variant="ghost"

Inget skick i vila — ett varmt vaknande vid hover. Använd för "Avbryt", dialog-stäng, sekundär navigation.

Skick
Storlek

Destructive variant="destructive"

Kritisk. Samma 5-skikt i röd palett. Reserverad för "Radera ärende", "Avsluta bevakning". Kräver bekräftelse.

Skick
Storlek

Link variant="link"

Inline-länk · animerad understrykning som växer från vänster på hover. Använd för bryt-text-länkar och inline-citat.

Skick

Anatomi · 5 skikt

Båda knapparna byggs av exakt samma fem skikt. När någon i framtiden försöker addera ett sjätte, hänvisa dem till denna paragraf och gör en blank min.

  1. Bas-gradientlinear-gradient(180°) — två stopp, brun till djupbrun
  2. Multi-skuggarim · drop · drop-tight · inset-press · inset-highlight
  3. 1px gradient-kant::before med mask-composite-trick
  4. Fraktal-brus::after · SVG · mix-blend-mode: soft-light · 0.32
  5. Text-gradientbackground-clip: text · filter: drop-shadow
/* Skikt 1 — bas-gradient (180°, två stopp)              */
.btn {
  background: linear-gradient(180deg, #6b4624 0%, #4a3220 100%);
  border-radius: 12px;
  padding: 16px 32px;

  /* Skikt 2 — multi-skugga (rim · drop · press · highlight) */
  box-shadow:
    0 0 0 1px rgba(80,59,42,.22),                  /* hairline rim */
    0 12px 24px -10px rgba(58,41,24,.55),           /* drop        */
    0 4px 8px -3px rgba(58,41,24,.32),              /* tight drop  */
    inset 0 -7px 16px -5px rgba(0,0,0,.55),         /* press       */
    inset 0 1px 0 rgba(255,220,175,.18);            /* top highlight */
}

/* Skikt 3 — 1px gradient-kant, mask-composite-trick      */
.btn::before {
  content: ''; position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,219,168,.65), rgba(255,219,168,0));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Skikt 4 — fractalNoise inlinad som SVG, soft-light     */
.btn::after {
  background-image: url("data:image/svg+xml,...fractalNoise...");
  mix-blend-mode: soft-light;
  opacity: .32;
}

/* Skikt 5 — text med egen gradient + 1px drop shadow      */
.btn .label {
  background: linear-gradient(180deg, #fff 0%, rgba(247,235,215,.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}

shadcn-integration · 7 cva-varianter

Alla varianter mappas till varsin marker-klass i globals.css (.bjs-btn-default, .bjs-btn-action, .bjs-btn-secondary, .bjs-btn-outline, .bjs-btn-ghost, .bjs-btn-destructive, .bjs-btn-link). React-komponenten lindar automatiskt children i ett __label-span — så background-clip: text kan användas utan att kollidera med knappens bakgrund, och asChild + <Link> fungerar drop-in.

7 cva-keys7 CSS-componentsasChild-säkerAuto-wrap __label
src/components/ui/button.tsx · cva
variant: {
  default:     'bjs-btn-default rounded-[12px]',
  action:      'bjs-btn-action rounded-[12px]',
  secondary:   'bjs-btn-secondary rounded-[12px]',
  outline:     'bjs-btn-outline rounded-[12px]',
  ghost:       'bjs-btn-ghost rounded-[10px]',
  destructive: 'bjs-btn-destructive rounded-[12px]',
  link:        'bjs-btn-link',
  premium:     'bjs-btn-default rounded-[12px]', // alias
},

// forwardRef — auto-wrap children:
const wrap = (kids) => (
  <span className="bjs-btn__label">{kids}</span>
);
if (asChild && React.isValidElement(children)) {
  content = React.cloneElement(
    children, undefined, wrap(children.props.children),
  );
} else {
  content = wrap(children);
}
src/app/globals.css · @layer components
/* Bas — gemensam för alla 7 varianter */
.bjs-btn {
  position: relative; isolation: isolate;
  transition: transform .15s, box-shadow .25s, background .25s;
}
.bjs-btn:active { transform: translateY(1px) scale(.985); }
.bjs-btn__label { /* gradient-text container */ }

/* Per variant — 5 skikt (där applicerbart) */
.bjs-btn-default    { /* brun premium       */ }
.bjs-btn-action     { /* svensk guld        */ }
.bjs-btn-secondary  { /* hairline outline   */ }
.bjs-btn-outline    { /* bone embossed      */ }
.bjs-btn-ghost      { /* hover-wake-up      */ }
.bjs-btn-destructive{ /* kritisk röd        */ }
.bjs-btn-link       { /* animerad underline */ }
Användning · vanligaste fall
Primär CTA (asChild + Link)
<Button asChild>
  <Link href="/kontakt">
    Begär demo
  </Link>
</Button>
Sekundär bredvid primär
<Button variant="secondary">
  Se plattformen
</Button>
Action (guld) med ikon
<Button variant="action">
  Aktivera ärende
  <ArrowRight />
</Button>
Ghost · dialog-stäng
<Button variant="ghost">
  Avbryt
</Button>
Destruktiv handling
<Button variant="destructive">
  Radera ärende
</Button>
Inline-länk
<Button variant="link">
  Läs hela rapporten →
</Button>
§05
Komponenter

Etiketter, fält, hairlines.

Statusetiketter följer paletten i §01 och är alltid pill med ring — aldrig fyllda block. Inputfält har en intern brun fokusring (12% opacitet) som ekar primärfärgen. Linjer är 1px och alltid varma; ingen svart 1px finns i systemet.

Status · Klassificering

Pill med ring. Inga fyllda block. Värmegrad anger allvar.

DRIFT OFFENTLIG BEGRÄNSAD KRITISK KLASSIFICERAD

Inputfält

12% sanitetsbrun fokusring. Ingen border på vila.

Validering sker mot offentliga register (SCB).

Incidentkort · Listvy

Kort används endast där kortet är interaktionen.

DNA-match
14:23:08
POLYGON STK-04 · ÄRENDE GENERERAT · CHAIN-OF-CUSTODY ✓
OFFENTLIG PRIO 2

Hairlines

Tre tjocklekar. Alltid varma. Aldrig svarta.

1px solid #E7E0D5 · sektion
1px solid #DDD2BD · tabell
1px dashed #DDD2BD · grupp
§06
Röst & ton

Byråkratisk deadpan.

Texten ska låta som en remissvarsbilaga från en kommun som inte är medveten om att hela projektet är satir. Stora påståenden levereras som mätvärden. Skämten finns i avstånden mellan meningarna — inte i meningarna själva.

Görpåstå mätbart, inte poetiskt

"Validerad i kommunal drift sedan Q2 2023. Svarstid 182 ms."
Tabular nums, inget värdeladdat adjektiv, inga utropstecken.

Undviktomma SaaS-floskler

"Frigör din kommuns fulla potential med AI-driven sanitetsintelligens."
Saknar siffra. Innehåller "potential". Avslås.

Görlåt formuläret äga absurditeten

"Bajsögat är ett konstnärligt och satiriskt projekt. Formuläret tar emot men besvaras inte."
Helt klar formulering. Total transparens kring funktionen.

Undvikatt förklara skämtet

"Detta är en satir om övervakningsstaten lol 😄"
Förklarad satir är ingen satir. Och emojin tillhör en annan stilguide.
§07
Avvikelser

Vad som inte är sanktionerat.

Följande är observerade designöverträdelser från andra plattformar. De är upptecknade här som varnande exempel. Förekommer någon av dem i produktion ska designenheten kontaktas, gärna med ett organisations­nummer.