Negócios RPC

Overview

Negócios RPC is a Brazilian B2B media platform designed to connect small and large enterprises with market intelligence, broadcast content, and communication solutions from Paraná's leading media group. The design aesthetic embraces 'Communicative Clarity'—a modern, accessible approach that balances corporate professionalism with warm, approachable visual language. The UI prioritizes information hierarchy and user agency, using a vibrant primary blue (#3159c1) as the signature accent that signals trust, action, and forward momentum. The brand personality is direct, solution-oriented, and locally rooted: it speaks to entrepreneurs and business leaders with clarity and respect, avoiding jargon while maintaining editorial credibility. Example sentence in brand voice: 'Descubra como os negócios do Paraná crescem com conteúdo que importa.'

Colors

The color system is anchored in a corporate blue primary (#3159c1) paired with a bright cyan secondary (#4ec0ee) for depth and visual interest. The secondary accent orange (#ff6900) is reserved for high-energy CTAs, promotional badges, and status highlights—it appears sparingly to maintain impact. The surface stack uses a near-white base (#fefefe) with carefully calibrated grays (#f5f5f5 to #dfe3e8) to create subtle depth without visual noise. The error red (#cf2e2e) is used only for validation and critical alerts. Primary (#3159c1) is deployed on all primary CTAs ('Confira nossas oportunidades', 'Quanto custa anunciar?'), navigation highlights, and focus states. Secondary orange (#ff6900) accents promotional content and secondary actions. The surface-container-high (#e9ecef) is used for h

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that balances corporate credibility with approachability. Display (56px, 700 weight) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) introduces content sections; Body-md (16px, 400 weight) is the primary reading size for article text and descriptions. Label-md (14px, 600 weight) is used for button text and form labels to ensure legibility at small sizes. The system maintains a 1.5x scale ratio between major typographic levels, creating rhythm without excess. On small labels over busy backgrounds (e.g., badges on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure 4.5:1 contrast. Headings use -0.02em letter-spacing to tighten the visual weight; body text uses 0em spacing for n

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on viewport. The gutter is 24px on desktop, reducing to 12px on tablets and 8px on mobile. Page sections are separated by lg spacing (40px) to create breathing room and visual hierarchy. The hero section spans full-width with a dark blue gradient background (from #001a4d to #4ec0ee) and uses absolute positioning for layered geometric shapes (circles, stars) at 20–40% opacity to create depth without distraction. Content cards use md spacing (24px) for internal padding and are arranged in flexible grids that reflow from 3 columns (desktop) to 1 column (mobile). The search bar and primary CTA ('Quanto custa anunciar?') are pinned to the header with 15px vertical padding, ensuring they remain accessible during scroll. Form i

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of background color shifts rather than heavy drop shadows. Level 1 (Base): flat surfaces at surface (#fefefe) with no shadow. Level 2 (Cards & Containers): elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) on cards in neutral contexts, creating a subtle lift. Level 3 (Hover & Interactive): elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) applied on card-hover and button-hover states, signaling interactivity. The hero section uses a layered background with semi-transparent geometric shapes (circles at rgba(78, 192, 238, 0.15), stars

Shapes

The shape philosophy is 'Approachable Modernity'—combining sharp, professional edges with humanist softness where it matters. Buttons and primary interactive elements use full radius (9999px / border-radius: 50%) to signal friendliness and reduce cognitive friction; this is the most distinctive shape token and appears on all CTAs. Cards and containers use lg radius (1rem / 16px) to soften corners without appearing playful. Form inputs use full radius (9999px) to match button language and create visual cohesion. Badges use full radius for a compact, pill-like appearance. Dividers and subtle UI

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#3159c1) background with {colors.on-primary} (white) text, {rounded.full} (9999px), and 12px vertical / 32px horizontal padding to create a 48px tall target. On hover, background shifts to {colors.primary-fixed-dim} with a 200ms ease-in-out transition. The button-secondary variant uses a transparent background with a 2px solid border in {colors.primary}, maintaining the same padding and height; on hover, the background fills with {colors.primary} and text inverts to white. The button-accent uses {colors.secondary} (#ff6900) for promotional or secondary actions, with identical sizing and hover behavior. All buttons use {typography.label-md} (14px, 600 weight) for text, ensuri

Do's and Don'ts

**Do**

• Do use the primary blue (#3159c1) on all primary CTAs and focus states to maintain brand recognition and signal actionability.
• Do apply full radius (9999px) to buttons and interactive elements—it is the brand's most distinctive shape token and creates instant visual cohesion.
• Do use the 200ms ease-in-out transition on all hover and focus state changes to signal responsiveness without feeling sluggish.
• Do maintain the surface-container hierarchy (lowest → low → DEFAULT → high → highest) for subtle depth cues without visual noise.
• Do use Open Sans exclusively for typography—it balances corporate credibility with approachability and is the brand's typographic anchor.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over busy backgrounds to ensure 4.5:1 contrast and readability.

**Don't**

• Don't use the secondary orange (#ff6900) on primary CTAs—reserve it for promotional badges and secondary actions to preserve its impact.
• Don't apply shadows heavier than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12))—the design system prioritizes clarity over depth, and excessive shadows create visual clutter.
• Don't use border-radius values other than the defined scale (sm, DEFAULT, md, lg, xl, full)—custom radii break the visual system and reduce cohesion.
• Don't reduce button padding below 12px vertical / 32px horizontal or height below 48px—touch targets must remain accessible on mobile devices.