New
BYKERO · Brand platform · 01 — 09
Designriktlinjer
Skandinavisk editorial minimalism: varm benvit bas, skarp geometri, generösa produktbilder och återhållsam typografi. Hemsidans faktiska uttryck är normen — med modebild, funktion och rörelse i samma system.
BYKERO
K-symbolen är BYKERO:s fristående igenkänningsmärke. Logotypen och symbolen kan användas var för sig eller tillsammans med tydlig luft mellan. K-symbolens form ska alltid hämtas från originalfilen och får inte ritas om. I sociala kanaler och annonser är BYKERO-logotypen avsändare; K-symbolen används som profilbild eller kompletterande igenkänningsmärke.
01
Typsnitt
Logotyp
BYKERO
- Typsnitt
- Archivo
- Vikt
- 700
- Spärrning
- 0.05em
- Skala
- 1.35rem → 1.75rem
Samma BYKERO-utförande används i sidhuvud, byline, sociala kanaler och annonser.
Display / Rubriker
Move first
- Typsnitt
- Archivo
- Vikter
- 400 / 500 / 600
- Spärrning
- −0.02em → −0.035em
- display-xl
- clamp(2.5rem, 9vw, 7rem)
Brödtext
Squat-proof tights, seamless bras and off-hours loungewear in recycled and organic fabrics.
- Typsnitt
- DM Sans
- Vikter
- 400 / 500
- Storlekar
- 0.75rem – 1rem
Signatur-utility: editorial-eyebrow
New in · Bestsellers · Shop the look
Archivo 500 · 0.6875rem · versaler · spärrning 0.22em. Används för navigation, etiketter och meta-information.
02
Färger
Bone
Primär bakgrund
--background
oklch(0.985 0.004 85)
Card
Paneler & kort
--card
oklch(0.975 0.005 85)
Shade
Produktbakgrund (tone-on-tone)
--shade
oklch(0.955 0.007 85)
Muted
Sekundära ytor
--muted
oklch(0.945 0.006 85)
Ink
Primär text & knappar
--foreground
oklch(0.18 0.008 60)
Muted fg
Sekundär text
--muted-foreground
oklch(0.52 0.01 70)
Vermillion
Accent, rabatt, focus ring
--accent
oklch(0.58 0.19 34)
Concrete
Urban kall neutral
--concrete
oklch(0.66 0.008 250)
Border
Hårlinjer, grid-skillelinjer
--border
oklch(0.9 0.005 85)
Basen är varm neutral (85° hue). Vermillion (34°) är den enda accentfärgen och används sparsamt: rabattpriser, focus ring och enstaka markörer. Inga gradienter.
03
Produktfärger
En sammanhållen färgkarta för BYKERO:s plagg. Kulörerna är fristående från webbplatsens gränssnittsfärger och används som riktning för material, färgval och ton-i-ton-märkning.
Svart och vitt är basen. De varma neutralerna, kaffetonerna, grönt, marinblått och Aura kompletterar kollektionerna. Slutlig färg bedöms alltid på rätt tyg eftersom glans, struktur och melering påverkar uttrycket.
04
Rutnät, radier & linjer
Rutnät
- Maxbredd: 1600px, centrerad
- Marginaler: 16px mobil · 32px desktop
- Produktlistning: kant-till-kant-rutnät, hårfina skiljelinjer
- Startsida: vertikal snap-feed, fullskärmsblock
- Sidhuvud: semitransparent yta med diskret blur och tunn underlinje
Radier
- Bas: 0.125rem (2px) — nästan helt rakt
- sm 0px · md 2px · lg 4px · xl 8px
Interaktion
- link-underline: 1px linje växer in från vänster (0.28s)
- animate-rise: fade + 14px uppåt (0.6s)
- Focus ring: Vermillion; aktiv navigation markeras med högre vikt
- Skuggor används bara funktionellt i flytande lager — annars byggs djup med linjer
Exempel på hover-länk
05
Bildspråk
Format
- Produktlistning: 9:16 på mobil, 2:3 på desktop
- Modellbild alltid först; flatlay alltid bild två
- Produktsida: horisontellt swipe-galleri med zoom och bildindikator
- UGC/community: 1:1, ljusredigerat, autentiskt
Flat lay-standard
- Centrerat plagg mot vit eller varmgrå bakgrund med generös luft
- Mjuk skugga snett nedåt vänster, platt känsla
- Pants följer Block Relaxed Joggers i höjd, bredd och baslinje
- Toppar följer Shift Long Sleeve och har mer vertikal luft
06
Komponenter
Produktkort: modellbild först, diskret status, namn, pris, färgval och snabbköp.
Knappar
Etiketter
NewBestseller−15%
Navigation & ikoner
- Tunna linjeikoner med konsekvent optisk storlek
- Ikonknappar är kompakta och får tydlig etikett för hjälpmedel
- Desktop visar marknadsval i sidhuvudet; mobilens yta hålls fri
Produktsida
- Köpknappen är mörk, fullbredd och direkt handlingsdriven
- Passform ligger under köpknappen; betyg syns även högt upp
- Beskrivning, material, tvättråd och omdömen ligger i tunna rader
07
Rörelse
- Snapp-scroll — startsidan är en vertikal stories-feed, ett block per skärmhöjd
- Stories-visare — automatisk växling, tydlig förloppsindikator
- Lazy-sektioner — under-the-fold-block monteras vid närhet till viewport
- Easing — cubic-bezier(0.2, 0.7, 0.2, 1) som standard
- Hover — understrykning 0.28s, bildskala subtil
- Zoom — pinch-to-zoom på produkt- och community-bilder
08
Tonalitet
Vi säger
- Kort, självsäkert, verkställande — ”Move first”
- Versaler i rubriker, aldrig utropstecken i onödan
- Tekniska förtjänster berättas sakligt (squat-proof, seamless)
Vi undviker
- Wellness-mjukhet och överdrivna löften
- Gradienter, rundade ”vänliga” former, emojis
- Fler än en accentfärg i samma vy
09
Plaggmärkning
Regel
- K-symbolen, logotypen BYKERO eller kombinationen K + BYKERO får användas
- K-symbolen hålls kompakt; ordmärket har normalt en bredd på ca 4–6 cm
- Underdelar: i linningen mitt bak, cirka 2 cm under linningens överkant
- K-symbolen kan även placeras diskret vid höft, framsida eller ovanför ankeln
Kontrast
- Ton-i-ton är standard — märket ska anas, inte skrika
- Kontrast används på mörka baser och signaturplagg
- K-symbolens kvadratiska geometri och proportioner får aldrig ändras eller beskäras
- Aldrig outline, skugga eller lutning
