Shopping / iOS / Android / Web

Vinted

Vinted keeps its type small and light so the photos lead, and gives every action the same deep teal.

Download
  • #007782
  • #E6FAFA
  • #15191A
  • #5A6566
  • #EDF2F2
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#007782
  • on primary#FFFFFF
  • primary wash#E6FAFA

Surfaces

  • canvas#FFFFFF

Text

  • ink#15191A
  • ink muted#5A6566

Lines

  • border#B6BEBF
  • hairline#F2F2F2

More

  • page#EDF2F2

Typography

Each style is set with the file's own family, size, weight and spacing.

  • V-InterV-Inter is private and not available in open fonts. Shown in Inter, the closest open match.
  • headline24px / 500 / 32px

    Pack my box with five dozen liquor jugs

  • title22px / 580 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 375 / 22px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 22px

    Continue to checkout

  • nav14px / 375 / 18px

    The quick brown fox jumps over the lazy dog

  • chip13px / 400 / 16.25px

    Continue to checkout

  • caption12px / 375 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • sm6px
  • md12px
  • lg24px
  • pill3996px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary small
    button-primary-small
  • button outline
    button-outline
  • button social
    button-social
  • filter pill selected
    filter-pill-selected
  • filter pill
    filter-pill
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 113 lines
version: alpha
name: Vinted-design-analysis
description: "A second-hand clothing marketplace in one deep teal (#007782) on white and pale blue-gray, with Vinted's own cut of Inter at light in-between weights (375, 500, 580), small 6px controls, round filter pills and photo-first item grids."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#007782"
  on-primary: "#ffffff"
  primary-wash: "#e6fafa"
  ink: "#15191a"
  ink-muted: "#5a6566"
  canvas: "#ffffff"
  page: "#edf2f2"
  border: "#b6bebf"
  hairline: "#f2f2f2"

typography:
  # Font note: "V-Inter" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  headline:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
  title:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 580
    lineHeight: 28px
  body:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 375
    lineHeight: 22px
  button:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
  nav:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 375
    lineHeight: 18px
  chip:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16.25px
  caption:
    fontFamily: "V-Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 375
    lineHeight: 16px

rounded:
  sm: 6px
  md: 12px
  lg: 24px
  pill: 3996px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 44px
    padding: 0 16px
  button-primary-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 0 12px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 0 12px
  button-social:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 44px
    padding: 0 16px
  filter-pill-selected:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.chip}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 8px 12px
  filter-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.chip}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 8px 12px

Overview

Vinted is a marketplace for buying and selling second-hand clothes and other goods across Europe and beyond. Its site is a white and pale blue-gray grid of item photos, set in Vinted's own cut of Inter at light weights, with one deep teal for every action: Sell now, sign up, the selected filter. [Observed]

What defines the look:

  1. One deep teal. #007782 fills Sell now with white text, outlines Sign up and Log in, and rings the selected filter pill. [Measured]
  2. Light, in-between weights. Text is set at 375, buttons at 500 and section titles at 580, all from one variable face. [Measured]
  3. Small and dense. Header buttons are 32 high at 12px, and item details are 12 on 16 in #5a6566. Photos do the talking. [Measured]
  4. 6px controls, round filters. Buttons and inputs use 6px, item photos 24 (on banners) and filters are full pills. [Measured]
  5. Blue-gray page. Catalogue pages sit on #edf2f2 behind white item cards. [Measured]

Source for this file: the United Kingdom home page, a catalogue search for jackets and the sign-up page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Vinted does not publish its design system. Listing an item and messages sit behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Teal#007782 with white textSell now, outlines, selected filter ring [Measured]
Teal wash#e6fafaSelected filter fill [Measured]
Ink#15191aTitles, item names, social buttons [Measured]
Muted text#5a6566Brands, sizes, conditions, nav [Measured]
Canvas#ffffffHeader, cards [Measured]
Page#edf2f2Catalogue background [Measured]
Borders#b6bebf on pills, ink at 12 percent on cards, #f2f2f2 hairlines[Measured]
Scrimink at 48 percentBehind overlays [Measured]

Typography

One variable face, served as V-Inter and V_INTER, used at 375, 400, 500 and 580. [Measured]

RoleDesktopMobileWeight
Page headline24 on 3222 on 28500 to 580 [Measured]
Section title22 on 2822 on 28580 [Measured]
Body and inputs16 on 22same375 [Measured]
Button16 on 22same500 [Measured]
Navigation14 on 18not shown375 [Measured]
Filter chip13 on 16.25same400 [Measured]
Item details and small buttons12 on 16same375 [Measured]

Shape and spacing

Buttons, inputs and item photos use 6px corners (the most frequent radius by far), banners and some panels 24, a few tiles 12, and filter pills fully round. [Measured] Buttons carry 12 or 16 side padding, filter pills 8 by 12. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Vinted iOS app looks and behaves was not captured. Vinted does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, search, selling, inbox and the profile is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A teal Sell action, likely in the tab bar. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the teal, the light Inter weights and the photo grid with the web. [Inferred]

Platform: Android

How the Vinted Android app looks and behaves was not captured. Vinted does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, search, selling, inbox and the profile is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A teal Sell action, likely in the navigation bar. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the teal, the light Inter weights and the photo grid with the web. [Inferred]

Platform: Web

The home page, a catalogue search and the sign-up page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with a search field, a Catalogue menu (36 high, 14px), an outlined teal "Sign up | Log in" button and a teal "Sell now" button, both 32 high. Mobile shows a 44 high Sell now button. [Measured]

Main action

Expected on Web: Page-level button.

A teal #007782 button with white 16px medium text, 44 high with a 6px corner (32 high with 12px text in the header). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A "Where do you live?" dialog opens over ink at 48 percent on first visit. [Measured]

Controls

Expected on Web: Native or custom.

Category filters are 36 high pills: the selected one teal wash with a teal ring, the rest white with a #b6bebf ring. Social sign-in buttons are 44 high, white, with a 1px ink border and a 6px corner. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values with small steps between desktop and mobile. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Header buttons are 32 high and filters 36, below 44. The main mobile button is 44. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The sign-up page offers Google and Apple as equal outlined buttons next to email. [Measured]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A dense marketplace grid where small, light text keeps the focus on item photos. Header controls are smaller than touch guidance. [Measured]

Cross-platform consistency

Consistent across platforms: the one teal, light text weights and photo grids. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the deep teal for every action and selected state, and nothing else.
  • Keep text light (375) and small next to photos.
  • Use 6px corners for buttons and photos, and full pills for filters.
  • Put item cards on the pale blue-gray page.

Don't

  • Don't add a second accent color.
  • Don't set body text heavy.
  • Don't round buttons into pills. Only filters are pills.

Known Gaps

  • Listing an item, messages, checkout and the profile sit behind an account and were not measured.
  • The iOS and Android apps were not captured, and Vinted publishes no design system, so every mobile topic is inferred.
  • Icons, motion and the region dialog's contents were not measured.
  • Header buttons (32) and filter pills (36) are below the 44 and 48 touch minimums. That is the shipped size.
  • V-Inter is Vinted's own cut, served under its own name and used at weights such as 375 and 580. It behaves like Inter's variable font, so Inter is given as the open alternative. Whether the cut changes any letter shapes was not checked side by side.
  • Account deletion and store policy rules were not verified.