Vinted DESIGN.md

Design System Inspiration of Vinted

Overview

Visual Theme & Atmosphere

Vinted is a marketplace for second-hand items, "on a mission to make second-hand first choice". Its About page tells the origin: in 2008 founder Milda Mitkute was moving with too many clothes, Justas Janauskas built a website to give them away, and "Vinted was born" — "from a Lithuanian start-up" to a European business where "more than 2,000 people work from our HQ in Lithuania and offices across Europe". It has grown beyond clothing to kids' items, luxury handbags and more.

The site is clean and quiet: white ground, a blue-grey ink #15191a, subtle text #5a6566, a pale teal-grey surface #edf2f2, and Vinted's teal #007782 for everything actionable.

What makes it worth reading:

• Layered token vocabulary. Primitive ramps (--primary-default, --primary-dark, --primary-light …), semantic roles named by intent, prominence and state (--background-action-primary-prominent-idle, --foreground-passive-neutral-subtle-idle), and component parameters (--v-comp-input-v2-*, --v-comp-table-*, --v-comp-sheet-*).
• States as overlays. --v-comp-pressable-state-hover-opacity .04, -pressed-opacity .08, -focused-opacity .02 over #0f1212. The header buttons paint a translucent ::after rather than changing their fill.
• Channels, not colours. Many roles are stored as bare RGB channels (0,119,130) so alpha can be applied at use.

Primary tasks

• Browse and search second-hand items.
• Sell an item; sign up or log in.

Brand Narrative

From one person's too-many clothes in 2008 to a European marketplace run from Lithuania, Vinted's mission is to make second-hand the first choice. Its interface is a calm teal-and-grey frame whose states are quiet overlays, leaving attention for the items.

Principles

• Second-hand first.
• Intent-named tokens. Action or passive, prominent or subtle, idle or hover.
• Quiet states. Overlays of 2–8%.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on vinted.co.uk: 416 root custom properties — --v-comp-*, --background-*, --foreground-*, --border-*, --shadow-*, --primary-*, --bloom-* and spacing/radius groups. All first-party.

Teal (primary)

• Primary (#007782) — --primary-default, --background-action-primary-prominent-idle.
• Primary dark (#004654) — --primary-dark, --foreground-action-primary-prominent-high-idle.
• Primary extra dark (#112e33) · Primary medium (#86cdcf) · Primary light (#c9f0ee) · Primary extra light (#e6fafa).

Ink and surfaces

• Foreground (#15191a) — --foreground-passive-neutral-high-idle.
• Text subtle (#5a6566) — --foreground-passive-neutral-subtle-idle; 88 <p> elements.
• Canvas (#ffffff) · Surface subtle (#edf2f2, --background-passive-disabled).
• Border (#b6bebf) — --background-action-neutral-subtle-idle, table dividers.
• Overlay ink (#0f1212) — --v-comp-pressable-state-hover-color.

Status

Error #d04555 · Success #28865a · Warning #f9bb42.

Typography

Font family

A face loaded as V_INTER (400, 500, 580), with "Helvetica Neue", Arial, sans-serif behind it. --bloom-font-weight-label is 375.

Scale

Body and search 16px/375; header button labels 12px/500.

Layout

• A header with search, the two actions and a category row; a hero and item grids below.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Shadows are tokens — --shadow-elevation-*, --shadow-lifted-*, --shadow-elevated-* — with blur from 2px (--shadow-elevation-low-blur) to 16px (--shadow-elevated-blur) on #15191a; --shadow-elevation-medium-opacity is .12.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.vinted.co.uk/ (live homepage — 416 root custom properties read via getComputedStyle; V_INTER loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.vinted.co.uk/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://www.vinted.co.uk/about (About us — mission, 2008 founding story, "our HQ in Lithuania", more than 2,000 people, read 2026-09-26)

Components

Measured on the UK home page, focus read under a real Tab key, a hover counted only when :hover matched; pseudo-elements were compared too.

• Sell now — #007782 fill, white 12px/500 label, 6px, 32px. Hover and focus lay a white ::after at 2%, press at 8%.
• Sign up | Log in — transparent, teal #007782 border and label, 6px, 32px. A teal ::after at 2% on hover and focus, 8% pressed.

Radius

6px default and small, 12px medium (sheets), 3996px round.

States

Hover and focus: a 2% ::after overlay. Press: 8%. The pressable tokens declare .04 hover, .08 press and .02 focus over #0f1212.

Do's and Don'ts

Do

• Use teal #007782 for actions, and draw states as translucent overlays.
• Use the blue-grey ink #15191a and subtle #5a6566 for text.
• Name roles by intent and prominence, not by colour.

Don't

• Don't swap the fill on hover; overlay it.
• Don't use pure black text.
• Don't put the teal on passive text; it is for actions and brand.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#007782 teal · #004654 teal dark · #c9f0ee teal light · #15191a ink · #5a6566 subtle · #edf2f2 surface · #b6bebf border

Example Component Prompts

• "A 32px teal #007782 button, white 12px/500 label, 6px radius; hover a 2% white overlay, press 8%."
• "A teal outline twin with a 2% teal overlay on hover."

Governance

Known Gaps

• Contrast, button-auth. Text #007782 on #00000000 measures 3.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.