uxtools.co — Design System

1. Visual Theme & Atmosphere

UX Tools reads as a carefully considered editorial product — warm, readable, and data-rich without feeling overwhelming. The canvas is a whisper-warm off-white (#fffbf7) that immediately distinguishes the site from sterile white-background SaaS. Body text lands in a warm dark gray (#4a4844) rather than black, creating a reading experience that feels like a premium print publication translated to screen.

The accent color — a muted terracotta-coral (#c9624d) — is used with surgical precision: for links, for emphasis, for the data “delta” indicators that are central to the site’s UX tools comparison functionality. It’s warm enough to feel human, restrained enough to feel professional. Built with a mature token system, Inter typeface, and a display font for headers.

2. Color Palette & Roles

Backgrounds:

Text:

Interactive:

3. Typography Rules

Display / Headings: Custom display font (--font-display) — likely a humanist or editorial face for hero and section titles.
Body: Inter (--font-inter) — the workhorse for all readable copy.
Monospace: Space Mono (--font-space-mono) — for code snippets or technical data.

Weight 700 appears on headings — unlike many portfolios, UX Tools uses bold confidently. The display font layers on top for hero moments, Inter carries everything else.

Notably absent: Italic is used sparingly if at all; uppercase text-transform not detected.

4. Component Stylings

Rich token system revealed in CSS custom properties:

• Cards — #ffffff surface, --card-radius rounded corners, --card-padding internal spacing
• Callout blocks — #f5f4f0 warm gray background; used for tips, highlights
• Accent elements — terracotta #c9624d for links, labels, and the comparison delta indicators
• Delta badges — rgba(44,41,36,0.08) tinted background on comparison data; #4a4844 text
• Navigation — --nav-height, --nav-padding-inline tokens; transparent background over canvas
• Borders — --border-card, --border-grid, --border-nav — three distinct border contexts

Layout tokens:

• --content-width — readable content column width
• --page-width — full page constraint (1440px)
• --section-gap — vertical rhythm between sections
• --hero-padding-block — hero section top/bottom padding
• --divider-margin — spacing around horizontal rules

5. Layout Principles

• Max width: --page-width: 1440px / --content-width for text columns (~720–800px)
• Breakpoints at 280px, 720px, 1280px — covers small mobile through large desktop
• Reading-optimized content width ensures comfortable line lengths for editorial content
• Grid-based comparison tables (the core product) likely use a fixed-column approach with --card-margin-block for rhythm

6. Depth & Elevation

Four-level background system creates clear elevation hierarchy:

1. Canvas #fffbf7 — ground level
2. Card #ffffff — first elevation (slightly brighter)
3. Card inner #fafaf8 — nested content (slightly recessed)
4. Callout #f5f4f0 — emphasized/highlighted (warm gray)

Borders (--border-card) provide crisp delineation at each level. Shadow use is minimal — the warm background sequence does the depth work.

7. Do’s and Don’ts

Do:

• Use the full four-level background system for card nesting — it creates clarity without shadows
• Apply terracotta #c9624d for all interactive and accent elements; it’s the system’s single warm signal
• Use Inter for all body copy; display font only for hero and major section titles
• Use Space Mono for any numerical or code data — it adds the right technical credibility
• Token-name everything: this system was built for consistency at scale

Don’t:

• Use #1a1a1a (primary text) for body paragraphs — #4a4844 (body) is the correct reading weight
• Add accent colors beyond terracotta — the warm neutrals do all supporting work
• Place cards directly on canvas without padding — --card-padding exists for a reason
• Use bold (700) for body text — reserve it for headings only

8. Responsive Behavior

At mobile, comparison tables likely collapse to stacked card views. Content width narrows to full-viewport with padding.

9. Agent Prompt Guide

“Design in the style of uxtools.co: warm off-white canvas #fffbf7, body text in #4a4844, primary headings in #1a1a1a, terracotta accent #c9624d for links and emphasis, four-level white/card surface hierarchy, Inter for body copy, display font for heroes, Space Mono for data, token-driven spacing and borders, editorial warmth over SaaS sterility — a thoughtful data-rich product aesthetic.”

Generated by Sparkbites — extracted from live CSS analysis