---
version: alpha
name: Moss Atlas
description: The brand colour is the ground. A deep forest page with a dry amber that does all the pointing.
meta:
  id: "theme-moss-atlas"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The green is the paper, not the button
  bestFor: Field research, environment and climate products, outdoor and travel, mapping tools
  avoidFor: Bright consumer marketing, finance, high-density admin tables
  defaultMode: dark
  surfaceStyle: filled
  accentUse: bar
  caseStyle: none
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 3
    duration: 220ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Slow tonal wipes, like light moving across a slope."
  displayFont: Alegreya
  displayKind: serif
  bodyFont: Alegreya Sans
  monoFont: Spline Sans Mono
colors:
  background: "#CBE0CD"
  foreground: "#041007"
  card: "#C2D3C4"
  card-foreground: "#041007"
  popover: "#C2D3C4"
  popover-foreground: "#041007"
  primary: "#775800"
  primary-foreground: "#F5FCF6"
  secondary: "#B2C9B5"
  secondary-foreground: "#041007"
  muted: "#B2C9B5"
  muted-foreground: "#3E5544"
  accent: "#195B3B"
  accent-foreground: "#F5FCF6"
  destructive: "#A92321"
  destructive-foreground: "#F5FCF6"
  border: "#A5B9A7"
  input: "#A5B9A7"
  ring: "#775800"
  chart-1: "#7D6016"
  chart-2: "#6E7028"
  chart-3: "#426931"
  chart-4: "#9C6537"
  chart-5: "#824032"
colorsDark:
  background: "#13301E"
  foreground: "#FFFFFF"
  card: "#233A2B"
  card-foreground: "#FFFFFF"
  popover: "#233A2B"
  popover-foreground: "#FFFFFF"
  primary: "#E1B75C"
  primary-foreground: "#031108"
  secondary: "#274934"
  secondary-foreground: "#FFFFFF"
  muted: "#274934"
  muted-foreground: "#A0B5A3"
  accent: "#78BC95"
  accent-foreground: "#031108"
  destructive: "#FFA096"
  destructive-foreground: "#031108"
  border: "#3A5844"
  input: "#3A5844"
  ring: "#E1B75C"
  chart-1: "#D4AF5F"
  chart-2: "#AEB15D"
  chart-3: "#9DCE89"
  chart-4: "#D4915A"
  chart-5: "#FFAC9A"
typography:
  display-lg:
    fontFamily: Alegreya
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Alegreya
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Alegreya
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Alegreya Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Alegreya Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Alegreya Sans
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Alegreya Sans
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Spline Sans Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Spline Sans Mono
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 58px
  gutter: 24px
  margin: 34px
  measure: 70ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Moss Atlas

## Overview

Every other theme in this library paints its identity onto the page. Moss Atlas
paints the page. The ground is a deep forest green at 28% lightness in dark mode
and a pale sage at 88% in light, and the colour that does the actual pointing —
buttons, active states, the bar beside a selected row — is a dry amber that
appears nowhere else.

The effect is that the interface feels situated: you are inside something green,
looking at markers. It suits products whose subject is a place.

Personality: outdoors, patient, observational. Not a wellness brand.

## Colors

The ground carries the hue; the actor is its complement.

- **Ground (#13301E in dark, #CBE0CD in light):** Forest. This is the theme's
  colour, and it is never used as a fill on top of itself.
- **Primary (#E1B75C):** Dry amber. Buttons, the current marker, the left bar on
  a selected row. Amber is the only warm thing in the system.
- **Accent (#78BC95):** Pale lichen. Secondary marks, the second chart series,
  the "recorded" state.
- **Neutrals are green.** Cards, borders and muted fills all carry the ground's
  chroma; there is no grey anywhere. That is the reason the amber reads as warm.
- Charts are analogous — a green family with the amber as the exception — because
  the quantities are usually variations of one measurement across a place.

## Typography

Alegreya for names and headings, Alegreya Sans for body, Spline Sans Mono for
coordinates and measurements.

- **Display:** Alegreya at 58px. It is a book serif, so it reads as field notes
  rather than as branding.
- **Body:** Alegreya Sans at 16.5px, 1.58, 70ch. The sans companion keeps long
  observational copy legible on a dark green ground.
- **Labels:** sentence case, 11px. Nothing is uppercase.
- **Coordinates, elevations, dates:** Spline Sans Mono, always, and always with
  the unit set in muted-foreground.

## Layout

A 12-column grid at 1240px, 24px gutters. The signature layout is a map-and-list
split: 7 columns of imagery or map that bleed to the edge of the viewport, and 5
columns of scrolling records that never do.

Vertical rhythm is 4px. Records are separated by 1px rules in a lighter green,
never by space alone.

## Elevation & Depth

Depth is a tonal fill within the same hue. Cards are one step lighter than the
ground in dark mode and one step darker in light mode. Nothing has a shadow
except the map overlay panel, which gets a soft one because it is genuinely
floating over something.

## Shapes

Softly rounded: 12px on cards, 8px on buttons, 4px on badges, 16px on the map
overlay. Photography is warm-graded so that a green landscape does not merge
into the green ground, and images are always given a 1px lighter border.

## Components

- **Buttons:** solid amber, dark green text, 8px radius, 12px padding.
- **Record rows:** a 3px amber bar on the left when selected, name in Alegreya,
  coordinates in mono on the right, a 1px rule beneath.
- **Cards:** one tonal step from the ground, 12px radius, 22px padding, 1px
  border in a lighter green.
- **Map overlay:** 16px radius, soft shadow, translucent ground fill with a
  backdrop blur. The only translucent element in the system.
- **Badges:** lichen fill at 20%, full-strength lichen text, 4px radius.

## Do's and Don'ts

- Do let the green be the page and the amber be the pointer.
- Do keep every neutral tinted green — no grey.
- Do set coordinates and elevations in mono with muted units.
- Don't put the amber on more than one element per region.
- Don't add a grey card; it will look like a hole.
- Don't uppercase anything.
- Don't use cool-graded photography — it fights the ground.