Media & Entertainment / iOS / Android / Web

Lichess

Lichess is a tool for people who play a lot: a dark site built from one hue at stepped lightness, blue for interaction, green and orange for meaning, and small, plain shapes.

Download
  • #3692E7
  • #1B78D0
  • #629924
  • #D64F00
  • #CC3333
  • #383838

Color

Every color token in the file, grouped by role.

Brand

  • primary web#3692E7
  • primary app#1B78D0
  • primary app dark#1465C4
  • secondary#629924
  • secondary deep#50861B
  • accent#D64F00
  • accent deep#CC3F00
  • secondary wash#ECF3E5
  • accent wash#FAEAE0
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF

Text

  • link wash#E4EFF9
  • ink#222222

Lines

  • border web#404040
  • border web page#383838
  • border web light#666666

More

  • red#CC3333
  • brag#BF811D
  • fancy#B72FC6
  • future#A068CA
  • clas#581C87
  • chat host#4E7A1D66 (40%)
  • shade#4D4D4D
  • dark#333333
  • red wash#F9E7E7

Typography

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

  • Noto SansOpen font, shown as published.
  • Roboto MonoOpen font, shown as published.
  • title20px / 700 / 1.3

    Pack my box with five dozen liquor jugs

  • callout18px / 600 / 1.3

    The quick brown fox jumps over the lazy dog

  • section title18px / 700 / 1.3

    The quick brown fox jumps over the lazy dog

  • subtitle16px / 500 / 1.4

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • form description12px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • clock20px / 600 / 1.2

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • board5px
  • thumbnail5px
  • card12px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px
  • xl32px

Components

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

  • button primary
    button-primary
  • button primary web
    button-primary-web
  • card
    card
  • accent callout
    accent-callout
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 112 lines
version: alpha
name: Lichess-design-analysis
description: "A free, ad-free chess platform built around a warm dark site (a brown-gray hue of 37 degrees at 14 percent lightness) with a blue primary (#3692e7 on the web, #1b78d0 in the mobile app), a green secondary (#629924) and an orange accent (#d64f00). The mobile app is a Material app that mirrors the site's palette, with tight 12 and 5 pixel corners."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary-web: "#3692e7"
  primary-app: "#1b78d0"
  primary-app-dark: "#1465c4"
  secondary: "#629924"
  secondary-deep: "#50861b"
  accent: "#d64f00"
  accent-deep: "#cc3f00"
  red: "#cc3333"
  brag: "#bf811d"
  fancy: "#b72fc6"
  future: "#a068ca"
  clas: "#581c87"
  chat-host: "#4e7a1d66"
  border-web: "#404040"
  border-web-page: "#383838"
  border-web-light: "#666666"
  shade: "#4d4d4d"
  dark: "#333333"
  link-wash: "#e4eff9"
  secondary-wash: "#ecf3e5"
  accent-wash: "#faeae0"
  red-wash: "#f9e7e7"
  paper: "#ffffff"
  ink: "#222222"
  on-primary: "#ffffff"

typography:
  title:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  callout:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  section-title:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  subtitle:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
  body:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  form-description:
    fontFamily: "Noto Sans, Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
  clock:
    fontFamily: "Roboto Mono, monospace"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px

rounded:
  board: 5px
  thumbnail: 5px
  card: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary-app}"
    textColor: "{colors.on-primary}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.card}"
    height: 48px
  button-primary-web:
    backgroundColor: "{colors.primary-web}"
    textColor: "{colors.on-primary}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.board}"
    height: 40px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    padding: 16px
  accent-callout:
    backgroundColor: "{colors.accent-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.callout}"
    rounded: "{rounded.card}"
    padding: 16px

Overview

Lichess looks like a serious, uncluttered tool for people who play chess a lot. The website is dark by default with a warm brown-gray tint, the board and pieces are the visual centerpiece, and a clear blue marks interactive elements. The mobile app is a Material app that borrows the site's blue, green and orange and adds standard Material list and card layouts. [Measured]

