Antara Studio

Overview

Antara Studio embodies Architectural Minimalism—a design philosophy that prioritizes intentional restraint, precise typography, and the strategic use of negative space. The brand serves design-conscious clients seeking elevated branding and digital experiences; the aesthetic evokes clarity, sophistication, and purposeful craftsmanship. Every visual element is deliberate: no ornament without function, no color without reason. The UI conveys calm authority through a monochromatic palette anchored in pure black (#000000) and off-white (#f5f5f5), punctuated by measured grays that guide hierarchy without distraction.

The brand voice is direct, articulate, and unapologetically refined. Antara speaks in declarative sentences with measured cadence—never breathless, never casual. The vocabulary is precise: "bold, elevated & intentional" rather than "modern and sleek." Example sentence in brand voice: "Give your brand a soul—through design that speaks before words do."

Colors

The color system is rooted in monochromatic restraint with strategic use of neutral grays to establish hierarchy. Primary (#000000) is the dominant accent and interaction color, applied to CTAs, active states, and primary navigation. It commands attention through contrast against the light surface (#f5f5f5). Secondary grays (#979797, #505050, #6c757d) create a legible hierarchy: use #979797 for secondary UI elements and disabled states, #505050 for tertiary interactions, and #6c757d for form labels and helper text. The surface stack progresses from #f5f5f5 (base) through #e9ecef (container-low) to #d0d0d0 (container-high), enabling subtle depth without visual noise. On-surface text is always #000000 for maximum legibility at 16px body size. The inverse surface (#0d0d0d) is reserved for dar

Typography

The type system pairs RecifeDisplay (light, 300–400 weight) for display and headline scales with HKGrotestk (regular, 300–600 weight) for body and label text. RecifeDisplay at 128px (display) and 48px (headline-lg) creates commanding presence with tight line-height (1.0–1.1) and negative letter-spacing (-0.02em), emphasizing geometric precision. Body text uses HKGrotestk at 16px with 24px line-height (1.5) and 0em letter-spacing for optimal readability. Labels are uppercase, 12px, 600 weight, 0.05em letter-spacing, creating visual distinction for form fields and navigation. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (10px) when layered over textured backgrounds to preserve contrast. Headlines should never exceed 1.1 line-height; body copy maintains 1.5 for comfortable

Layout

The layout operates on a 12-column grid with a maximum container width of 1280px, using fluid padding (5.33vw on mobile, 6.25vw on tablet, 6.25vw on desktop) to maintain consistent breathing room. Section separation uses lg spacing (40px on mobile, 64px on desktop) to establish clear rhythm and prevent visual fatigue. The hero section occupies 20rem of padding-bottom on desktop, creating generous white space that reinforces the minimalist aesthetic. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) for nested elements. The gutter between grid columns is 24px, enabling flexible component placement without cramping. Container max-width of 1280px prevents line-length from exceeding 80 characters on body text, maintaining readability. Responsive breakpoint

Elevation & Depth

Depth is conveyed through subtle shadows and strategic layering rather than dramatic elevation. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. Shadows are always soft and diffuse—never sharp or high-contrast—to maintain the refined aesthetic. Dropdown panels use md shadow with a 1px solid border at #d0d0d0 and 4px border-radius. Modals and overlays employ lg shadow with a semi-transparen

Shapes

The shape philosophy is Soft-Technical: rounded corners are used sparingly and purposefully, never decoratively. Buttons and CTAs use full border-radius (9999px) to create pill-shaped affordances that signal interactivity without softness. Form inputs and dropdowns use DEFAULT radius (0.5rem / 8px) for subtle rounding that feels intentional rather than organic. Cards use DEFAULT radius (8px) to distinguish them from the flat background while maintaining architectural precision. The select dropdown panel uses 4px border-radius to match native form elements. Avoid border-radius on large containe

Components

Action Elements Buttons follow a two-state system: primary (solid black background, white text, 48px height, 12px 24px padding, full border-radius) and secondary (transparent background, black text, 1px black border, same dimensions). Both use label-md typography (12px, 600 weight, uppercase, 0.05em letter-spacing). On hover, primary buttons transition to primary-container (#212121) with a 0.3s ease-in-out timing function; secondary buttons gain a surface-container-high background (#d0d0d0). Links use an underline-reveal animation: a 1px bottom border with transform: scaleX(0) by default, transitioning to scaleX(1) on hover with transform-origin shifting from right to left over 0.3s, creating a left-to-right reveal effect.

Containers & Surfaces Cards use surface-container-lowest (

Do's and Don'ts

**Do**

• Do use black (#000000) as the primary accent for all CTAs, active states, and focus indicators—it is the brand's signature color and must remain consistent.
• Do maintain 1.5 line-height on body text (16px) and 1.0–1.1 on headlines to preserve the architectural precision and readability.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns; never stack multiple shadows or use high-blur values.
• Do use full border-radius (9999px) exclusively on buttons and pill-shaped elements; keep all other components sharp or at DEFAULT (8px).
• Do separate major sections with lg spacing (40px mobile, 64px desktop) to reinforce the minimalist rhythm and prevent visual fatigue.

**Don't**

• Don't introduce accent colors beyond the monochromatic palette—the brand's power lies in restraint, not chromatic variety.
• Don't apply rounded corners to large containers, hero sections, or cards larger than 400px—maintain architectural sharpness for hierarchy.
• Don't use font-weight 300 below 24px; it reduces legibility and undermines the refined aesthetic.
• Don't layer multiple shadows or use blur-radius above 24px; soft, diffuse shadows (blur 8px max) maintain the sophisticated tone.
• Don't exceed 80 characters per line on body text; use the 1280px container max-width and md spacing to ensure comfortable reading rhythm.