CREVV

Overview

CREVV is a full-service design studio based in Kyiv that operates within the aesthetic movement of Architectural Minimalism—a discipline that privileges precision, restraint, and structural clarity over ornament. The brand identity system reflects this philosophy through a monochromatic foundation (near-black #242424 and off-white #fafafa) punctuated by a vivid electric blue (#0078ff) that serves as the primary accent, evoking digital precision and technical confidence. The UI evokes a sense of refined professionalism: clean, uncluttered, and purposeful. Every visual element—from typography to spacing—communicates intentionality and craft.

The brand voice is direct, articulate, and intellectually rigorous. CREVV speaks in the language of visual systems and strategic communication, avoiding hyperbole and marketing cliché. The tone is calm but authoritative, precise but approachable. Example sentence in brand voice: "We build identities that endure through clarity, not complexity."

Colors

The color system is anchored in a high-contrast, minimal palette designed to maximize legibility and focus user attention on content. Primary (#0078ff) is the brand's signature accent—used exclusively for interactive elements (links, buttons, focus states) and key CTAs. It appears sparingly but with maximum impact, creating visual hierarchy through restraint. Secondary (#ff4828) is a warm accent reserved for alerts, status indicators, and supporting actions; it provides warmth against the cool primary and creates visual tension when needed. Tertiary (#007aff) is a near-primary blue used for secondary interactive states and pagination elements.

The surface stack progresses from bright (#ffffff) through container layers (surface-container-lowest #f5f5f5, surface-container #e8e8e8, surface-c

Typography

The type system employs a three-family strategy: Nobel (a geometric sans-serif) for display and headline scales to establish visual authority; Charter (a serif) for body-length prose to ensure readability and warmth; Source Sans Pro (a humanist sans-serif) for UI labels and interface text to maintain clarity at small sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks; Headline-lg (48px, 700 weight) anchors page sections; Headline-md (32px, 700 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and maintains a comfortable 1.56 line-height ratio. Body-md (16px, 400 weight, 24px line-height) is the default for UI text and descriptions. Label-md (14px, 600 weight, 0.01em lett

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1024px, centered on the viewport. This constraint ensures content remains scannable and prevents line-length from exceeding 75 characters for body text. White-space is used as a structural tool: the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently to margins and padding, creating a visual rhythm that guides the eye. Gutter spacing (24px) separates columns and defines the breathing room around content blocks. Section separation uses lg spacing (40px) to create clear visual breaks; within components, md spacing (24px) separates related groups. Container padding is set to gutter (24px) on desktop, reducing to sm (12px) on mobile. The grid is fluid below 768px, collapsing to a sin

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadow effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for base cards and interactive elements at rest; md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and hover states; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Cards use a 1px border in outline-variant (#b8b8b8) paired with sm shadow to define their boundary without visual heaviness. On hover, cards transition to md shadow (200ms ease-out) and shift background from surface-bright (#ffffff) to surface (#fa

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are used functionally to soften hard edges without introducing organic or playful qualities. The rounded scale progresses from sm (4px) for small UI elements like checkboxes and tight button groups; DEFAULT (8px) for standard buttons and input fields; md (12px) for cards and moderate containers; lg (16px) for larger cards and modal corners; xl (24px) for hero sections and full-width containers; full (9999px) for pills and circular badges. Buttons use md (12px) to balance approachability with precision; cards use lg (16px) to create

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height (matching touch targets on mobile) with 12px vertical and 24px horizontal padding. Primary buttons (#0078ff on white) transition to #0060cc on hover (200ms ease-out) and #004a99 on active, providing clear feedback without animation. Secondary buttons use a 1px border in primary (#0078ff) with transparent background, inverting to primary-container (#e3f2ff) on hover. Ghost buttons have no border or background, relying on text color (#0078ff) and a surface-container-high background on hover to signal interactivity. All buttons use label-md typography (14px, 600 weight) and md border-radius (12px). Links use primary (#0078ff) text with no underline by default; on hover, they shift to #0060cc and

Do's and Don'ts

**Do**

• Do use primary (#0078ff) exclusively for interactive elements and CTAs—never use it for passive content or backgrounds.
• Do maintain 24px gutter spacing between grid columns and 40px lg spacing between major sections to preserve visual rhythm.
• Do apply 48px minimum height to all touch targets (buttons, list items) and use md (12px) border-radius for consistency.
• Do use Nobel for headlines and Charter for body text to create a clear typographic hierarchy that guides scanning.
• Do apply the focus ring (0 0 0 3px rgba(0, 120, 255, 0.1)) to all interactive elements for keyboard accessibility.
• Do transition interactive states over 150–200ms using ease-out timing to feel responsive without appearing jarring.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use #242424 for text and #fafafa for surfaces to reduce eye strain.
• Don't mix border-radius values within a single component—use the scale (sm/DEFAULT/md/lg/xl/full) consistently.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.12)) as they conflict with the minimalist aesthetic.
• Don't use secondary (#ff4828) for primary CTAs or links—reserve it for alerts, errors, and supporting actions only.
• Don't exceed 1024px container width; content becomes difficult to scan and line-length becomes uncomfortable.
• Don't animate transitions longer than 300ms or use easing functions other than ease-out—they feel sluggish and reduce perceived responsiveness.