En fullständig referens för Andwhys visuella identitet — designtokens, typografi, färger, knappar, formulär, teman och layoutblock. Sidan är byggd direkt från andwhy.se.
Sju kärnfärger definierade som CSS-variabler på :root. Paletten är djärv och kontrastrik — en mörk bas med livfulla accentfärger som aquamarine, yellow och pink.
Blue
#13262f
--blue
Aquamarine
#70f8ba
--aquamarine
Yellow
#ffe401
--yellow
Pink
#e36397
--pink
Gray
#6c685f
--gray
White
#ffffff
--white
Whitetext
#f5f5f5
--whitetext
Typsnitt: Poppins — 400 Regular, 600 SemiBold och 700 Bold. Används konsekvent för alla rubriker och brödtext.
Vi hjälper er omvandla den snabba digitala utvecklingen till konkret affärsnytta. Med senior utvecklarkompetens kombinerad med modern AI bygger vi tillsammans webbplatser, e-handel och skräddarsydda system — effektivt och för att hålla på sikt.
<mark>Signaturelementet. En lätt roterad penselstrykning skapas med ett ::before-pseudoelement i aktuell temas accentfärg. Textfärgen matchar sektionens bakgrund — vilket skapar ett "stämpeleffekt".
<mark> roteras −0.75deg. Jämna roteras +0.75deg. I hero-rubriker (h1) animeras inritningen med drawMarkFromLeft / drawMarkFromRight.
Brödtext med markerad fras i löpande text. En till exempel bredvid.
Brödtext med markerad fras i mörkt tema. Också detta markeras.
Brödtext med markerad fras på rosa bakgrund.
Brödtext med markerad fras på gul bakgrund.
Brödtext med markerad fras på mintgrön bakgrund.
Brödtext med markerad fras på grå bakgrund.
button / .button — aquamarine bakgrund, blå text. Hover: blå bakgrund, vit text. .alt — transparent, 2px blå kant.
I theme-dark: .alt-knappen får vit kant och vit text. Hover: vit bakgrund med blå text.
<a class="button"> eller <a class="button alt"> — identisk stil, navigerar med vanlig länk.
.smallPill-formad liten variant — mindre fontstorlek, kompakt padding och hög border-radius. Används bland annat i innehållsförteckningar.
.button-rowFlexbox-container för knappar sida vid sida — gap 1rem, wrappas på smal skärm.
Grid-layout, 1 kolumn på mobil och 2 kolumner på desktop. Input-fält har enbart en bottenram (2px). Textarea har en streckad heldragen ram med rundade hörn.
Teman appliceras som klass på article- eller section-element. Varje tema definierar bakgrundsfärg, textfärg och highlight-accentfärg. Designsystemet har 6 teman.
Text med highlight i gul accent.
Text med highlight i aquamarine.
Text med highlight i gul accent.
Text med highlight i rosa accent.
Text med highlight i blå accent.
Text med highlight i gul accent.
button.alt-stilar och länkfärger. I theme-dark är .alt-knappen vit och länkars underline är aquamarine.
Fixerad header med blå bakgrundsfält (--blue). Logotypen sitter till vänster. Navigeringslänkarna är vita och aktiv sida markeras med en aquamarine-understrykning (3px).
position: fixed; height: 4rem; z-index: 20. Mobil: hamburger-ikon med slide-in-meny. Desktop: inline-nav med gap 2rem.
Alla avstånd och dimensioner är tokenbaserade. Layouten är responsiv med ett enda breakpoint vid 1080px.
--rowgap
2rem
--verticalpadding
4rem
--maxwidth
1200px
Breakpoint
1080px
Col-gap (desktop)
4rem
Border-radius btn
1rem
Border-radius card
1rem
Header height
4rem
max(calc((100vw − 1200px) / 2) − 4rem, 2rem). Det garanterar att innehållet aldrig är bredare än 1200px, men alltid har minst 2rem marginal — oavsett skärmstorlek.
Varje block använder ett 3- eller 5-kolumnsgrida med edge padding som första och sista kolumn:
Kolumner tilldelas med grid-template-areas per block-typ. Innehåll sitter alltid i de tre mittkolumnerna. Edge-kolumnerna är tomma och skapar automatisk, responsiv marginal.
Sidor byggs med staplande article-block. Varje block har en egen CSS-klass (block_hero, block_text, etc.) och ett tema som styr färgsättning. Temaklass och blocktyp kombineras fritt.
Det här blocket visar upp logotyper, använd alltid svarta logotyper i svg-format. Väljer man mörkt tema inverteras de automatiskt.
Här visas blocket TextImage med en liten bild till vänster
Exempelknapp
Här visas blocket TextImage med en mellanstor bild till höger med mörkt tema.
Exempelknapp
Här visas blocket TextImage med en stor bild till vänster och ljust tema. I det här läget går bilden dessutom ända ut i kanten,
Bildens höjd bestäms av textinnehållets höjd inkl. dess marginaler och bilden croppas från övre vänstra hörnet. I mobil får den en höjd på 50vh.
ExempelknappDet här blocket visar en video tillsammans med text. Alternativen är precis samma som TextImage fast med video istället. Tre videoformat kan väljas ut för maximal kompabilitet: av1, h265 och h264.
I det här exemplet visas videon i medium-storlek.
Parallax-blocket visar 2-3 bilder ovanpå varandra som scrollar med sidan i olika hastighet och bildar på så vis en parallax-effekt som förmedlar djup.
Bilden kan visas som Small, Medium och Large och det finns inställningar för hur mycket bilderna ska scrolla i förhållande till varandra.