Cielo Denim

Overview

Cielo Denim operates within the **Direct-to-Consumer Retail Maximalism** aesthetic—a design philosophy that prioritizes urgency, clarity, and emotional directness through bold typography, high-contrast color blocking, and strategic accent deployment. The brand serves contemporary denim consumers seeking premium fits and durable fabrics, positioning itself as accessible yet aspirational. The UI evokes a sense of energetic retail immediacy: every element is designed to guide the user toward purchase with confidence and speed. The visual language combines the geometric precision of Fjalla One typeface (400 weight, 60px display size) with a vivid red primary accent (#b91c1c) that appears on all call-to-action surfaces, creating a visual hierarchy that is impossible to ignore.

The brand voice is direct, conversational, and urgency-driven without being aggressive. Tone patterns include imperative verbs ('Check out', 'Don't Sleep'), exclamatory punctuation ('🔥 Limited-Time Steals You Can't Miss!'), and product-focused language that emphasizes scarcity and value. The vocabulary skews toward contemporary retail vernacular: 'steals', 'collection', 'fit', 'durable'. Example sentence in brand voice: 'Limited drops, premium denim, zero compromise—grab yours before they're gone.'

Colors

The Cielo Denim color system is built on **high-contrast retail energy**, where the primary accent (#b91c1c, a vivid true red) dominates all interactive and promotional surfaces. Primary (#b91c1c) is deployed on all primary call-to-action buttons, promotional badges, and announcement bars—it is the signature brand color that users instinctively click. On-primary is pure white (#ffffff) to ensure maximum legibility at 18px announcement-bar font-size and 48px button heights. The surface stack uses near-white neutrals (surface #ffffff, surface-dim #f3f3f3, surface-container #fafafa) to create subtle depth without introducing gray; this maintains the clean, premium aesthetic while allowing card hover states to shift to surface-container-high (#e5e5e5) with a 0 4px 12px rgba(0,0,0,0.15) shadow

Typography

The Cielo Denim type system is monolithic by design: **Fjalla One (400 weight only)** is used across all scales—display, headline, title, body, and label—creating a unified, recognizable brand voice that is impossible to dilute. This single-typeface approach reinforces the brand's directness and retail confidence. Display (60px, 68px line-height, -0.04em letter-spacing) is reserved for hero headlines and major announcements; headline-lg (40px, 48px line-height, -0.02em) powers section titles and product category headers; headline-md (28px, 36px line-height, -0.01em) is used for subsection titles and card headers. Body-lg (18px, 28px line-height, 0.06rem letter-spacing) is the primary body copy size, used in product descriptions and long-form content; body-md (16px, 24px line-height, 0.06re

Layout

Cielo Denim uses a **fluid 12-column grid** with a fixed container max-width of 1280px (120rem), centered on desktop with 0rem margin. The spacing scale is semantic and hierarchical: unit (8px) is the base increment; xs (4px) is used for micro-spacing within components (badge padding, input field internal spacing); sm (12px) is used for list-item padding and tight component spacing; md (24px) is the standard gutter and card padding, used for section separation and component internal padding; lg (40px) is used for major section breaks and hero spacing; xl (64px) is reserved for full-page section separation. Grid spacing on desktop is 8px vertical and 8px horizontal (--grid-desktop-vertical-spacing: 8px, --grid-desktop-horizontal-spacing: 8px); on mobile, this reduces to 4px vertical and 4px

Elevation & Depth

Depth in Cielo Denim is conveyed through **subtle shadow layering and strategic contrast**, not through darkness or blur. The elevation system uses three distinct levels: Level 1 (Base/Surface) has no shadow—surfaces sit flush on the white background (#ffffff). Level 2 (Standard Card/Component) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) ({elevation.sm}), creating a barely-perceptible lift for cards, inputs, and standard containers. Level 3 (Elevated/Hover/Modal) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) ({elevation.md}), applied on card-hover, button-primary-hover, and modal overlays

Shapes

Cielo Denim employs a **Soft-Technical** shape philosophy: rounded corners are used sparingly and strategically to soften the geometric precision of Fjalla One typography without introducing organic softness. Buttons use rounded.lg (1rem / 16px) for a subtle, modern feel that avoids the aggressive sharpness of 0px radius while stopping short of pill-shaped (rounded.full / 9999px). Cards and containers use rounded.xl (1.5rem / 24rem) to create a premium, breathing quality; product cards specifically use 0.8rem (12.8px, --product-card-corner-radius: 0.8rem) for a tighter, more product-focused ap

Components

Action Elements Buttons are the primary interactive surface in Cielo Denim. **button-primary** uses backgroundColor {colors.primary} (#b91c1c), textColor {colors.on-primary} (#ffffff), typography {typography.label-md} (14px, 400 weight, 0.06rem letter-spacing), rounded {rounded.lg} (1rem), padding 12px 24px, height 48px, and boxShadow 0 2px 4px rgba(0, 0, 0, 0.1). On hover, **button-primary-hover** shifts backgroundColor to {colors.primary-container} (#dd1d1d) and escalates boxShadow to {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.15)), creating tactile feedback. On active/pressed, **button-primary-active** uses backgroundColor #8b1a2a (a darker red) to signal state change. **button-secondary** uses backgroundColor {colors.surface-container} (#fafafa), textColor {colors.on-surface} (#1f2

Do's and Don'ts

**Do**

• Do use primary (#b91c1c) exclusively on call-to-action buttons, promotional badges, and announcement bars—never dilute it on secondary or tertiary elements.
• Do maintain Fjalla One 400 weight across all typography scales; do not introduce additional typefaces or weights to preserve brand unity.
• Do apply {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.15)) on all hover states for buttons and cards to signal interactivity with consistent tactile feedback.
• Do use rounded.lg (1rem) for primary buttons and rounded.full (9999px) for badges to create clear visual hierarchy between interactive and informational elements.
• Do maintain 12px 24px padding on all buttons (height 48px) to ensure touch-target accessibility and visual consistency across the interface.

**Don't**

• Don't use secondary (#d72c0d) or tertiary (#13a165) on primary CTAs; reserve these for supporting actions and status indicators only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur-radius greater than 12px; the system relies on subtle elevation, not dramatic depth.
• Don't introduce rounded corners greater than 1.5rem on cards or containers; this dilutes the technical aesthetic and creates visual softness that conflicts with Fjalla One's geometric precision.
• Don't use letter-spacing less than 0.06rem on body copy or labels; the system requires consistent tracking to maintain legibility and brand voice.
• Don't apply text-shadow or text-stroke on body copy; reserve these techniques for small labels (12px or smaller) over busy backgrounds only.