Karta Lucia

Overview

Karta Lucia is a full-service creative studio and content lab that transforms complex visual narratives into immersive brand experiences through film production, post-production, VFX, generative AI, and collaborative design. The design system embraces a "Cinematic Minimalism" aesthetic—a sophisticated fusion of dark, almost-black surfaces (rgb(0, 0, 0) to rgb(26, 26, 26)) with bold, saturated accent colors that punctuate the interface like color grading in premium film work. The visual language evokes the precision and drama of professional cinematography: deep blacks create visual depth and focus, while strategic use of crimson red (#af231c), electric blue (#0099ff), and burnt orange (#ff5700) command attention like key lights in a three-point lighting setup.

The brand voice is authoritative yet collaborative, speaking to creative professionals and ambitious brands with clarity and conviction. Vocabulary patterns favor directness over decoration: "Let's Create," "Ecosystem," "Portfolio"—language that signals action and partnership. The tone is never breathless or overly casual; instead, it carries the quiet confidence of a studio that has mastered its craft. Example sentence in brand voice: "We build immersive experiences that transform how audiences connect with your vision."

Colors

The color system is built on a foundation of near-absolute darkness—surface colors range from #000000 (pure black) through #1a1a1a (surface-container) to #3d3d3d (surface-container-highest)—creating a canvas that maximizes contrast and visual drama. This dark foundation is essential to the brand's cinematic identity: it mirrors the color grading of premium film work and ensures that accent colors read with maximum impact and legibility.

Primary (#af231c) is a deep, sophisticated crimson red that appears on all call-to-action buttons, interactive focus states, and brand-critical elements. It is never used as a background; instead, it functions as a visual anchor that draws the eye and signals interactivity. Secondary (#0099ff) is a vibrant electric blue reserved for links, secondary action

Typography

The typography system pairs expressive display faces with functional body text to balance cinematic presence with clarity. Palace Script MT Regular (146px, 400 weight, -0.02em letter-spacing) serves as the display face for the hero "Karta Lucia" wordmark—its italic, flowing letterforms evoke elegance and creative sophistication while maintaining legibility at scale. Delight Bold (48px, 700 weight) and Delight Semi Bold (32px, 600 weight) handle headlines and section titles, providing a distinctive, geometric warmth that contrasts with the minimalist interface. Neue Montreal Regular (24px, 400 weight) bridges the gap between display and body, used for subsections and prominent labels. Inter (16px–18px, 400–500 weight) is the workhorse for body text, labels, and UI copy—its neutral, highly l

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, providing flexibility for both desktop and responsive contexts. The grid rhythm is anchored by the 8px unit, with semantic spacing tokens (gutter: 24px for section separation, md: 24px for component padding, lg: 40px for major section breaks) creating a predictable, hierarchical visual rhythm. White-space is treated as a design material equal to color and typography: generous margins (40–64px) between major sections create breathing room and allow video backgrounds or hero imagery to command attention without visual clutter. The gutter (24px) is used consistently for horizontal padding on cards, input fields, and button groups, ensuring visual alignment across all components. Container padding follows a respo

Elevation & Depth

Depth in Karta Lucia's design system is conveyed through a restrained shadow vocabulary and strategic use of layering, avoiding the heavy drop-shadows common in contemporary UI design. The elevation scale uses three levels: sm (0 1px 2px rgba(0,0,0,0.12)) for subtle separation of adjacent elements like list items or small cards; md (0 4px 12px rgba(0,0,0,0.16)) for primary cards, modals, and floating elements; lg (0 16px 40px rgba(0,0,0,0.24)) for hero overlays, full-screen modals, and elements that demand maximum visual separation. Inset shadows (inset 0px 0px 2px 0px rgba(0,0,0,0.05)) are us

Shapes

The shape philosophy is "Architectural Precision with Cinematic Softness"—border-radius values are calibrated to feel intentional and modern without sacrificing usability or visual warmth. Buttons and primary CTAs use full (9999px) border-radius, creating pill-shaped elements that feel contemporary and clickable; this is the most recognizable interactive shape in the system. Cards and containers use lg (1rem / 16px) border-radius, providing enough softness to feel approachable while maintaining a structured, professional appearance. Input fields and secondary UI elements use DEFAULT (0.5rem /

Components

Action Elements Buttons are the primary mechanism for user interaction and brand expression. The button-primary component uses {colors.primary} (#af231c) background with {colors.on-primary} (#ffffff) text, full border-radius (9999px), and padding of 10px 24px, creating a 44px height that is both touch-friendly and visually proportionate. The label-md typography (14px, 500 weight) ensures text remains scannable at any size. On hover, button-primary transitions to button-primary-hover (background: {colors.primary-container} #d4534a) over 200ms using cubic-bezier(0.2, 0, 0.38, 0.9) easing, creating a subtle lift effect without changing shape. Button-secondary uses a transparent background with rgba(255, 255, 255, 0.08) and a 1px border at rgba(255, 255, 255, 0.12), providing a ghost-butto

Do's and Don'ts

**Do**

• Do use primary (#af231c) exclusively for call-to-action buttons, focus states, and brand-critical interactive elements—never use it as a background or for body text.
• Do maintain the dark surface palette (black to #3d3d3d) as the foundation for all layouts; light backgrounds should be reserved for exceptional cases (e.g., print exports, light-mode variants).
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.3) on small labels (12–14px) when layered over video or photographic backgrounds to ensure legibility.
• Do use the full 12-column grid for functional UI elements (forms, lists, navigation) to ensure predictability and accessibility; asymmetrical grids are acceptable only for cinematic hero compositions.
• Do transition all interactive elements (buttons, cards, links) over 200–300ms using cubic-bezier(0.2, 0, 0.38, 0.9) easing to create responsive, fluid feedback.
• Do reserve secondary (#0099ff) and tertiary (#ff5700) for supporting actions and highlights; never use them as primary CTAs or dominant interface colors.

**Don't**

• Don't use sharp corners (0px border-radius) on interactive elements; minimum radius is DEFAULT (0.5rem / 8px) for inputs, lg (1rem / 16px) for cards, full (9999px) for buttons.
• Don't apply heavy drop-shadows (blur > 40px, spread > 8px) to UI elements; the elevation scale is deliberately restrained to maintain the cinematic, flat aesthetic.
• Don't use near-white or near-black text on dark backgrounds without sufficient contrast; minimum contrast ratio is 4.5:1 for body text, 3:1 for large text (18px+).
• Don't mix font families within a single component; use the designated typography token (e.g., {typography.label-md}) consistently across all instances.
• Don't apply color overlays or tints to video backgrounds without testing legibility of overlaid text; use inset shadows or semi-transparent containers (rgba(0,0,0,0.3)) to ensure readability.
• Don't use primary color (#af231c) for non-interactive elements (borders, dividers, backgrounds); reserve it exclusively for actions and focus states.