RenewQ

Overview

RenewQ is a B2B SaaS renewal tracking platform designed for finance, IT, and operations teams managing vendor contracts, software licenses, and compliance documents. The brand embodies "Purposeful Minimalism with Accent Energy"—a design philosophy that pairs a sophisticated dark canvas (rgb(11, 12, 14)) with a vibrant golden-amber primary accent (rgb(246, 174, 49)) that commands attention on critical CTAs and renewal alerts. The interface prioritizes clarity and urgency: every element serves the core mission of preventing missed renewals that cascade into financial and operational incidents.

The brand voice is direct, confident, and slightly irreverent—it speaks to operations leaders who are tired of spreadsheet chaos and auto-renewal surprises. Tone: pragmatic, no-nonsense, occasionally witty. Vocabulary favors active verbs ("Stop losing," "Renegotiate," "Track") and concrete outcomes over abstract features. Example sentence in brand voice: "Your contracts shouldn't surprise you—we'll remind you 60 days out so you renegotiate instead of auto-renew."

Colors

The color system is anchored by a high-contrast dark mode (surface: #0b0c0e, on-surface: #fafafa) that reduces cognitive load during rapid data scanning. The primary accent, #f6ae31 (golden-amber, rgb(246, 174, 49)), is reserved exclusively for high-priority CTAs, active states, and renewal-deadline alerts—it appears on the hero CTA button, header trial button, and all primary interactive elements. This accent is never used for body text or passive surfaces; it commands immediate visual hierarchy through scarcity and saturation.

Secondary colors support specific use cases: indigo (#6366f1) for informational badges and secondary actions; cyan (#22b8f0) for tertiary highlights and data visualization accents. Status colors follow Material 3 conventions: success (hsl(143, 85%, 96%) background

Typography

The type system uses Inter as the primary typeface for body, labels, and UI text—a geometric sans-serif optimized for screen legibility at small sizes (12px–18px). Display and headline levels (40px–60px) employ a 600–700 weight to establish visual dominance without requiring serif ornamentation. Fraunces (a high-contrast serif) is reserved for accent moments: the word "money" in the hero headline is set in Fraunces 700 italic with a 3px golden underline, creating a memorable focal point. Letter-spacing is tightened on display sizes (-0.04em) to increase perceived weight and sophistication; body text uses 0em spacing for maximum readability. Line-height follows a 1.4–1.5 ratio for body (24px–28px) to ensure comfortable scanning of contract details and renewal dates. Apply text-shadow: 0 2px

Layout

The page uses a fluid 12-column grid with a max-width of 1400px, centered on viewport. The hero section spans full width with 128px vertical padding (top) and 112px (bottom), creating breathing room around the headline and CTA. Content sections use a gutter of 24px (md spacing) between columns and 40px (lg spacing) for section separation vertically. The container max-width of 1400px accommodates wide-format data tables and dashboard previews without forcing awkward line breaks. White-space is used strategically: the hero headline "Stop losing money on renewals you forgot about" sits in a 58.4px (h1 computed size) bold block with 16px body copy below, all left-aligned to convey urgency and directness. Cards and input fields use md spacing (24px) for internal padding, creating a consistent r

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-color layering rather than aggressive drop shadows. Level 1 (Base): the background surface (#0b0c0e) with no shadow. Level 2 (Standard Cards & Inputs): surface-container (#141618) with a 1px border in outline-variant (#49494d) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating subtle separation from the base. Level 3 (Elevated Cards, Modals, Hover States): surface-container-high (#1f2225) with the same border and an upgraded shadow of box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), signaling interactive focus. The header uses a

Shapes

The shape philosophy is "Technical Precision with Approachability"—rounded corners are used consistently but conservatively to signal modernity without sacrificing the professional, data-driven aesthetic. Buttons use rounded.md (0.75rem / 12px), creating a soft but defined edge that feels contemporary without appearing playful. Cards and containers use rounded.lg (1rem / 16px) for slightly more breathing room, distinguishing them from interactive elements. Input fields use rounded.DEFAULT (0.5rem / 8px), a tighter radius that emphasizes their functional role. Badges and pills use rounded.full

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses backgroundColor: rgb(246, 174, 49), textColor: rgb(11, 12, 14), padding: 12px 28px, height: 44px, rounded: 0.75rem, and typography: label-md (14px, 500 weight). On hover, the background shifts to #f0a020 with a 200ms ease transition and a subtle glow (box-shadow: 0 4px 12px rgba(246, 174, 49, 0.2)). On active/click, the background darkens to #d4860a and applies transform: scale(0.98) for tactile feedback. The button-secondary variant uses a transparent background with a 1px border in the primary color, allowing secondary actions to coexist without visual competition. The button-ghost variant (used for tertiary actions like "Reject analytics") has no background or border, relying on text color

Do's and Don'ts

**Do**

• Do use the primary accent (#f6ae31) exclusively on high-priority CTAs, active states, and renewal-deadline alerts—never on passive surfaces or body text.
• Do maintain the dark surface (#0b0c0e) as the default background; it reduces eye strain during long data-scanning sessions and makes the golden accent pop.
• Do apply 24px (md spacing) as the default padding inside cards and containers; it creates a consistent rhythm that feels spacious without wasting screen real estate.
• Do use Inter 400–500 weight for body text and labels; the geometric letterforms maintain legibility at small sizes (12px–16px) on dark backgrounds.
• Do transition all interactive states (hover, focus, active) over 200ms ease to signal responsiveness without feeling sluggish or jarring.
• Do layer status colors (success, error, warning) using the provided hsl values with matching borders; this creates a consistent, accessible color-coding system.

**Don't**

• Don't use the primary accent (#f6ae31) on body text, backgrounds, or passive UI elements—reserve it for CTAs and active states to maintain visual hierarchy.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.2); the dark theme already provides depth through surface-color layering, and excessive shadows muddy the interface.
• Don't mix typefaces; Inter is the system font for all body, labels, and UI text. Fraunces is reserved for rare accent moments (e.g., the hero headline's "money" word).
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements; they become visually indistinct and feel unfinished on dark backgrounds.
• Don't reduce padding below 12px (sm spacing) inside cards or inputs; the dark theme requires breathing room to avoid a cramped, overwhelming appearance.
• Don't apply text-shadow or text-stroke to body text; it reduces legibility. Reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only for small labels over busy backgrounds.