--- 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 | Role | Value | Where | |------|-------|-------| | Primary | `#3692e7` | Website | | 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 | `#bf811d` | Mobile app | | Fancy | `#b72fc6` | Both | | Future and classes | `#a068ca`, `#581c87` | Website | | Page background | hue 37, 7 to 10 percent lightness | Website dark | | Box background | hue 37, 7 percent saturation, 14 percent lightness | Website dark | | Popup background | hue 37, 7 percent, 22 percent | Website dark | | Zebra rows | hue 37, 5 percent, 19 and 24 percent | Website dark | | Border | `#404040`, page `#383838`, light `#666666` | Website dark | | Chat highlight | `#4e7a1d` at 40 percent | Website | 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.