Color Palette

All colors are defined as CSS custom properties on :root. The palette includes brand colors, neutrals, feedback colors, and semantic tokens for consistent theming.

Brand & Accent Colors

Neutral Colors

Typography Scale

The type system uses two font stacks: --font-primary for body text and --font-heading for headlines. A monospace stack --font-mono is used for code and data values.

Spacing Scale

A 4px-base spacing scale applied consistently for margin, padding, and layout gaps.

Border Radius

Shadows

Component Classes

• .nav Sticky top navigation bar with dark background
• .calculator Card container for calculator forms with border and shadow
• .calc-grid 2-column grid layout for calculator fields
• .calc-input / .calc-select Styled form inputs with focus ring on brand color
• .calc-btn Primary red call-to-action button
• .calc-btn-secondary Outlined secondary button (e.g. Reset)
• .calc-results Results container with fade-up animation
• .calc-result-hero Prominent result display area with large amount
• .calc-breakdown 2-column grid for breakdown items
• .sidebar-box Sidebar widget container with red bottom border title
• .sidebar-links Sidebar link list with arrow prefix
• .toc Table of contents container with numbered links
• .faq-item / .faq-question / .faq-answer Accordion FAQ component
• .info-box (.tip / .warning / .note) Contextual info boxes with left border accent
• .direct-answer Prominent answer box with left red border
• .key-takeaway Blue-bordered takeaway card
• .trust-badges / .trust-badge Verification badges with icon and label
• .expert-review Expert review card with avatar and quote
• .author-bio Author byline with avatar and description
• .related-card Card for related page navigation
• .breadcrumbs Breadcrumb navigation trail
• .page-meta Page metadata bar with date, author, badge
• .disclaimer-box Yellow disclaimer notice box
• .checklist Checkbox-style list for deduction items
• .international-nav Button row for country calculator navigation
• .methodology-card Card for methodology notes with icon heading
• .data-table-compare Comparison table with highlight support
• .scroll-top Floating scroll-to-top button
• .cookie-banner Fixed bottom cookie consent banner
• .skip-link Accessibility skip-to-main link

Dark Mode Preview

Dark mode activates automatically based on the user's prefers-color-scheme: dark OS setting. Below is a preview of how components render in dark mode.

Accessibility Guidelines

TaxCalcHQ targets WCAG 2.1 Level AA compliance across all pages. The following guidelines are enforced in the design system:

• Color Contrast — All text meets 4.5:1 minimum contrast ratio (WCAG 1.4.3). Large text (18px+ bold or 24px+ regular) meets 3:1. Body text is darkened to #1a1a1a for sufficient contrast on white backgrounds.
• Non-Text Contrast — UI components and graphical objects meet 3:1 minimum contrast against adjacent colors (WCAG 1.4.11).
• Keyboard Navigation — All interactive elements have visible focus indicators with 3px outline and 3px offset (WCAG 2.4.7). Tab order follows logical reading order.
• Focus Visible — :focus-visible is used for keyboard-only focus styling. :focus:not(:focus-visible) suppresses mouse click outlines (WCAG 2.4.13).
• Touch Targets — All interactive elements have a minimum touch target of 44x44px (WCAG 2.5.8). Buttons, nav links, and sidebar items are sized accordingly.
• Screen Reader Support — ARIA landmarks (role="banner", role="main", role="navigation", role="complementary", role="contentinfo") are used. Live regions with aria-live="polite" announce calculator results. Skip links are provided.
• Reduced Motion — A @media (prefers-reduced-motion: reduce) query disables all animations and transitions for users who request reduced motion (WCAG 2.3.3).
• Form Labels — Every form input has an associated <label> element with font-weight: 600 for readability. Required fields use aria-required="true" where applicable.
• Error Identification — Form errors are communicated via color (--color-error), icon (where applicable), and text description. Error messages are associated with inputs using aria-describedby.
• Reading Order — Content follows a logical DOM order that matches visual presentation. CSS Grid and Flexbox are used for layout without changing source order.
• Zoom & Resize — The layout uses relative units (rem, %) and supports browser zoom up to 200% without loss of content or functionality (WCAG 1.4.4).