coderef

Vinted

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…
DownloadRaw
vinted.co.ukVisit ↗
View full
vinted.co.ukVisit site ↗
Vinted website, full page

Palette

At a glance

Website
vinted.co.uk ↗
Theme
light
Typefaces
System
Sections
11
Length
952 words

Add it to your project

Then prompt your agent

Design System · Vinted

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Vinted
colors:
  primary: '#007782'
  primary-dark: '#004654'
  primary-extra-dark: '#112e33'
  primary-medium: '#86cdcf'
  primary-light: '#c9f0ee'
  primary-extra-light: '#e6fafa'
  foreground: '#15191a'
  text-subtle: '#5a6566'
  canvas: '#ffffff'
  surface-subtle: '#edf2f2'
  border: '#b6bebf'
  overlay-ink: '#0f1212'
  error: '#d04555'
  success: '#28865a'
  warning: '#f9bb42'
typography:
  body:
    fontSize: 16px
    fontWeight: 375
    use: search field and body text
  label:
    fontSize: 12px
    fontWeight: 500
    use: header button labels
rounded:
  sm: 6px
  md: 12px
  full: 3996px
components:
  button-sell:
    type: button
    backgroundColor: '#007782'
    textColor: '#ffffff'
    rounded: 6px
    height: 32px
    padding: 0 12px
    typography: 12px / 500
    hover: rgba(255,255,255,0.02)
    pressed: rgba(255,255,255,0.08)
    focus: rgba(255,255,255,0.02)
    use: Sell now in the header — a teal fill with a white label; hover and focus lay a white ::after at 2%, press at 8%.
  button-auth:
    type: button
    backgroundColor: transparent
    textColor: '#007782'
    border: '#007782'
    rounded: 6px
    height: 32px
    padding: 0 12px
    typography: 12px / 500
    hover: rgba(0,119,130,0.02)
    pressed: rgba(0,119,130,0.08)
    focus: rgba(0,119,130,0.02)
    use: Sign up | Log in — teal outline and label; a teal ::after at 2% on hover and focus, 8% when pressed.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: V_INTER

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.

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.

More like Vinted

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses