Fleava

Overview

Fleava is a Southeast Asian digital agency rooted in the aesthetic of 'Warm Minimalism with Craft Specificity'—a design philosophy that marries the precision of modernist grid systems with the warmth of regional color traditions. The brand serves creative directors, lifestyle brands, and enterprises across Singapore, Bali, and Jakarta who demand both technical excellence and cultural authenticity. The visual identity evokes a sense of curated sophistication: a near-black canvas (#1b1b1b) anchors the interface, while service-specific accent colors (coral-peach #ffb69c for UX, soft blue #c1d9ff for marketing, sage #d5dbb6 for strategy) emerge as functional chromatic signals, each tied to a distinct service offering. The emotional response is one of confident clarity—users feel they are working with a team that understands both the craft of design and the business of growth.

The brand voice is direct, unpretentious, and grounded in outcomes. Fleava speaks in active verbs and concrete deliverables, never in buzzwords or hyperbole. The vocabulary favors precision over flourish: 'We build digital experiences that convert' rather than 'We create magical moments.' Tone is warm but professional, with a subtle hint of regional pride—the agency is unapologetically Southeast Asian, not a generic global entity. Example sentence in brand voice: 'Your brand deserves a digital home that works as hard as you do.'

Colors

The color system operates on a dual principle: a dark, neutral foundation paired with a chromatic service taxonomy. The surface stack (#1b1b1b → #323232) creates visual hierarchy through subtle increments of lightness, enabling layered UI without reliance on bright backgrounds. Primary (#ffb69c) is a warm coral-peach derived from the UX service category, chosen as the dominant accent because it appears on all call-to-action buttons, focus states, and interactive affordances—it is the color users click. Secondary (#c1d9ff), a soft periwinkle, supports the marketing service vertical and appears in secondary CTAs, badges, and informational highlights. Tertiary (#d5dbb6), a muted sage, anchors the strategy service and is used for tertiary actions, dividers, and supporting text. Each service ca

Typography

The type system uses Graphik across all weights (100–900), a geometric sans-serif that balances technical precision with humanist warmth—essential for a brand that must communicate both engineering rigor and creative vision. Display (56px, 800 weight, -0.03em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) establish information hierarchy for section titles and card headers, with negative letter-spacing (-0.02em, -0.01em) tightening the letterforms for visual impact. Title-lg (20px, 600 weight) serves as the primary label for service cards and component headings. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain readability across long-form

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px and 24px gutters, creating a predictable rhythm across desktop, tablet, and mobile viewports. The container padding is 80px (5rem) on desktop, scaling down to 24px on tablet and 16px on mobile, ensuring content never feels cramped or overly spacious. Sections are separated by 40px (lg spacing) vertically, with 24px (md spacing) used for component-level separation and 12px (sm spacing) for internal padding within cards. The grid accommodates both full-width hero sections (which break the container to bleed edge-to-edge) and constrained content areas. Service cards occupy 1/3 of the grid width (4 columns) on desktop, stacking to 1/2 (6 columns) on tablet and full-width on mobile. White-space is generous but purposeful:

Elevation & Depth

Depth in Fleava is achieved through a restrained shadow system and subtle layering, avoiding the heavy drop-shadows common in corporate design. Level 1 (Base): The background is a flat #1b1b1b with no shadow, establishing the visual floor. Level 2 (Standard Cards): Cards use a 1px border in outline-variant (#4a4a4a) and a soft shadow of 0 2px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background without visual drama. Level 3 (Elevated/Hover States): On hover, cards receive 0 8px 24px rgba(0, 0, 0, 0.25) and a 2px upward transform (translateY(-2px)), signaling interactivity. M

Shapes

The shape philosophy is 'Geometric Warmth'—sharp enough to feel contemporary and precise, rounded enough to feel approachable. Buttons and primary CTAs use 1rem (16px) border-radius, a moderate curve that suggests friendliness without sacrificing professional appearance. Cards and containers use 0.75rem (12px) for a slightly tighter radius, maintaining visual consistency while differentiating from buttons. Input fields use the DEFAULT radius (0.5rem / 8px), a subtle curve that feels integrated into the UI rather than prominent. Service category tags use 0.75rem to align with card styling, crea

Components

Action Elements Buttons are the primary affordance for user intent. The button-primary component uses background: {colors.primary} (#ffb69c), text-color: {colors.on-primary} (#1b1b1b), padding: 12px 24px, height: 48px, and rounded: {rounded.lg} (1rem). On hover, the background shifts to #ff9d7f with a box-shadow of 0 8px 24px rgba(255, 182, 156, 0.25), creating a subtle lift effect. The active state darkens to #e6956f, providing tactile feedback. All button transitions use 200ms cubic-bezier(0.4, 0, 0.2, 1) easing. Secondary buttons use a transparent background with a 2px border in {colors.primary}, allowing them to sit alongside primary buttons without visual competition. On hover, secondary buttons receive a light background (rgba(255, 182, 156, 0.08)) and border-color shifts to #ff9

Do's and Don'ts

**Do**

• Do use the service-category background colors (#33251f for UX, #181f32 for marketing, etc.) to create visual taxonomy without relying on text labels—users should intuitively understand service offerings through color alone.
• Do apply 24px (md spacing) between major sections and 12px (sm spacing) within cards to create breathing room that feels intentional, not accidental.
• Do use Graphik 700–800 weights for all headlines and 400 weight for body text; never mix weights within a single text block unless creating intentional emphasis.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive without being jarring.
• Do maintain the warm coral (#ffb69c) as the exclusive primary accent—it should appear on all CTAs, focus states, and interactive affordances to create a consistent visual language.

**Don't**

• Don't use sharp corners (0px border-radius) on buttons, cards, or inputs—the brand rejects austere minimalism in favor of geometric warmth.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, service-category colors)—the system is intentionally constrained to maintain visual coherence.
• Don't apply shadows heavier than 0 16px 48px rgba(0, 0, 0, 0.35)—excessive shadows contradict the minimal, sophisticated aesthetic.
• Don't use Graphik weights lighter than 300 for body text or heavier than 800 for display—the typeface is optimized for the 400–700 range for readability.
• Don't mix service-category background colors within a single component—each service offering should have its own distinct visual identity to aid navigation and comprehension.