Base font size is 62.5% so 1rem = 10px throughout. Breakpoints follow the --breakpoint-* scale below.
Brand palette
From the Redpine Identity Guide (2025). Pantone references as specified in the official PDF.
--rp-white
VAR(--RP-WHITE)
Whitespace / primary surface on light
--rp-mauve
VAR(--RP-MAUVE)
Pantone 435 C — elegant neutral
--rp-ink
VAR(--RP-INK)
Pantone 419 C — body text, dark surfaces
--rp-red
VAR(--RP-RED)
Pantone 187 C — signature (aka --rp-red-1)
Neutrals
Warm-tuned around the mauve — no cool grays, per brand spec.
--rp-snow
#FAF8F8
App background
--rp-paper
VAR(--RP-PAPER)
Panel background
--rp-bone
VAR(--RP-BONE)
Subtle surface / hairline border
--rp-mauve-3
#D6CFCF
Divider on dark
--rp-mauve-2
#C9C1C1
Hover over mauve
--rp-stone
VAR(--RP-STONE)
Disabled / tertiary on dark
--rp-graphite
#5A4F52
Tertiary fg / muted labels
--rp-char
VAR(--RP-CHAR)
Secondary fg on light
--rp-ink-3
#2B2023
Hover over ink
--rp-ink-2
#1C1315
Elevated ink
Red scale
Full range around the signature #AB2832. Heritage-red preserved as archival.
--rp-red-wash
VAR(--RP-RED-WASH)
Tint surface (sparingly)
--rp-red-soft
#C55860
Stroke accent on dark surfaces
--rp-red-1
VAR(--RP-RED)
Signature — base
--rp-red-2
#8E2129
Hover on red
--rp-red-ink
VAR(--RP-RED-INK)
Pressed state
--rp-heritage-red
#750014
Pantone 202 C — archival institutional red
Semantic feedback
Muted corporate tones for status, not decoration.
--rp-success
VAR(--RP-SUCCESS)
Confirmation / positive
--rp-warning
VAR(--RP-WARNING)
Attention / caution
--rp-danger
VAR(--RP-RED)
Destructive (alias of --rp-red-1)
--rp-info
#2A4E6E
Informational
Breakpoints
--breakpoint-xs0--breakpoint-sm576px--breakpoint-md768px--breakpoint-lg1080px--breakpoint-xl1400pxTypography
--font-sansneue-haas-grotesk-text, Helvetica Neue, Arial--font-displayneue-haas-grotesk-display, Helvetica Neue, Arial--font-monoSFMono-Regular, Menlo, Monaco, ConsolasType scale
h1 (xl+)7.2rem / 72pxline-height 7.2rem700h1 (sm+)4.8rem / 48pxline-height 5.5rem700h1 (base)4rem / 40pxline-height 1.2700h2 (lg+)4.8rem / 48pxline-height 6rem700h23.2rem / 32pxline-height 1.2700h32.4rem / 24pxline-height 1.2700h42rem / 20pxline-height 1.2700body1.6rem / 16pxline-height 1.5400caption1.2rem / 12pxline-height 1.5700Layout
--sidebar-width25rem