CajuCap

Overview

CajuCap embodies a "Vibrant Accessibility" aesthetic—combining the energy of Brazil's lottery culture with transparent, modern digital design. The brand serves lottery enthusiasts seeking trustworthy, engaging ticket purchasing and result tracking. The visual language is bold and optimistic: a dominant green (#28a745) signals action and trust, while clean typography and generous whitespace prevent visual chaos. The emotional response is one of clarity and excitement: users feel confident navigating draws, checking results, and participating in community events. The brand personality is warm, direct, and community-focused. Voice is conversational yet authoritative—never patronizing, always informative. Example: "Seu próximo sorteio ao vivo começa em 2 horas. Acompanhe pelo app." (Your next live draw starts in 2 hours. Follow on the app.)

Colors

The color system is rooted in Bootstrap's utility palette, adapted for lottery-specific trust and excitement. Primary (#28a745, rgb(40, 167, 69)) is the dominant action color—used on all CTAs (buttons, links, navigation), hero backgrounds, and interactive states. It conveys growth, legitimacy, and forward momentum. Secondary (#007bff, rgb(0, 123, 255)) provides supporting accent for secondary actions and informational elements. Tertiary (#ffc107, rgb(255, 193, 7)) highlights promotional badges, countdown timers, and prize callouts. Error (#dc3545, rgb(220, 53, 69)) is reserved for validation warnings and critical alerts. The surface stack uses light neutrals: surface-bright (#ffffff) for cards and modals, surface (#f8f9fa) for page backgrounds, and surface-container (#dee2e6) for subtle se

Typography

The type system pairs Roboto (headings, labels) with system fonts (body text: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif) to balance brand personality with cross-platform legibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for page titles and modal headers. Headline-md (28px, 600 weight) breaks up content sections. Title-lg (20px, 600 weight) labels card headers and form sections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, applied at 16px base size across the site. Label-md (14px, 600 weight) is used for button text,

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered on desktop and full-width on mobile (0px padding at <640px). Page rhythm is established through lg spacing (40px) between major sections: hero, feature cards, results grid, and footer. Gutter spacing (24px) is applied to all container padding and inter-column gaps. The hero section spans full-width with 64px vertical padding (xl spacing) and a primary background. Feature cards use md spacing (24px) for internal padding and are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile. Section dividers use surface-container (#dee2e6) at 1px height with lg spacing above and below. Navigation uses md spacing (24px) for horizontal link padding. Form inputs and buttons use sm spacing (12px) for

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding heavy drop-shadows. Level 1 (Base): surface-bright (#ffffff) with no shadow, used for primary cards and modals. Level 2 (Elevated): surface-container-low (#e9ecef) with elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)), applied to hovered cards, input fields, and secondary containers. Level 3 (Prominent): surface-container (#dee2e6) with elevation.lg shadow (0 16px 40px rgba(0, 0, 0, 0.12)), reserved for modals, dropdowns, and floating action elements. Buttons use no shadow at rest; on hover, th

Shapes

The shape philosophy is "Approachable Modernity"—combining soft, rounded corners for buttons and badges with sharper, more technical radii for cards and inputs. Buttons use full radius (9999px, border-radius: 25px in computed styles), creating pill-shaped affordances that feel friendly and clickable. Badges and tags use full radius (9999px) for a cohesive, badge-like appearance. Cards and containers use lg radius (1rem, 16px), providing enough roundness to feel contemporary without appearing overly organic. Input fields use DEFAULT radius (0.5rem, 8px), a subtle curve that maintains form-like

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#28a745) background with {colors.on-primary} (#ffffff) text, 15px vertical and 30px horizontal padding, full radius (9999px), and label-md typography (14px, 600 weight). On hover, the background shifts to #1e7e34 (darker green) with a 200ms ease-in-out transition. On active/pressed, the background becomes #155724 (darkest green). Secondary buttons mirror primary styling but use transparent background with a 2px {colors.primary} border and {colors.primary} text; on hover, the background fills with {colors.primary-container} (#d4edda) and text becomes {colors.on-primary-container} (#155724). All buttons have a minimum height of 48px to meet touch-target guidelines. Focus state adds a 3px ri

Do's and Don'ts

**Do**

• Do use {colors.primary} (#28a745) for all primary CTAs, hero sections, and active navigation states to maintain consistent brand recognition across the platform.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between distinct page regions to establish clear visual rhythm and prevent cognitive overload.
• Do use full radius (9999px) on all buttons and badges to signal interactivity and create a cohesive, approachable visual language.
• Do pair Roboto headings with system-font body text to balance brand personality with cross-platform legibility and performance.
• Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards at rest and elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) on hover to create subtle depth without visual noise.
• Do use label-md (14px, 600 weight) for button text and navigation items to ensure legibility at all sizes and maintain consistent hierarchy.

**Don't**

• Don't use secondary (#007bff) or tertiary (#ffc107) as primary action colors; reserve them for supporting accents, badges, and informational elements only.
• Don't apply shadows heavier than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) to any component; excessive shadow depth conflicts with the brand's clean, modern aesthetic.
• Don't use border-radius values smaller than DEFAULT (0.5rem, 8px) on interactive elements; sharp corners feel technical and reduce the approachable tone.
• Don't mix Roboto with system fonts in the same heading or label; maintain consistent font pairing to preserve visual hierarchy and brand coherence.
• Don't apply spacing smaller than sm (12px) between interactive elements or larger than xl (64px) between major sections; this breaks the established rhythm and creates visual confusion.
• Don't override the 48px minimum button height; smaller buttons reduce touch-target accessibility and violate WCAG 2.5.5 guidelines.