Circle

Overview

Circle is a community management platform that consolidates fragmented tools into a unified, branded experience. The design system embodies 'Purposeful Minimalism'—a philosophy that strips away visual noise while maintaining warmth and accessibility. The brand serves community leaders, creators, and organizations seeking to build engaged, cohesive communities without technical complexity. The UI evokes trust through clarity: clean typography, purposeful color accents, and generous whitespace create an environment where users feel in control. The emotional response is one of calm confidence—the platform says, 'Your community deserves simplicity, not chaos.'

Circle's voice is direct, empowering, and human-centered. The brand avoids corporate jargon and instead speaks in the language of community builders: practical, encouraging, and solution-focused. Vocabulary patterns emphasize action and outcomes ('Tire o peso do trabalho,' 'Ofereça uma experiência completa') rather than features. The tone is conversational yet authoritative—a trusted advisor, not a salesperson. Example sentence in Circle's voice: 'Com a Circle, você oferece tudo que sua comunidade precisa em um único lugar, com sua própria marca.'

Colors

Circle's color palette is built on a foundation of trust and clarity. The primary color, #506CF0 (a vibrant, saturated blue), is the signature accent used exclusively for call-to-action buttons, interactive states, and brand-defining moments. This blue is never used for body text or backgrounds—it is reserved for moments that demand user attention and action. The secondary accent, #3655E5 (a deeper, more saturated blue), is used for hover states and elevated interactions, creating a clear visual hierarchy of engagement. The tertiary color, #00754E (a confident green), is reserved for success states, confirmations, and positive feedback—reinforcing the brand's optimistic, solution-oriented personality.

The surface stack is deliberately minimal: #FFFFFF (pure white) serves as the primary su

Typography

Circle's typography system is anchored in Inter, a humanist sans-serif that balances geometric precision with approachability. The type hierarchy is built on clear weight and size differentiation: display-level text (60px, 700 weight) is reserved for hero headlines and brand moments; headline-lg (48px, 700 weight) anchors major section titles; headline-md (32px, 700 weight) organizes content subsections; and body-lg (20px, 400 weight) carries primary narrative content. This progression ensures that users can scan the page and immediately understand information hierarchy without cognitive load. Letter-spacing is conservative across all levels (ranging from -0.04em on display to 0em on body), maintaining the refined, premium aesthetic while preserving readability. Line-height is set generous

Layout

Circle uses a fluid, centered-column layout with a maximum container width of 1240px, ensuring content remains readable on ultra-wide displays while maintaining focus on mobile. The grid is 12 columns on desktop, collapsing to single-column on tablets and phones. Page rhythm is established through consistent spacing: major sections are separated by 120px of vertical whitespace (lg spacing), while subsections within a section use 60px gaps (md spacing). The gutter—the horizontal padding inside containers—is 30px on desktop, reducing to 20px on tablets and 16px on mobile, maintaining proportional breathing room across all viewports. This spacing scale creates a sense of deliberate pacing: the eye moves through content at a measured tempo, never rushed. Container padding follows the same prin

Elevation & Depth

Circle's elevation system is subtle and purposeful, using soft shadows to create minimal depth without visual heaviness. The base layer (Level 1) is the white surface itself, with no shadow. Level 2 (standard cards and inputs) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that distinguishes interactive elements from the background. Level 3 (modals, dropdowns, and elevated containers) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger blur radius that creates clear separation without drama. Hover states on cards transition to Level 3 shadows over 200ms, signalin

Shapes

Circle employs 'Refined Geometric Clarity'—a shape philosophy that balances approachability with precision. Buttons use full-radius rounding (border-radius: 9999px), creating pill-shaped forms that feel friendly and modern while maintaining clear clickability. Cards and containers use 1rem (16px) border-radius, a moderate curve that softens corners without appearing organic or playful—this is the workhorse radius for all content surfaces. Inputs and smaller interactive elements use 0.5rem (8px) border-radius, a subtle curve that maintains geometric clarity while avoiding sharp edges. The ratio

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct. Primary buttons (button-primary) use {colors.primary} (#506CF0) background with white text, full-radius rounding, 48px height, and 15px vertical / 24px horizontal padding. On hover, the background transitions to #3655E5 over 200ms, creating a clear feedback loop. On active/press, the background darkens to #1863DC. All primary buttons carry box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift them from the surface. Secondary buttons (button-secondary) use transparent background with {colors.primary} text and a 2px solid border in the same primary color. On hover, the background fills with {colors.primary-container} (#ECEFFD) while the border remains, creating a 'soft fill' effect. This two-button s

Do's and Don'ts

**Do**

• Do use {colors.primary} (#506CF0) exclusively for CTAs, focus states, and brand moments—never for body text or large background areas.
• Do maintain 120px vertical spacing between major sections and 60px between subsections to establish clear visual rhythm and breathing room.
• Do apply full-radius (9999px) rounding only to buttons; use 16px for cards and 8px for smaller elements to maintain visual hierarchy.
• Do pair every hover state with a shadow depth increase (e.g., from {elevation.md} to {elevation.lg}) to signal interactivity clearly.
• Do use Inter at 700 weight for all headlines and 400 weight for body text; avoid mixing weights within a single text block.
• Do reserve status colors (#ECEFFD for info, #E5F3EA for success, #FCEAEA for error) for system feedback only—never use them decoratively.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) for text; use #0A0A0A for primary text and #262626 for secondary to reduce eye strain.
• Don't apply shadows to elements without also providing a clear focus indicator (use the 3px halo box-shadow on inputs and buttons).
• Don't mix border-radius values within a single component family (e.g., don't use both 16px and 12px on different cards in the same section).
• Don't use {colors.primary} for more than 15% of the page's visual real estate; it should feel like an accent, not the dominant color.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements; insufficient padding makes buttons and inputs feel cramped and difficult to target.
• Don't apply letter-spacing greater than 0.1em on body text; it reduces readability and creates a scattered, unprofessional appearance.