CLARTÉ

Overview

CLARTÉ is a poetic art book and intimate narrative that transforms a rare blood cancer diagnosis into a visual and emotional journey toward clarity. Designed for a sophisticated, introspective audience, the brand embodies "Dramatic Minimalism"—a movement that pairs austere black surfaces with vivid red accents to create visceral emotional impact. The aesthetic is deliberately stark and theatrical, evoking both the gravity of illness and the transcendence of finding light within darkness. The UI voice is contemplative, precise, and never clinical: it speaks to the reader's inner experience rather than their symptoms. Example: "A year ago, I was told I had a rare chronic blood cancer. Since then, I've been trying to see things more clearly."

Colors

The color system is built on a profound contrast between absolute black (#000000) and pure white (#ffffff), with red (#ff0000) as the singular accent that commands attention and emotion. Primary (#ff0000) is reserved exclusively for call-to-action buttons, focal points, and moments of visual emphasis—it represents the moment of diagnosis, the spark of clarity, and the emotional core of the narrative. The surface stack uses deep blacks (surface: #000000, surface-container: #1a1a1a) to create a meditative, gallery-like environment. Secondary (#e1ddd1) and tertiary (#d0d0d0) are warm, off-white tones used for modal backgrounds and supporting surfaces, providing visual relief and legibility when needed. Outline colors (#666666, #505050) are muted grays that define subtle borders and dividers w

Typography

The type system pairs two distinct typefaces to create emotional resonance: Romie (serif, 400 weight) serves as the display and headline voice—elegant, contemplative, and distinctly human—while Neue Montreal (sans-serif, 400–500 weight) provides the functional, readable body and label hierarchy. Display text uses Romie at 78px with a tight line-height of 0.92 and aggressive letter-spacing of -1.56px, creating a compressed, almost breathless quality that mirrors the intensity of the narrative. Body text (Neue Montreal, 16px, line-height 1.25, letter-spacing -0.32px) is set with negative tracking to maintain visual cohesion and a modern, slightly condensed feel. All typography uses -webkit-font-smoothing: antialiased to ensure crisp rendering on dark backgrounds. Labels and CTAs use 14px Neu

Layout

The page layout uses a 24-column grid system with a maximum container width of 1280px, allowing for flexible, responsive composition. The hero section occupies 100svh (100% of the small viewport height) to create an immersive, full-screen experience that mirrors the intensity of the narrative. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) provides breathing room within components. The gutter is set to 24px on desktop, collapsing to 12px on mobile (max-width: 440px) to maintain readability on smaller screens. Padding and margins are consistently applied using the spacing scale to create visual harmony and predictability. The layout prioritizes vertical scrolling with smooth, eased transi

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bright highlights or glassmorphism. The elevation system uses three levels: sm (0 0 1.25rem rgba(0, 0, 0, 0.1)) for minor cards and interactive elements, md (0 0 1.875rem rgba(0, 0, 0, 0.1)) for standard containers, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and prominent surfaces. Shadows are soft and spread, never sharp, to maintain the meditative, gallery-like atmosphere. The modal overlay uses a combination of backdrop-filter: blur(12px) and a semi-transparent black background (rgba(0, 0, 0, 0.6)) to create a layered,

Shapes

The shape philosophy is "Architectural Precision"—clean, rectilinear forms that reflect the clarity and structure of the narrative. Buttons use a tight border-radius of 0.25rem (4px), creating a subtle, almost imperceptible rounding that feels modern and intentional without softness. Cards and containers use 0.75rem (12px) for a slightly more approachable feel, while modals use 0.375rem (6px) for a refined, gallery-like quality. Input fields use the DEFAULT radius of 0.5rem (8px) for a balanced, functional appearance. The full radius (9999px) is reserved for badges and small accent elements. A

Components

Action Elements The primary button is the hero of the interaction model. It uses a black background (#000000) with white text (#ffffff) and a 0.25rem border-radius, with 16px vertical and 24px horizontal padding. On hover, the button transitions to primary-container (#cc0000) with a 0.4s cubic-bezier(0.38, 0.005, 0.215, 1) easing, creating a smooth, deliberate color shift. The button includes an animated text and arrow that slide vertically on hover (transform: translateY(-100%) on text, translate(110%) on arrow), with a clip-path animation on a pseudo-element that reveals the hover state. The button scales in from 0 on initial view using a 1s spring-like easing function (linear(0, 0.007, 0.03 2.1%, ...)) to create a playful entrance. Secondary buttons use a transparent background with

Do's and Don'ts

**Do**

• Do use red (#ff0000) exclusively for primary CTAs and moments of emotional emphasis—never dilute its impact with secondary uses.
• Do maintain the 0.92 line-height on display text (Romie) to create the compressed, contemplative quality that defines the brand voice.
• Do apply negative letter-spacing (-0.32px) consistently across body and label text to reinforce the modern, condensed aesthetic.
• Do use cubic-bezier(0.38, 0.005, 0.215, 1) easing for all transitions to maintain the deliberate, intentional motion language.
• Do pair Romie serif headlines with Neue Montreal sans-serif body text to create editorial sophistication and emotional resonance.
• Do apply backdrop-filter: blur(12px) to modal overlays to create depth and focus without introducing visual noise.

**Don't**

• Don't use red (#ff0000) for secondary buttons, badges, or decorative elements—reserve it for primary actions only.
• Don't apply border-radius greater than 1rem on buttons or cards; the brand requires architectural precision, not softness.
• Don't use system fonts or generic sans-serifs; always load Neue Montreal and Romie via @font-face to maintain brand consistency.
• Don't add shadows greater than lg (0 3px 8px rgba(0, 0, 0, 0.15)) to avoid creating visual clutter or breaking the meditative atmosphere.
• Don't use positive letter-spacing on body text; the brand's identity depends on the tight, condensed tracking (-0.32px).
• Don't animate elements with durations shorter than 0.3s or longer than 1s unless explicitly required; the brand uses deliberate, measured motion.