Shopping / iOS / Android / Web

Target

Target keeps its shelves calm, white tiles on a pale gray page in plain Helvetica, so the bullseye red can mark the brand, the sign-in and the sale.

Download
  • #CC0000
  • #333333
  • #666666
  • #D6D6D6
  • #F7F7F7
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#CC0000
  • primary dark#AA0000
  • primary wash#FEE9E7
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#333333
  • ink muted#666666
  • on footer#FFFFFF

Status

  • success#008300
  • info#2758B9
  • warning#EB6A00

More

  • gray 400#888888
  • gray 200#D6D6D6
  • gray 100#E8E8E8
  • page#F7F7F7
  • footer#333333

Typography

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

  • Helvetica for TargetHelvetica for Target is private and not available in open fonts. Shown in Arimo, the closest open match.
  • display38px / 700 / 39.9px

    Target

  • headline29px / 700 / 36.25px

    Pack my box with five dozen liquor jugs

  • title23px / 700 / 28.75px

    Pack my box with five dozen liquor jugs

  • lead20px / 400 / 24px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 20.8px

    The quick brown fox jumps over the lazy dog

  • button16px / 700 / 22.4px

    Continue to checkout

  • caption12px / 400 / 17.1px

    Continue to checkout

Shape

Corner radius tokens.

  • x14px
  • x28px
  • x312px
  • x416px
  • x624px
  • max999px

Spacing

The spacing scale, drawn to size.

  • x14px
  • x28px
  • x312px
  • x416px
  • x624px
  • x832px
  • x1248px

Components

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

  • button primary
    button-primary
  • button outline
    button-outline
  • location pill
    location-pill
  • input
    input
  • product tile
    product-tile
  • footer
    footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 122 lines
version: alpha
name: Target-design-analysis
description: "A big-box retailer in one bullseye red (#cc0000) and soft grays: Helvetica for Target at 400 and 700, a pale gray page under white cards, red pill buttons for signing in and signing up, 4px product tiles and a full reference palette shipped with the site."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#cc0000"
  primary-dark: "#aa0000"
  primary-wash: "#fee9e7"
  on-primary: "#ffffff"
  ink: "#333333"
  ink-muted: "#666666"
  gray-400: "#888888"
  gray-200: "#d6d6d6"
  gray-100: "#e8e8e8"
  page: "#f7f7f7"
  canvas: "#ffffff"
  footer: "#333333"
  on-footer: "#ffffff"
  success: "#008300"
  info: "#2758b9"
  warning: "#eb6a00"

typography:
  # Font note: "Helvetica for Target" is a private font and is not available in open fonts. Closest open alternative: "Arimo".
  display:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 39.9px
  headline:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 36.25px
  title:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 23px
    fontWeight: 700
    lineHeight: 28.75px
  lead:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20.8px
  button:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22.4px
  caption:
    fontFamily: "'Helvetica for Target', HelveticaForTarget, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 17.1px

rounded:
  x1: 4px
  x2: 8px
  x3: 12px
  x4: 16px
  x6: 24px
  max: 999px

spacing:
  x1: 4px
  x2: 8px
  x3: 12px
  x4: 16px
  x6: 24px
  x8: 32px
  x12: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.max}"
    height: 40px
    padding: 0 16px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.max}"
    height: 44px
    padding: 0 12px
  location-pill:
    backgroundColor: "{colors.page}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.max}"
    height: 36px
    padding: 8px 20px 8px 8px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.x2}"
    height: 44px
    padding: 9px 8px
  product-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.x1}"
    padding: 16px
  footer:
    backgroundColor: "{colors.footer}"
    textColor: "{colors.on-footer}"
    typography: "{typography.caption}"
    padding: 24px

Overview

Target is a United States retailer selling groceries, home goods, clothing and electronics, with pickup and delivery. Its site is a pale gray page of white tiles in Helvetica for Target, with the bullseye red kept for the logo, the sign-in and sign-up buttons and sale prices. A reference palette, a radius scale and a space scale ship with the live site. [Measured]

