FCamara

Overview

FCamara is a technology and innovation ecosystem that transforms enterprise futures through digital connectivity and strategic partnerships. The brand serves forward-thinking corporations, startups, and innovation leaders seeking to navigate complex technological landscapes with confidence and clarity. The design system embodies **Architectural Minimalism with Warmth**—a movement that combines the precision and structure of modernist design with human-centered, approachable visual language. The UI evokes a sense of professional competence paired with accessible innovation: clean, purposeful, never cold. The brand personality is consultative yet energetic, speaking to both C-suite strategists and technical practitioners. Voice: direct, insightful, grounded in real outcomes. Example: "Your company's future isn't built on technology alone—it's built on connectivity that matters."

Colors

The FCamara color system balances a bold primary accent with a neutral, light foundation that prioritizes clarity and readability. **Primary (#df6140)** is a warm, energetic coral-orange deployed on all call-to-action buttons, key interactive states, and brand moments—it signals action and forward momentum. **Secondary (#0693e3)**, a vivid cyan-blue, supports data visualization, secondary CTAs, and accent highlights, creating visual rhythm without competing for attention. **Tertiary (#00d084)**, a fresh green, is reserved for success states, confirmations, and positive feedback. The surface stack is anchored in pure white (#ffffff) for maximum legibility, with a carefully calibrated gray scale (surface-container-highest at #dddddd, surface-container at #eeeeee) for subtle depth and card se

Typography

The typography system pairs **Guton** (a geometric, confident display typeface) for headlines and brand moments with **silka** (a humanist sans-serif) for body and UI text. This pairing creates visual hierarchy through personality rather than weight alone: Guton's structural clarity at 48px (headline-lg, 600 weight, -0.02em letter-spacing) commands attention for section titles, while silka's approachable rhythm at 16px (body-md, 400 weight, -0.005em letter-spacing) ensures comfortable reading at any screen size. Display text (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major announcements, creating dramatic entry points. All headlines use a tight line-height (1.125) to reinforce their structural role, while body text relaxes to 1.4–1.5 for breathing room. Labels

Layout

The layout system uses a fluid, 12-column grid with a max-width of 1024px, allowing content to breathe on desktop while remaining responsive on mobile. The spacing scale is semantic and hierarchical: **unit (8px)** serves as the baseline for micro-interactions and component padding; **sm (12px)** for tight component spacing; **md (24px)** for standard section gutters and card padding; **lg (40px)** for major section separation; **xl (64px)** for hero-to-content transitions. The global padding is set to var(--wp--preset--spacing--50), which clamps between 30px and 50px depending on viewport, ensuring the design scales gracefully. Container max-width of 1024px (not 1280px) reflects FCamara's preference for intimate, focused layouts over sprawling content. White-space is treated as a first-cl

Elevation & Depth

Depth in the FCamara system is achieved through subtle, consistent shadows and strategic use of surface containers rather than dramatic layering. **Level 1 (Base)**: flat white surface (#ffffff) with no shadow, establishing the primary reading plane. **Level 2 (Cards & Containers)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) paired with a 1px border in surface-container-highest (#dddddd), creating a soft lift that suggests interactivity without visual heaviness. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a broader, softer shadow that increases perceiv

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used strategically to humanize functional interfaces without sacrificing clarity. **Buttons and primary CTAs** use full-radius (border-radius: 9999px), creating pill-shaped forms that feel approachable and clickable. **Cards and containers** use lg radius (1rem / 16px), balancing softness with structure—enough rounding to feel modern, not so much that it becomes whimsical. **Input fields and secondary UI** use DEFAULT radius (0.5rem / 8px), a subtle curve that signals interactivity without dominating the visual hierarchy. **Badges

Components

Action Elements Buttons are the primary interaction mechanism and are designed for immediate visual recognition. **button-primary** uses the full primary color (#df6140) with white text, 12px vertical / 28px horizontal padding, and full-radius (9999px) to maximize affordance. On hover, the background shifts to #c85230 (a 15% darkening) with a 200ms cubic-bezier transition, providing tactile feedback without jarring color shifts. **button-secondary** maintains the same dimensions but uses a transparent background with a 1px outline in outline-variant (#b0b0b0), allowing it to sit comfortably alongside primary buttons without visual competition. **button-ghost** is a minimal variant (8px / 16px padding, DEFAULT radius) for tertiary actions like "Learn more" or navigation links; it has no

Do's and Don'ts

**Do**

• Do use primary (#df6140) exclusively on CTAs and interactive moments—it's the brand's signature accent and loses impact if overused.
• Do maintain the white surface as the default background; use surface-container grays only for subtle depth separation, never as primary content areas.
• Do apply full-radius (9999px) only to buttons; use lg radius (16px) for cards and DEFAULT (8px) for inputs to create a clear visual hierarchy.
• Do pair Guton headlines with silka body copy; never reverse this pairing or mix typefaces within a single component.
• Do use the md spacing (24px) as your default section separator; only increase to lg (40px) for major transitions like hero-to-content.
• Do apply the 200–250ms cubic-bezier transition to all hover and focus states to maintain the brand's smooth, professional feel.

**Don't**

• Don't use secondary (#0693e3) or tertiary (#00d084) as primary CTAs; they are supporting accents and will dilute the primary's impact.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15); the brand avoids harsh contrast and prefers soft, warm depth.
• Don't mix rounded and sharp corners within a single component; commit to the graduated radius strategy (full > lg > DEFAULT > sm).
• Don't use pure black (#000000) for text; always use on-surface (#111111) or on-surface-variant (#404040) to maintain warmth.
• Don't exceed container-max-width of 1024px; the brand prioritizes focused, intimate layouts over sprawling content.
• Don't animate transitions faster than 150ms or slower than 300ms; the brand values responsiveness and clarity, not flashiness.