Full Flat UI — den valgte paletten

Tre farger fra samme palett: Sunflower, Emerald, Peter River. Lik metning, lik lyshet, lik visuell vekt — familien føles som én ting.

Lockups per sub-merke

Skarpe pre-renderte PNG-er (2206×665, @2x retina) generert fra SVG-ene. Identisk proporsjoner med kanonisk klikk-lockup-nettsider.png.

Nettsider

Programvare

Regnskap

Familien

De tre sub-merkene

Logomark, lockup (kun "Klikk"), og hvordan sub-etiketten ligger ved siden av.

Klikk nettsider Uendret

Sunflower · CMS, presentasjon, marketing

#f1c40f · Flat UI

nettsider

Klikk programvare Nytt

Emerald · Apper, spill, custom software

#2ecc71 · Flat UI

programvare

Klikk regnskap Endret

Peter River · Regnskap, finansiell software

#3498db · Flat UI

Var #00a2e6 → Nå #3498db

regnskap

Paraply-logo — Klikk familien

Reweighted lineær gradient. Gul holder 0-20%, transisjon til grønn på 50%, blå holder 80-100%.

Reweighted lineær gradient

Bygd inn i logomark-familien.svg og logomark-rounded-familien.svg. CSS-ekvivalent:

background: linear-gradient(135deg,
  #f1c40f 0%,
  #f1c40f 20%,
  #2ecc71 50%,
  #3498db 80%,
  #3498db 100%);

Familien som ensemble

Paraply + tre prosjekt-ikoner. Slik det presenteres på "Klikk familien"-siden.

Klikk

familien

Klikk

nettsider

Klikk

programvare

Klikk

regnskap

Hva endrer seg for Klikk regnskap

Endring fra #00a2e6 til #3498db. Hue går fra ~196° til 204° (minimalt) — men metning/lyshet endres mer (saturated cyan → balansert blå).

Logomark

var #00a2e6 (cyan)

→

Logomark

nå #3498db (Peter River)

→

Filer som må oppdateres

Hvis du vil at jeg skal gjøre endringene, kan jeg starte her.

# Brand-grunnpakke ~ Nettsider/shared/klikk-brand/tokens.css # bytt --klikk-cyan #00a2e6 → #3498db, legg til --klikk-emerald ~ Nettsider/shared/klikk-brand/README.md # oppdater fargetabellen + sub-merker-tabellen ~ Nettsider/shared/klikk-brand/tailwind-preset.mjs # samme bytte ~ Nettsider/shared/klikk-brand/logo/logomark-regnskap.svg # fill="#00a2e6" → "#3498db" ~ Nettsider/shared/klikk-brand/logo/logomark-rounded-regnskap.svg # samme ~ Nettsider/shared/klikk-brand/logo/klikk-regnskap-icon.png # re-eksportér ~ Nettsider/shared/klikk-brand/logo/klikk-lockup-regnskap.png # re-eksportér # Ny: programvare + Nettsider/shared/klikk-brand/logo/logomark-programvare.svg + Nettsider/shared/klikk-brand/logo/logomark-rounded-programvare.svg + Nettsider/shared/klikk-brand/logo/klikk-programvare-icon.png + Nettsider/shared/klikk-brand/logo/klikk-lockup-programvare.png # Ny: paraply (familien-logo) + Nettsider/shared/klikk-brand/logo/logomark-familien.svg # konsept #2 reweighted + Nettsider/shared/klikk-brand/logo/logomark-rounded-familien.svg # Klikk-prosjektet (regnskap-frontend) — bruker copied filer ~ Klikk/public/* (cyan logo-filer) # oppdater kopiene ~ Klikk/tailwind.config.ts # bytt cyan-tokens

Anbefalt paraply-konsept: #2 (reweighted lineær) — den enkleste å reprodusere konsistent overalt (CSS-gradient, SVG-eksport, sosiale medier-banner). Gul får sin rettmessige plass, blå anker den andre enden, grønn lever i midten.

Hvis du vil ha sterkere identitet: #4 (tri-farge chevron på mørk) er mer minneverdig — det er en spesiell variant ingen sub-brand har. Kan brukes som "Klikk familien"-paraply mens hver sub-brand beholder sin enkle ensfarge-versjon. Da har du en visuell hierarki: ensfarget = ett spor, regnbue-chevron = hele familien.

Neste steg: Si fra hvilket paraply-konsept (#2, #3, #4, #5, eller #6) du vil ha, så lager jeg de faktiske SVG- og PNG-filene i brand-mappen og oppdaterer tokens.css, tailwind-preset.mjs og README.md.