Cluma

Overview

Cluma is a modular design subscription agency that transforms how businesses access design talent. The visual identity embodies a "Playful Precision" aesthetic—combining the electric energy of a vibrant electric blue (#2d62ff) primary accent with soft pink secondary highlights (#dd23bb) against a pristine white canvas. This design language conveys approachability without sacrificing professionalism, making complex modular service offerings feel intuitive and inviting. The brand personality is confident yet conversational, speaking to design-forward companies who value flexibility and quality. Voice: direct, optimistic, and solution-oriented. Example: "Pick the design modules you need—brand, web, product, content, motion—and scale your output for a flat monthly fee."

Colors

The Cluma color system operates on a principle of "Accent-Driven Minimalism," where a single dominant accent color drives all interactive moments. Primary (#2d62ff) is the electric blue used exclusively for call-to-action buttons, focus states, and key interactive elements—it commands attention without overwhelming. Secondary (#dd23bb), a vibrant magenta-pink, provides a supporting accent for highlights, badges, and secondary CTAs, creating visual rhythm and playfulness. Tertiary (#3898ec), a softer sky blue, is reserved for informational elements and tertiary actions. The surface stack is anchored in pure white (#ffffff) with carefully calibrated grays for depth: surface-container-low (#f5f5f5) for subtle backgrounds, surface-container (#eeeeee) for mid-tier containers, and surface-contai

Typography

The type system pairs Comfortaa (a rounded, friendly geometric sans-serif) for all display and headline levels with Montserrat (a clean, modern geometric sans-serif) for body and label text. This pairing creates a visual hierarchy that feels both approachable and professional: Comfortaa's rounded letterforms at display (60px, 700 weight, -0.02em tracking) and headline-lg (40px, 700 weight) establish brand personality and draw the eye, while Montserrat's precision at body-md (16px, 400 weight, 0.02em tracking) ensures legibility and clarity. Headlines use negative letter-spacing (-0.01em to -0.02em) to tighten the visual mass and create impact. Body text maintains 24px line-height for comfortable reading at 16px size. Labels use 600 weight at 14px with 0.01em tracking to maintain hierarchy

Layout

Cluma uses a 12-column fluid grid with a maximum container width of 1280px, centered with auto margins. The spacing scale is semantic: unit (8px) serves as the base increment, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter spacing is fixed at 24px on desktop, collapsing to 16px on tablet and 12px on mobile to maintain proportional breathing room. The design favors generous white space—sections are separated by lg (40px) minimum, creating a rhythm that feels unhurried and premium. Container max-width of 1280px ensures content never stretches beyond comfortable reading widths. Responsive breakpoints follow: 1024px (desktop), 768px (tablet), 480px (mobile), with layout shif

Elevation & Depth

Depth in Cluma is achieved through a layered shadow and inset-light system inspired by neumorphic design principles, creating a tactile, dimensional interface without relying on dark overlays. Level 1 (Base): white background (#ffffff) with no shadow, establishing the foundation. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), paired with a 1px solid border in outline-variant (#cccccc), creating subtle separation. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with the same border treatment, lifting content above the base layer. Module cards employ

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used consistently to soften the geometric grid while maintaining clarity and modernity. Buttons and inputs use rounded.lg (1rem / 16px) for a friendly, approachable feel that avoids sharp corners. Cards and containers use rounded.xl (1.5rem / 24px) for a more generous, premium appearance. Small UI elements like badges use rounded.full (9999px) for pill-shaped containers. The rationale: larger radius values (xl, full) are reserved for primary content containers to draw focus, while smaller radius values (lg, DEFAULT) are use

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses background: {colors.primary} (#2d62ff), text: {colors.on-primary} (white), padding: 12px 24px, height: 48px, and rounded: {rounded.lg} (16px). On hover, the background darkens to #1a4d99, the shadow expands to 0 8px 20px rgba(45, 98, 255, 0.25), and the element translates up 2px over 200ms, creating a tactile lift effect. On active/pressed, the background shifts to #080331 (the darkest blue), shadow reduces to 0 2px 8px rgba(45, 98, 255, 0.12), and transform resets to translateY(0px), simulating a press. Button-secondary 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-c

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2d62ff) exclusively for primary CTAs and focus states—it's the brand's signature accent and should never be diluted or overused.
• Do maintain the 24px gutter spacing on desktop and collapse proportionally on mobile to preserve the premium, unhurried feel of the layout.
• Do apply the inset highlight effect (inset 0.5vw 0.5vw 1.5vw rgba(255, 255, 255, 0.5)) to module cards and interactive containers to reinforce the tactile, dimensional aesthetic.
• Do use Comfortaa for all headlines and display text to establish brand personality; reserve Montserrat for body and labels to maintain legibility.
• Do pair button hover states with a 2px upward transform (translateY(-2px)) and expanded shadow to signal interactivity without jarring movement.
• Do use the full Material 3 color token stack (primary-container, on-primary-container, etc.) to ensure consistent, accessible color relationships across all states.

**Don't**

• Don't use {colors.secondary} (#dd23bb) or {colors.tertiary} (#3898ec) for primary CTAs—they are supporting accents and will dilute the primary's impact.
• Don't apply shadows larger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) on standard cards; reserve the strongest shadows for modals and elevated content only.
• Don't mix Comfortaa and Montserrat at the same hierarchy level; use Comfortaa for headlines and Montserrat for body to maintain clear visual distinction.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—always use the on-* token pairs (e.g., on-primary, on-secondary) to ensure accessible contrast.
• Don't apply border-radius smaller than {rounded.DEFAULT} (8px) on interactive elements; the brand favors soft, approachable shapes.
• Don't animate transitions faster than 200ms or slower than 400ms for standard interactions; use cubic-bezier(0.4, 0, 0.2, 1) timing for consistency.