Jazzi Creates

Overview

Jazzi Creates embodies a 'Bold Maximalist' aesthetic—a confident, energetic design language that celebrates vibrant color as the primary storytelling device. The brand serves creative professionals and digital-first audiences seeking authentic, high-impact content strategy. The visual identity channels a contemporary pop-art sensibility: a dominant magenta background (#C43670) acts as an immersive canvas, while soft blush accents (#F0CCDF) and hot pink highlights (#FD96CD) create a playful yet professional tension. The UI evokes optimism, boldness, and creative momentum—evoking the feeling of a creative studio that moves fast and thinks bigger.

The voice is direct, conversational, and unapologetically confident. Jazzi speaks in active imperatives and energetic declaratives: 'Let's scale your brand reach.' 'Content that moves.' 'Strategic storytelling at scale.' The tone avoids corporate jargon; instead, it uses concrete, action-oriented language that mirrors the pace of digital culture. Every interaction feels intentional, never apologetic—buttons are bold, text is legible, and the hierarchy is unmistakable.

Colors

The color system is built on a single dominant accent—magenta (#C43670)—paired with a carefully calibrated blush-and-hot-pink supporting palette. Primary (#C43670) is the brand's signature color, used for the full-screen background, primary CTAs, and active states; it conveys energy and creative confidence. On-Primary (#F0CCDF) is the soft blush text color, ensuring 16:1+ contrast on the magenta background for accessibility and legibility. Secondary (#FD96CD) is a hot pink accent used for hover states, card highlights, and interactive feedback—it sits between primary and on-primary in the visual hierarchy, adding dimensionality without competing for attention. Tertiary (#F0CCDF) mirrors on-primary, reinforcing the blush as a tertiary surface. The surface stack uses the primary magenta as t

Typography

The type system uses the custom 'saans' font family (loaded via @font-face with woff2 format, font-display: swap) across all scales, creating a cohesive, branded voice. Display (72px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; Headline-lg (48px, 600 weight) introduces major sections; Headline-md (32px, 600 weight) breaks up content hierarchically. Body-md (16px, 600 weight, 24px line-height) is the primary reading size, set to semi-bold to maintain legibility on the magenta background without requiring increased font-size. Label-md (14px, 600 weight, 0.01em tracking) is used for button text and UI labels, with letter-spacing applied to add visual breathing room in compact spaces. All type uses a unitless line-height (1.5 for body, 1.25 for display)

Layout

The layout uses a 12-column grid system with a fixed container max-width of 1280px, centered on larger viewports. The page rhythm is built on a 4px unit system (spacing.unit), with semantic spacing tokens: sm (12px) for tight component spacing, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full viewport height (100dvh) with fixed positioning, creating an immersive entry point; subsequent sections use min-height: 60vh to maintain visual breathing room. Horizontal padding uses the gutter token (24px) on mobile, scaling to 40px on tablet and 64px on desktop via clamp() functions (e.g., padding: clamp(24px, 5vw, 64px)). Card grids use grid-cols-12 with responsive column spans (e.g.,

Elevation & Depth

Elevation is conveyed through color shifts and subtle shadows rather than layered depth. Level 1 (Base): the full-screen magenta background (#C43670) with no shadow, establishing the primary visual plane. Level 2 (Standard Cards): cards use background-color: #FD96CD (secondary) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift from the background. Level 3 (Elevated/Modals): modals and overlays use background-color: #F0CCDF (on-primary) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), signaling maximum prominence. Hover states on cards apply a 2px scale transform (scale: 1.02)

Shapes

The shape philosophy is 'Soft-Technical'—combining sharp, geometric precision with approachable rounded corners that soften the boldness of the color palette. Buttons use rounded: full (border-radius: 9999px), creating pill-shaped CTAs that feel friendly and clickable while maintaining visual weight. Cards use rounded: lg (1rem / 16px), balancing the organic feel of rounded corners with enough angularity to read as structured, professional containers. Input fields use rounded: DEFAULT (0.5rem / 8px), a subtle radius that signals interactivity without competing with button shapes. The rationale

Components

Action Elements Buttons are the primary interactive element. Button-primary uses background-color: {colors.primary} (#C43670), text-color: {colors.on-primary} (#F0CCDF), padding: 4px 24px, height: 44px, and rounded: full. On hover, background-color shifts to {colors.surface-bright} (#E85A8A) with a 150ms transition (cubic-bezier(0.4, 0, 0.2, 1)). Button-secondary uses a transparent background with a 2px border in {colors.on-primary} (#F0CCDF), maintaining the same padding and height; on hover, it receives a 10% opacity white overlay (rgba(240, 204, 223, 0.1)). Both button variants use font-weight: 600 and letter-spacing: 0.01em to ensure legibility at 14px.

Containers & Surfaces Cards are the primary content container. Card uses background-color: {colors.secondary} (#FD96CD), roun

Do's and Don'ts

**Do**

• Do use the magenta (#C43670) as a full-screen immersive background; it is the brand's signature and should dominate the visual experience.
• Do pair magenta with blush (#F0CCDF) for all body text; the 16:1 contrast ratio ensures accessibility and legibility.
• Do apply rounded: full (9999px) to all primary CTAs; the pill shape is the brand's signature button style and signals confidence.
• Do use hot pink (#FD96CD) sparingly for hover states, badges, and secondary accents; it adds dimensionality without competing with primary.
• Do maintain font-weight: 600+ on all text over magenta backgrounds; lighter weights (400–500) will lose legibility.
• Do use clamp() functions for responsive spacing (e.g., padding: clamp(24px, 5vw, 64px)) to maintain visual rhythm across viewports.

**Don't**

• Don't use pure white (#FFFFFF) or pure black (#000000) as primary text colors; stick to the blush (#F0CCDF) and hot pink (#FD96CD) palette for consistency.
• Don't apply box-shadows to buttons or inputs; elevation is conveyed through color shifts and scale transforms, not shadow depth.
• Don't use border-radius: 0 (sharp corners) on interactive elements; all buttons, cards, and inputs must use rounded: lg or rounded: full.
• Don't reduce font-weight below 600 on magenta backgrounds; semi-bold is the minimum for legibility at any size.
• Don't use the error color (#D40101) for non-critical feedback; reserve it for validation errors, warnings, and destructive actions only.
• Don't apply opacity or transparency to the primary magenta background; it should remain solid and immersive at all times.