Claude Code
Cursor
Codex
GitHub Copilot
Sitepeel
DESIGN.md · measured November 4, 2026
CiteLadder design system
Light interface · TASA Orbiter Variable, Switzer Variable · 8px corners
- #F7F7F7
- #EDFBF2
- #1A1A1A
- #00873F
From citeladder.com ↗ · 428 elements at 1440×900 and 390×844 Independent analysis, not affiliated with CiteLadder
CiteLadder color palette
16 colors with hex codes, grouped by where each one is used on the page.
Surfaces
Snow
#F7F7F7background · --color-site-groundPage background · 7×Snow
#EDFBF2surface-container-lowRaised areas one step from the page · 2×Mist
#E8F9EEsurface-containerCards and panels · 12×White
#FFFFFFsurface-container-high · --color-elevatedHover and pressed fills · 32×Mist
#EFEFEFsurface-container-highestHighest raised elements · 1×Text
Charcoal
#1A1A1Aon-surfacePrimary text and headings · 26×Graphite
#404040on-surface-variantSecondary text · 35×Slate
#505050on-surface-mutedMuted text and metadata · 19×Slate
#707070on-surface-subtle · --color-site-bodySubtle text and placeholders · 73×White
#FFFFFFon-primaryText and icons on primaryAccents
Dark Green
#00873Fprimary · --color-accent-fillPrimary buttons and calls to action · 4×Dark Green
#00A650secondary · --color-accentAccent in the logo · 24×Green
#7FDCA7tertiaryAccent (CSS variable)Borders
Mist
#EFEFEFoutlineBorders and dividers · 12×Near Black 5%
#0000000Doutline-variantSecondary dividers · 8×Status
Dark Green
#08773Bsuccess · --color-accent-textSuccess and positive states · 7×CiteLadder fonts and type scale
2 families.
AaTASA Orbiter VariableWeights 500TASA Orbiter Variable, TASA Orbiter Fallback, Arial, sans-serif
AaSwitzer VariableWeights 400, 500Switzer Variable, Switzer Fallback, Arial, -apple-system
headline-displayPage title (h1)CiteLadder64px · 500 · 1 · -0.02em
mobile 30px
mobile 30px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog40px · 500 · 1.05 · -0.02em
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog32px · 500 · 1.25 · -0.02em
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog20px · 500 · 1.2 · -0.01em
mobile 16px
mobile 16px
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.4 · -0.013em
body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 400 · 1.33
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 500 · 1.2 · -0.01em
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 400 · 1.43
Contrast
Text on #F7F7F7
AaAAA
16.2:1AaAAA
9.6:1AaAAA
7.5:1AaAA
4.6:1Spacing
4px grid · 98% of values fit
xs4pxsm8pxmd12pxlg32pxxl40pxgutter8pxsection96pxShapes
Corner radii, most used first.
md8px · 204×
lg12px · 92×
sm4px · 36×
full9999px · 8×
Depth
Shadow
Inset
Ring
Shadow
CiteLadder UI components
Rebuilt from the measured CSS.
Sign up
Book a demo
Platform
Inline link
Motion
Interface transitions
0.11s0.15scubic-bezier(0.33, 1, 0.68, 1)
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F7F7F7 for the page and lift surfaces in small steps: #EDFBF2, #E8F9EE, #FFFFFF, #EFEFEF.
- Keep text in 4 levels: #1A1A1A, #404040, #505050, #707070.
- Reserve #00873F for primary actions and key highlights.
- Set headlines in TASA Orbiter Variable with tight tracking (-0.02em).
- Keep spacing on the 4px grid.
- Use 8px corners on most elements; larger surfaces also use 12px and 4px.
- Introduce new font families beyond TASA Orbiter Variable and Switzer Variable.
- Use #00873F for large backgrounds or body text.
- Make interface transitions slower than 0.15s.
CiteLadder DESIGN.md224 lines
---
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).
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need a page behind a login?
The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.
More designs
Brand examples →
Another site? Make a DESIGN.md from any link.
FAQ
CiteLadder design system questions
What font does CiteLadder use?
CiteLadder’s website uses TASA Orbiter Variable (weight 500) and Switzer Variable (weights 400 and 500). Page titles are 64px at weight 500 (30px on phones) and body text is 16px. Measured on November 4, 2026.
What are the CiteLadder colors and hex codes?
On citeladder.com: #F7F7F7 (snow) for the background, #1A1A1A (charcoal) for text and #00873F (dark green) as the main accent, with #00A650 (dark green) and #7FDCA7 (green) as other accents. The color palette above lists all 16 colors with their hex codes and where each one is used.
What is the CiteLadder design system?
The design system on this page is citeladder.com’s, as measured on November 4, 2026: TASA Orbiter Variable type, #00873F as the main color, 8px corners and a 4px spacing grid, written down as a DESIGN.md. It is not CiteLadder’s own documentation.
What is the CiteLadder DESIGN.md?
A plain-text file with CiteLadder’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this CiteLadder’s official design system?
No. Sitepeel measured it from citeladder.com’s public page on November 4, 2026. It is an independent analysis, not made or approved by CiteLadder.
Can I use CiteLadder’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy CiteLadder’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.