Three decisions define the look:

  1. A hue-driven dark theme. Every background on the site is computed from one hue (37 degrees) at different lightness steps: page 7 to 10 percent, boxes 14 percent, popups 22 percent. Changing the site hue re-themes the whole site. [Measured]
  2. Three roles, three hues. Blue is primary (#3692e7 on the web), green is secondary (#629924), and orange (#d64f00) is the accent. Each has a Material-style ramp from 50 to 900 in the app. [Measured]
  3. Utility first. Type is simple and bold, spacing is a plain 16 pixel unit, and corners are small: 12 for cards and 5 for the board and thumbnails. [Measured]

Source for this file: the public app source and lichess.org, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleValueWhere
Primary#3692e7Website
Primary (app seed)#1b78d0 (ramp #e4eff9 to #0848b3)Mobile app
Secondary#629924 (ramp #ecf3e5 to #346b0d)Both
Accent#d64f00 (ramp #faeae0 to #bc2600)Mobile app
Red#cc3333 (ramp #f9e7e7 to #ad1414)Mobile app
Brag#bf811dMobile app
Fancy#b72fc6Both
Future and classes#a068ca, #581c87Website
Page backgroundhue 37, 7 to 10 percent lightnessWebsite dark
Box backgroundhue 37, 7 percent saturation, 14 percent lightnessWebsite dark
Popup backgroundhue 37, 7 percent, 22 percentWebsite dark
Zebra rowshue 37, 5 percent, 19 and 24 percentWebsite dark
Border#404040, page #383838, light #666666Website dark
Chat highlight#4e7a1d at 40 percentWebsite

All [Measured]. Hover and focus colors on the site are computed by mixing the primary with black or white (for example 25 percent white for link hover and 15 percent black for dim states).

Typography

  • App: title 20 bold, callout 18 semibold, section title 18 bold, main list title 18 medium, subtitle 16 medium, board preview title 16 bold and form description 12. Subtitles use 70 percent opacity. Time controls use 1.2 letter spacing. [Measured]
  • Website: Noto Sans-based stack with a variable font family token. [Inferred from the font tokens] Chess clocks use a monospace face. [Inferred]

Shape and spacing

  • Radii: cards 12, board 5, thumbnails 5. [Measured]
  • Spacing: a plain 16 unit for body, section and form padding, in both directions. [Measured]

Iconography and motion

Custom chess icon fonts (Lichess icons, puzzle icons and social icons) are included. [Measured] The site uses SVG chess pieces from hashed asset URLs. [Measured] Motion values were not extracted. [Inferred]

Themes

The site has dark and light themes plus a board and piece theme chooser. The app has a custom theme extension with light and dark variants, plus a chart color. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

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

The app uses adaptive Material and Cupertino components, so the back swipe is expected. Back button style was not verified. [Inferred]

Primary navigation

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

A bottom navigation with home, puzzles, tools, watch and settings. The tab list is inferred from product knowledge. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

Large "Play" buttons on the home screen. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Adaptive dialogs and bottom sheets. [Inferred]

Controls

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

Adaptive controls. Cupertino variants are used on iOS where the app chooses them. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Follows the system text scale. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

Handled by the platform. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom Lichess icon fonts. [Measured]

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.

Sign-in is with a Lichess account (OAuth to the Lichess site), not a third-party social login. Account deletion is available through Lichess settings. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Medium fidelity. A Material look with adaptive pieces where they matter. [Inferred]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

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

System back with Material app bars. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A Material navigation bar, with a rail on larger screens. [Inferred]

Main action

Expected on Android: floating action button.

Large play buttons rather than a floating action button. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Material dialogs, bottom sheets and snackbars. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls themed with the Lichess ramps. [Inferred]

Text sizing

Expected on Android: font scale.

Follows the system font scale. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom Lichess icon fonts. [Measured]

Account and sign-in rules

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

Lichess account. Deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

High fidelity. Uses Material components and a Material color ramp structure (50 to 900) for each role. [Measured]

Platform: Web

The lichess.org site, with a hue-driven theme system.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back. Game and study pages keep their own navigation. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

A top header with dropdown menus (--c-bg-header-dropdown token). [Measured for the token]

Main action

Expected on Web: page-level button.

A large Play button in the primary blue. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Popups on a 22 percent lightness surface, and a page mask of #0009. [Measured]

Controls

Expected on Web: native or custom.

Custom inputs with a lower-lightness background than the page. [Measured]

Text sizing

Expected on Web: browser zoom.

Not verified. [Inferred]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive, with a board that scales to the viewport. [Inferred]

Icons

Expected on Web: any.

An icon font plus SVG pieces. [Measured]

Account and sign-in rules

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

Account-based, free, with no ads. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms with a themeable palette. [Measured]

Cross-platform consistency

The three-hue palette (blue, green, orange) and the plain utility feel hold across site and app. The site's primary blue (#3692e7) is lighter than the app's (#1b78d0), and the site is dark-first while the app offers both. [Measured]

Do's and Don'ts

Do

  • Build every dark background from one hue at stepped lightness values.
  • Use blue for interaction, green for success and orange for emphasis.
  • Keep cards at 12 and boards and thumbnails at 5.
  • Compute hover and dim states by mixing with black or white.
  • Use a plain 16 pixel spacing unit.

Don't

  • Don't add ads or decorative backgrounds behind the board.
  • Don't hard-code gray backgrounds. Derive them from the site hue.
  • Don't use the app's darker blue on the dark site.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The font families and the website type scale were not fully read.
  • Navigation structure in the app is inferred from product knowledge.
  • The app's dark-mode surface values were not extracted.
  • Account deletion and store policy rules were not verified.
  • Contrast: white text on the web primary #3692e7 measures about 3.3 to 1, below the 4.5 to 1 target for normal text.