Thomson Reuters - Soluções Domínio

Overview

Thomson Reuters - Soluções Domínio represents a modern evolution in accounting software design, rooted in what we call 'Warm Professionalism'—a design philosophy that balances enterprise-grade functionality with human-centered accessibility. The brand serves Brazilian accounting professionals who demand both precision and ease of use, transforming complex financial workflows into intuitive, visually clear interfaces. The aesthetic combines a vibrant primary accent (#d64000, a bold burnt-orange) with clean, light surfaces (#ffffff, #f5f5f5) and confident secondary accents (#ff6900, #fcb900), creating an interface that feels both trustworthy and energetic. The emotional response is one of clarity and confidence: users feel empowered to manage their accounting operations without friction.

The voice is direct, professional yet approachable, and deeply practical. Domínio speaks to accountants in their language—avoiding jargon when possible, but never dumbing down complexity. The tone is solution-oriented: every interaction, every label, every error message exists to move the user forward. Example sentence in brand voice: 'Seu fluxo de caixa está sincronizado em tempo real—nenhuma surpresa, apenas dados precisos.'

Colors

The color system is built on a foundation of clean, light surfaces (surface: #ffffff, surface-container: #eeeeee) paired with a signature burnt-orange primary accent (#d64000) that commands attention on call-to-action buttons, links, and focus states. This primary is the brand's most distinctive element—it appears on 'Solicitar Contato' CTAs, active navigation states, and validation success indicators, signaling trust and forward momentum. The secondary accent (#ff6900, luminous vivid orange) supports the primary in hero sections and highlights, while the tertiary (#fcb900, luminous vivid amber) is reserved for warnings, badges, and secondary information layers. The error color (#cf2e2e, vivid red) is used sparingly for validation failures and destructive actions, always paired with helper

Typography

The typography system uses Helvetica Neue as the primary typeface, a choice that conveys professionalism and reliability while remaining highly legible at all sizes. The hierarchy spans from display (56px, 700 weight, -0.02em letter-spacing) for hero headlines down to label-sm (12px, 500 weight, 0.05em letter-spacing) for metadata and helper text. Headline-lg (40px, 700 weight) is used for section titles and major content blocks, while headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and callout text, while body-md (16px, 400 weight, 24px line-height) serves as the default reading size for form labels, list items, and standard copy. Label-md (14px, 600 weight, 0.01em letter-spacing)

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, allowing for flexible content arrangement on desktop while maintaining readability. The spacing scale is semantic: gutter (24px) is used for horizontal padding on full-width sections, lg spacing (40px) separates major content blocks (hero to feature section, feature section to testimonials), and md spacing (24px) is the default padding inside cards and containers. The page rhythm relies on generous white space—sections are separated by at least 40px of vertical space, and internal card padding is always 24px minimum. On mobile (below 768px), the grid collapses to a single column, with gutter reduced to 16px and section spacing reduced to 24px to maintain visual proportion. The container-max-width of 1280px

Elevation & Depth

Elevation in this system is achieved through a subtle shadow stack rather than dramatic depth. The base level (Level 1) is the clean white surface (#ffffff) with no shadow, used for the page background and standard cards. Level 2 (Standard Card) uses elevation.sm (0 1px 3px rgba(0, 0, 0, 0.08)) to lift cards and input fields slightly above the background, creating a soft separation without visual heaviness. Level 3 (Elevated/Modals) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and prominent cards that demand attention. Level 4 (Maximum Elevation) uses elevation.lg

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons use rounded.lg (1rem, 16px) for a friendly, approachable feel that invites interaction. Cards and containers use rounded.md (0.75rem, 12px) as the default, creating a subtle softness that distinguishes them from the background without appearing playful. Input fields use rounded.DEFAULT (0.5rem, 8px), a minimal radius that maintains the form's utilitarian purpose while avoiding sharp corners. Badges and chips use rounded.full (9999px) to

Components

Action Elements Buttons are the primary call-to-action mechanism and come in three variants. Button-primary uses background-color: #d64000 with text-color: #ffffff, padding: 12px 24px, height: 48px, and rounded: 1rem. On hover, the background transitions to #c23800 with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) over 200ms ease-out, signaling responsiveness. On active/pressed, the background darkens to #a02f00 with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create tactile feedback. Button-secondary uses a transparent background with a 2px solid border in #d64000 and text-color: #d64000. On hover, the background fills with #ffe8d9 (primary-container) while maintaining the border, creating a soft fill effect. Button-tertiary is text-only with text-decoration: underline and n

Do's and Don'ts

**Do**

• Do use the primary accent (#d64000) on all call-to-action buttons and interactive elements that drive user action—'Solicitar Contato', form submissions, and navigation links.
• Do maintain consistent padding (24px inside cards, 12px for form fields) to create visual rhythm and predictability across the interface.
• Do apply the 200ms ease-out transition to all hover and focus states on buttons and cards to signal responsiveness without feeling sluggish.
• Do use the full typography hierarchy (display for hero, headline-lg for sections, body-md for standard copy) to create clear visual hierarchy and guide scanning.
• Do pair the primary accent with white text (#ffffff) on buttons and dark text (#212322) on light backgrounds for maximum contrast and accessibility.
• Do use the surface-container stack (lowest, low, high, highest) to create subtle visual separation between interactive states without introducing new colors.

**Don't**

• Don't use the primary accent (#d64000) for body text or large background areas—it's reserved for interactive elements and accents only.
• Don't apply shadows heavier than elevation.lg (0 12px 32px rgba(0, 0, 0, 0.16)) to avoid a dated, overly-dimensional appearance that conflicts with the clean aesthetic.
• Don't mix typefaces—Helvetica Neue is the only approved font family; avoid system fonts, web-safe fallbacks, or serif typefaces.
• Don't reduce button padding below 12px or height below 48px, as this compromises touch target size and accessibility on mobile devices.
• Don't use the secondary accent (#ff6900) or tertiary (#fcb900) as primary button backgrounds—reserve them for supporting roles like badges, warnings, and highlights.
• Don't apply border-radius greater than 1.5rem (24px) to buttons or cards, as this creates a playful appearance that undermines the professional, trustworthy brand voice.