Internal · Design Reference

RemediADA Brand

The colors, type scale, components, and motion that make every report, email, and surface feel like the same company. Source of truth: BRAND_GUIDE.md

Identity

Logo

Primary: /logo.svg (3D depth, full color) for white/light backgrounds.
White: /logo-white.svg — single-color, “R” as knockout (background shows through) for dark/brand backgrounds, PDF covers, email headers.
Min size 24px tall. Clearspace 0.5× logo height all sides. PNG fallback at /logo.png.

Palette

Brand

--brand

#2B5CFF

Primary CTA, brand links, gradient start

--brand-dark

#1E42D4

Hover, pressed CTA

--brand-soft

#EEF2FF

Background tints

--violet

#7C3AED

Gradient endpoint, accent badges

Palette

Semantic

--good

#059669

Success, pass, compliant

--good-soft

#ECFDF5

Success backgrounds

--bad

#E11D48

Critical violations, lawsuit risk

--bad-soft

#FFF1F3

Critical-violation backgrounds

--amber

#EA580C

Serious violations, warnings

--amber-soft

#FFF7ED

Serious-violation backgrounds

Palette

Neutral / Typography

--ink

#0A0B10

Primary text, headings

--ink-2

#1A1D26

Secondary text

--muted

#5B6170

Body copy (AA contrast on white)

--muted-2

#8B90A0

Meta info — fails AA on small text

--line

#E8EAF0

Borders

--line-soft

#F1F3F7

Subtle dividers

--bg

#FFFFFF

Page background

--bg-soft

#FAFBFC

Card backgrounds

--bg-dark

#0A0B10

Dark sections, footer

Note: #8b90a0 (--muted-2) fails WCAG AA contrast at small font sizes on white. Use only for ≥18pt or non-essential meta. For body text use #5b6170 (--muted) which passes 4.5:1.

Type

Scale

h1 · clamp(36px, 6.2vw, 68px) · weight 600 · tracking -0.04em

Headlines that mean it

h2 · clamp(28px, 4.2vw, 46px) · weight 600 · tracking -0.035em

Major section heading

h3 · clamp(18px, 1.6vw, 22px) · weight 600 · tracking -0.02em

Subsection or card title

Body · 14–15px · line-height 1.55

Direct, quantified, plain English. We scanned 47 pages. 12 critical violations. The biggest risk is missing alt text in your product gallery, and that's lawsuit-firm bait. Here's what to fix.

Eyebrow · 13px · weight 500 · uppercase · dot prefix

Eyebrow Label

Mono · ui-monospace, SFMono-Regular, Menlo

const score = calculateHonestScore(violations); // 73/100

Components

Buttons

Geometry

Radius: 10px (rectangular — no pill anywhere)
Height: 48px (44px touch target + 4px breathing)
Padding: 14px vertical, 28px horizontal
Type: 15px / weight 600 (semibold, not medium)

3D feel

Surface: top-to-bottom gradient (5–8% lighter top, base color bottom)
Highlight: 1px inset white on top edge (0.18 alpha)
Lip: 1px inset black on bottom edge (0.12 alpha)
Drop shadow: brand-tinted glow (0_6px_16px_-4px at .45 alpha)
Hover: shadow grows 60%, no lift
Active: press down 1px, shadow halves

Ban list: no pill shapes (radius 999), no soft pastel CTAs, no gradient text on body copy, no emoji-prefixed buttons, no “Click here” / “Learn more” copy. Buttons say what happens — Run Scan, Get Audit, Download Report.

Depth

Shadows

--sh-sm

Resting cards

--sh-md

Hover cards

--sh-lg

Modals, popovers

--sh-xl

Hero, brand glow

Shape

Radii

sm · 8px

Inputs, chips

md · 14px

Cards, panels

lg · 20px

Hero panels

xl · 28px

Marketing hero

pill · 999px

All buttons

Voice

How we talk

Yes

“We scanned 47 pages. 12 critical violations.”
“Missing alt text on 23 product images.”
“This site is at high lawsuit risk.”
“Get the Standard Remediation for $X.”

“We were pleased to scan your site...”
“Compliance with WCAG 1.1.1 success criterion.”
“This site has opportunities for improvement.”
“Schedule a consultation to discuss pricing.”