New
Brand platform · 01 — 08
Designriktlinjer
Skandinavisk editorial minimalism: varm benvit bas, vass geometri, breddad versaltypografi som signatur — och Vermillion som enda utskickande färgintrång. Mobil-first med sociala kanalers bildformat (9:16) som norm.
VARV
Ordet värv — ursprungligen en färgklick på tyg — speglar idén att träningskläder är en yta där färg, rörelse och personlighet möts.
01
Typsnitt
Logotype
VARV
- Typsnitt
- Syncopate
- Vikt
- 700
- Spärrning
- 0.22em
- Skala
- 1.35rem → 1.75rem
Display / Rubriker
Move first
- Typsnitt
- Archivo
- Vikter
- 400 / 500 / 600
- Tracking
- −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
Rutnät, radier & linjer
Rutnät
- Maxbredd: 1600px, centrerad
- Marginaler: 16px mobil · 32px desktop
- PLP: edge-to-edge grid, 1px skiljelinjer, inget whitespace
- Startsida: vertikal snap-feed, fullskärmsblock
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
- Skuggor används inte — djup byggs med 1px-linjer
Exempel på hover-länk
04
Bildspråk
Format
- Produktbilder: 9:16 (stories-format), mobil-first
- PLP: on-model först, flat lay som bild två vid swipe
- PDP: horisontellt swipe-galleri + stories-liknande visare
- UGC/community: 1:1, ljusredigerat, autentiskt
Flat lay-standard
- Centrerat plagg mot vit/varmgrå bakgrund
- Mjuk skugga snett nedåt vänster, platt känsla
- Rak plagglinje, ärmar lätt bakom plagget
- Identisk bakgrund, ljus och skala på samtliga
05
Komponenter
Produktkort: 9:16-bild, diskret etikett, namn + pris, rabatt i Vermillion.
Knappar
Etiketter
NewBestseller−15%
06
Rörelse
- Snapp-scroll — startsidan är en vertikal stories-feed, ett block per skärmhöjd
- Stories-visare — 5s auto-advance per bild, vit 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
07
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
08
Plaggmärkning
Regel
- Endast ordmärket BYKERO — inga symboler på plagg
- Bredd ca 4–6 cm, alltid centrerat
- Underdelar: i linningen, mitt bak över svanken
- Överdelar: mellan skulderbladen, i bandet eller litet mitt fram
Kontrast
- Ton-i-ton är standard — märket ska anas, inte skrika
- Kontrast används på mörka baser och signaturplagg
- Samma spärrning och vikt som logotypen
- Aldrig outline, skugga eller lutning