What defines the look:

  1. Bullseye red, used sparingly. #cc0000 (red 600 in the shipped palette) fills the logo, the sign-in and sign-up pills and sale labels. [Measured]
  2. Helvetica for Target. A house cut of Helvetica at regular and bold. Headings are bold, body and prices regular. [Measured]
  3. Gray page, white tiles. The page is #f7f7f7 with white tiles at a 4px corner, and text is #333333 rather than black. [Measured]
  4. Pills for actions. Buttons, the location chooser and "Show all" links are full pills (999). [Measured]
  5. Seasonal color. Campaign bands change with the season. On the date measured they were Halloween tans (#faf0e6, #f1e0cb) and orange, which are not part of the core palette. [Observed]

Source for this file: the home page, the grocery category page and a product page that showed "Item not available" with its footer sign-up form, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the reference palette, radius and space scales the live site declares on its root element. Product listings did not load for the region the browser ran from, and the account page rendered empty. Target's design system documentation is not public. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Red#cc0000, darker #aa0000, wash #fee9e7red 600, 700, 050 [Measured]
Text#333333gray 700 [Measured]
Muted text#666666gray 500 [Measured]
Borders#888888 on inputs and outlines, #d6d6d6 dividersgray 400, 200 [Measured]
Fill#e8e8e8gray 100 [Measured]
Page#f7f7f7gray 050 [Measured]
Tiles#ffffffwhite [Measured]
Footer#333333 with white textgray 700 [Measured]
Green, blue, orange#008300, #2758b9, #eb6a00green 600, blue 600, orange 500; roles not seen on the pages measured [Measured]

The palette has ten hue families (red, blue, green, orange, yellow, indigo, lime, teal, purple, pink, khaki) from 050 to 900, plus a gray scale from 050 to 1000 and white, gray and black opacity steps. [Measured]

Typography

Helvetica for Target at regular and 700. [Measured]

RoleDesktopMobileWeight
Campaign headline38 on 39.924 on 27700 [Measured]
Page title29 on 36.25not shown700 [Measured]
Section title23 on 28.7523 on 28.75700 [Measured]
Price block21 on 25.215.55 on 18.66700 [Measured]
Lead20 on 2414 on 16.8400 [Measured]
Body16 on 20.814 on 18.2400 [Measured]
Button16 on 22.4same700 [Measured]
Legal12 on 17.1same400 [Measured]

Shape and spacing

The shipped radius scale is 0, 4, 8, 12, 16, 24 and 999 (named x1 to x6 and max). In use, product tiles take 4 (the most frequent corner), inputs 8, promotion tiles 12, and buttons and chips 999. [Measured] The space scale steps by 4 from 4 to 56, then 80. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

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

Platform: iOS

How the Target iOS app looks and behaves was not captured. The reference palette ships on the web, but Target's design system documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. 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, categories, deals, the cart and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A red add to cart button on product screens. [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 red, the gray page with white tiles and the Helvetica type with the web. [Inferred]

Platform: Android

How the Target Android app looks and behaves was not captured. The reference palette ships on the web, but Target's design system documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. 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, categories, deals, the cart and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A red add to cart button on product screens. [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 red, the gray page with white tiles and the Helvetica type with the web. [Inferred]

Platform: Web

The home page, the grocery category page and an unavailable product page with its footer form, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. Category pages carry no breadcrumb on the views measured. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with the bullseye, a 44 high search field, a 36 high "Ship to" location pill, an "Ask Target" pill and a red "Sign in or create account" pill. On mobile the header keeps the location pill and search. [Measured]

Main action

Expected on Web: Page-level button.

A red #cc0000 pill with white 16px bold text, 40 high in the header and 44 in the footer sign-up form. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Inputs are white, 44 high, with a 1px #888888 border and an 8px corner. "Show all" links are 44 high white pills with the same border. Campaign links are flat rectangles in the season's tint, 45 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and inputs are 40 to 44 high. The location pill is 36 and the Ask Target pill 32. [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-in page rendered empty in the automated browser and was not checked. [Observed]

Platform conformance

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

A conventional responsive storefront: the header simplifies, type steps down and the red, grays and pills stay the same. [Measured]

Cross-platform consistency

Consistent across platforms: the bullseye red, gray page and white tiles, and Helvetica type. [Measured for web, Inferred for the apps]

Intentionally different: seasonal campaign colors change on the web through the year. [Observed]

Do's and Don'ts

Do

  • Keep red for the logo, the main sign-in and sign-up actions and sale prices.
  • Put white tiles on a pale gray page.
  • Use #333333 for text, not black.
  • Pick corners and spacing from the shipped scales (4, 8, 12 and 999; steps of 4).

Don't

  • Don't treat a season's campaign tints as brand colors.
  • Don't use a second bright color for actions.
  • Don't use square buttons. Actions are pills.

Known Gaps

  • Product listings and product detail did not load for the region the browser ran from, the account page rendered empty, and the cart and checkout need an account, so none of them were measured.
  • The iOS and Android apps were not captured. The reference palette ships on the web, but Target's design system documentation is not public, so every mobile topic is inferred.
  • Semantic token names beyond the reference palette were not read, because the measuring tool keeps the first 220 root properties.
  • Icons, motion and modals were not measured.
  • Helvetica for Target is private. Arimo was chosen because it is drawn on Helvetica's proportions and measured within 1 percent of the same headline. The live sample rendered as an image placeholder in the comparison, so the choice leans on width and the known Helvetica basis.
  • Account deletion and store policy rules were not verified.