---
version: alpha
name: CiteLadder
description: "Light interface measured from citeladder.com: TASA Orbiter Variable type with Switzer Variable, dark green accents, tonal surfaces and 8px corners."
colors:
  background: "#F7F7F7"
  surface: "#F7F7F7"
  on-surface: "#1A1A1A"
  on-background: "#1A1A1A"
  on-surface-variant: "#404040"
  on-surface-muted: "#505050"
  on-surface-subtle: "#707070"
  surface-container-low: "#EDFBF2"
  surface-container: "#E8F9EE"
  surface-container-high: "#FFFFFF"
  surface-container-highest: "#EFEFEF"
  outline: "#EFEFEF"
  outline-variant: "#0000000D"
  primary: "#00873F"
  on-primary: "#FFFFFF"
  secondary: "#00A650"
  tertiary: "#7FDCA7"
  success: "#08773B"
typography:
  headline-display:
    fontFamily: TASA Orbiter Variable
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: TASA Orbiter Variable
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: TASA Orbiter Variable
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Switzer Variable
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: Switzer Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.013em
  body-sm:
    fontFamily: Switzer Variable
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-md:
    fontFamily: Switzer Variable
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Switzer Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: TASA Orbiter Variable
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  headline-sm-mobile:
    fontFamily: Switzer Variable
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.01em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 32px
  xl: 40px
  gutter: 8px
  section: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 0px 16px
    height: 36px
  button-outline:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 0px 20px
    height: 44px
  button-outline-hover:
    backgroundColor: "#F6F7F6"
  button-ghost:
    textColor: "{colors.on-surface-subtle}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  link:
    textColor: "{colors.on-surface-subtle}"
---

# CiteLadder Design System

## Overview

CiteLadder describes itself as: “Track how ChatGPT, Gemini, Claude and Google AI Overviews mention and cite your brand, check your site and search data, and plan fixes with CiteLadder.” The interface is light, built on **Snow (#F7F7F7)** with **Charcoal (#1A1A1A)** text, and **Dark Green (#00873F)** as the main accent.

Type is set in **TASA Orbiter Variable** and **Switzer Variable**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 8px.

Measured from [citeladder.com](https://citeladder.com/) on November 4, 2026 at 1440×900 and 390×844 from 428 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 16 roles.

- **Snow (#F7F7F7):** Page background, seen 7 times. Token `background`, CSS `--color-site-ground`.
- **Charcoal (#1A1A1A):** Primary text and headings, seen 26 times. Token `on-surface`.
- **Graphite (#404040):** Secondary text, seen 35 times. Token `on-surface-variant`.
- **Slate (#505050):** Muted text and metadata, seen 19 times. Token `on-surface-muted`.
- **Slate (#707070):** Subtle text and placeholders, seen 73 times. Token `on-surface-subtle`, CSS `--color-site-body`.
- **Snow (#EDFBF2):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`.
- **Mist (#E8F9EE):** Cards and panels, seen 12 times. Token `surface-container`.
- **White (#FFFFFF):** Hover and pressed fills, seen 32 times. Token `surface-container-high`, CSS `--color-elevated`.
- **Mist (#EFEFEF):** Highest raised elements, seen 1 time. Token `surface-container-highest`.
- **Mist (#EFEFEF):** Borders and dividers, seen 12 times. Token `outline`.
- **Near Black 5% (#0000000D):** Secondary dividers, seen 8 times. Token `outline-variant`.
- **Dark Green (#00873F):** Primary buttons and calls to action, seen 4 times. Token `primary`, CSS `--color-accent-fill`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Green (#00A650):** Accent in the logo, seen 24 times. Token `secondary`, CSS `--color-accent`.
- **Green (#7FDCA7):** Accent (CSS variable). Token `tertiary`.
- **Dark Green (#08773B):** Success and positive states, seen 7 times. Token `success`, CSS `--color-accent-text`.

## Typography

**TASA Orbiter Variable** and **Switzer Variable** share the interface. Fallback stack: `TASA Orbiter Variable, TASA Orbiter Fallback, Arial, sans-serif`. Other loaded fonts: JetBrains Mono Variable.

- **headline-display:** TASA Orbiter Variable 64px at weight 500, line height 1, tracking -0.02em (30px on mobile). Page title (h1).
- **headline-lg:** TASA Orbiter Variable 40px at weight 500, line height 1.05, tracking -0.02em. Section headings (h2).
- **headline-md:** TASA Orbiter Variable 32px at weight 500, line height 1.25, tracking -0.02em. Sub-section headings.
- **headline-sm:** Switzer Variable 20px at weight 500, line height 1.2, tracking -0.01em (16px on mobile). Card and feature titles.
- **body-md:** Switzer Variable 16px at weight 400, line height 1.4, tracking -0.013em. Body text.
- **body-sm:** Switzer Variable 12px at weight 400, line height 1.33. Secondary and small text.
- **label-md:** Switzer Variable 16px at weight 500, line height 1.2, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** Switzer Variable 14px at weight 400, line height 1.43. Small labels and badges.

## Layout

Spacing follows a 4px grid: 98% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 12px, lg 32px, xl 40px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`
- `rgb(229, 229, 229) 0px 0px 0px 1px, rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`
- `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`

Hairline rings and inset highlights also appear: `rgb(239, 239, 239) 0px 0px 0px 1px inset`.

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **md (8px):** 204 elements.
- **lg (12px):** 92 elements.
- **sm (4px):** 36 elements.
- **full (9999px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign up”):** #00873F fill, #FFFFFF text, 14px/500, 8px radius, padding 0px 16px.
- **button-outline (“Book a demo”):** #FFFFFF fill, #1A1A1A text, 14px/500, 8px radius, padding 0px 20px, shadow `rgb(229, 229, 229) 0px 0px 0px 1px, rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`.
- **button-outline-hover:** background #F6F7F6, text #1A1A1A on hover.
- **button-ghost (“Platform”):** transparent fill, #707070 text, 14px/400, 8px radius, padding 8px 12px.
- **link:** transparent fill, #707070 text, padding 0px.

## Do's and Don'ts

- Do use #F7F7F7 for the page and lift surfaces in small steps: #EDFBF2, #E8F9EE, #FFFFFF, #EFEFEF.
- Do keep text in 4 levels: #1A1A1A, #404040, #505050, #707070.
- Do reserve #00873F for primary actions and key highlights.
- Do set headlines in TASA Orbiter Variable with tight tracking (-0.02em).
- Do keep spacing on the 4px grid.
- Do use 8px corners on most elements; larger surfaces also use 12px and 4px.
- Don't introduce new font families beyond TASA Orbiter Variable and Switzer Variable.
- Don't use #00873F for large backgrounds or body text.
- Don't make interface transitions slower than 0.15s.

## Motion

Interface transitions are quick: 0.11s, 0.15s. Longer ambient animations run 0.72s.

- **Easing:** `cubic-bezier(0.33, 1, 0.68, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/citeladder.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).