---
version: alpha
name: "Fairphone"
description: "Repair-minded hardware storytelling with forest green and bold grotesque type."
colors:
  bg: "#fdfdfc"
  text: "#1f2021"
  brand: "#00433d"
  on-brand: "#f9f9f8"
  surface: "#f0f0ee"
typography:
  display:
    fontFamily: "Bricolage Grotesque"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "DM Sans"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Fairphone centers the physical phone in an outdoor photographic scene. White transparent navigation and a bold lower-left slogan contrast with the forest. The call to action is outlined and square, keeping the product image more prominent than the interface.

## Colors

The observed deep green is #00433d, with near-white #fdfdfc and #f9f9f8 surfaces/text and #1f2021 ink. #f0f0ee is a supporting neutral. Do not convert every green in the forest photograph into a design token.

## Typography

Bricolage Grotesque supplies the 64px, weight-600 desktop heading and 32px mobile heading. DM Sans appears in controls. Ignore the inherited Odoo/system body stack when choosing the display face; it does not describe the headline.

## Layout

Use one photographic product band with navigation over the top and message near the bottom. Follow with flat product or responsibility sections. Keep commerce utilities available without adding a second hero card around the message.

The 390px capture uses compact icons and a 32px headline near the bottom. Its image crop loses much of the phone; a derived implementation should improve that crop so the actual device remains inspectable rather than reproduce the weakness.

## Elevation & Depth

The scene supplies depth; white borders and typography define the interface. If image contrast varies, use a local contrast treatment rather than heavy floating shadows. Do not blur the phone to make the copy easier to place.

## Shapes

Square action corners are central to the hero. Circular utility controls may coexist with them but should not dictate the shape of product sections. Preserve the actual device silhouette instead of clipping it into an arbitrary rounded thumbnail.

## Components

The hero action is a thin white outlined rectangle with a directional arrow. Header account and basket controls are icons, with the basket count attached. A filled green button is a derived light-surface counterpart, not a replacement for the observed hero outline.

Keep the hero action stable while photography changes. Motion timing and shopping interactions were not audited. Recommended behavior is to offer reduced-motion alternatives and keep account/basket state updates explicit.

Overlay text and outline actions need contrast testing over the chosen image. Label menu, account, and basket icons and announce the basket count meaningfully. Sustainability information should remain readable text rather than image-only claims.

Use concrete language about hardware, repair, and ownership. Environmental claims need evidence and scope. Avoid turning responsibility content into vague slogans that obscure product specifications or support information.

The audited structure combines a photographic dark band with light commerce sections. It is not an alternate dark UI. Preserve deep-green identity across an optional dark extension while reviewing image contrast independently.

The extraction covers the current Fairphone public storefront homepage after declining optional cookies. It does not assert the design of device settings, account pages, or the checkout flow.

## Do's and Don'ts

Keep the phone visible, use the bold grotesque, and distinguish icon utilities from square actions. Avoid importing the consent modal style, inventing color tokens from leaves, or carrying the desktop image crop unchanged onto mobile.

Build a hardware storefront hero with real phone photography, white navigation, bold Bricolage-style typography, and a square outline action. Review the phone crop at mobile width and pair responsibility claims with evidence.