Arte Antwerp

Overview

Arte Antwerp is a premium Antwerp-based menswear brand that fuses streetwear soul with architectural minimalism. The design system embodies a high-contrast, monochromatic aesthetic rooted in European modernism—think clean lines, deliberate negative space, and uncompromising typography. The brand personality is confident, understated, and intellectually rigorous: every pixel serves a purpose. The UI evokes a gallery-like precision, where product imagery and editorial content breathe within a disciplined grid. Voice: direct, never apologetic, occasionally wry. Example: 'New season. Same uncompromising standards.'

Colors

The color palette operates on a principle of maximum contrast and intentional restraint. Primary (#000000) is the dominant force—used on all CTAs, navigation, and critical UI elements—creating an immediate visual hierarchy that demands attention. On-primary (#ffffff) ensures legibility at all scales. Secondary (#374471), the brand's signature Arte Blue, appears in accent contexts (badges, hover states, secondary navigation) and reinforces brand identity without competing with black. Tertiary (#0071ce), a vivid electric blue, is reserved for interactive states, links, and moments requiring visual distinction. Surface colors range from pure white (#ffffff) at surface-bright down to #d0d0d0 at surface-container-highest, providing a subtle gray scale for layering without introducing true grays

Typography

The type system prioritizes clarity and hierarchy through weight and scale rather than decorative flourishes. Neue Haas Grotesk Display Pro (fontWeight: 500, fontSize: 40–60px) anchors headlines with geometric precision and negative space. Haas Grot Text 55 Roman (fontWeight: 400, fontSize: 16–18px) serves body copy and UI labels, delivering a neutral, contemporary voice. Work Sans (fontWeight: 400, fontSize: 12–14px) handles micro-interactions and metadata. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain tightness and visual weight. Line-height is set conservatively (1.2–1.4 unitless) to reinforce the compact, gallery-like aesthetic. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on white text over photographic backgrounds to ensure legibility without introducing

Layout

The layout operates on a 12-column grid with a max-width of 1280px, maintaining fluidity on mobile while anchoring desktop experiences. Gutter spacing is 24px (md), creating breathing room between content blocks without excessive whitespace. Section separation uses lg spacing (40px) to establish clear visual rhythm. Container padding follows the gutter scale: 24px on desktop, 12px on tablet, 8px on mobile. The design favors asymmetrical layouts and unexpected negative space—product grids may be 3 columns on desktop but collapse to single-column on mobile without intermediate breakpoints, reinforcing the brand's decisive aesthetic. Margin collapse is avoided through consistent use of padding on parent containers.

Elevation & Depth

Depth is conveyed through shadow and layering rather than color shifts. Level 1 (Base): no shadow, flat surface at #ffffff. Level 2 (Cards, Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating subtle separation. Level 3 (Floating elements, Dropdowns): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals and overlays. Hover states on cards elevate to Level 2 shadow. No blur effects or glassmorphism; shadows are sharp and directional, consistent with the architectural aesthetic. Borders (1px solid #e5e5e5) define container edges when shadow alone is insufficient.

Shapes

The shape philosophy is 'Architectural Sharpness'—a commitment to 0px border-radius as the default, reflecting the brand's European modernist roots and gallery-like precision. Buttons and primary CTAs use 0px radius, creating a stark, decisive appearance. Input fields receive 4px (0.25rem) radius for subtle approachability without compromising the sharp aesthetic. Modals and floating panels use 8px (0.5rem) radius to signal elevation and separation from the main canvas. Badges and pills use 9999px (full) radius only when semantic meaning demands it (e.g., notification counts). This tiered appr

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: #000000, textColor: #ffffff, padding: 12px 24px, height: 48px, fontSize: 14px, fontWeight: 400, with 0px border-radius. On hover, background shifts to #1a1a1a (primary-container) for tactile feedback. Transition: background-color 0.15s ease-out. Button-secondary is transparent with a 1px solid #727272 border, textColor: #000000. On hover, backgroundColor becomes #e5e5e5 (surface-container-high). Both buttons use Work Sans at 14px, maintaining consistency with label-md typography.

Containers & Surfaces Cards (card component) have backgroundColor: #ffffff, rounded: 4px, padding: 24px, with a 1px solid #e5e5e5 border. On hover (card-hover), backgroundColor shifts to #f5f5f5 and boxShad

Do's and Don'ts

**Do**

• Do use #000000 (primary) for all CTAs, navigation, and critical interactive elements—it is the brand's visual anchor.
• Do maintain 0px border-radius on buttons and cards to reinforce architectural precision and European modernism.
• Do apply 24px (md) gutter spacing consistently; it is the rhythm of the system.
• Do use Neue Haas Grotesk Display Pro for headlines (40px+) and Haas Grot Text 55 Roman for body (16–18px) to maintain typographic hierarchy.
• Do layer shadows (Level 1 / Level 2 / Level 3) to convey elevation; never use color shifts or blur alone.
• Do reserve #374471 (Arte Blue) for secondary accents and badges; it is a supporting color, not a primary.
• Do use Work Sans at 12–14px for micro-interactions, metadata, and labels to signal hierarchy.

**Don't**

• Don't introduce rounded corners (border-radius > 4px) on buttons or primary cards; it dilutes the architectural aesthetic.
• Don't use color alone to convey state changes; pair color shifts with shadow elevation or border changes.
• Don't exceed 1280px container max-width; the system is designed for focused, gallery-like layouts.
• Don't apply text-shadow or blur effects on body copy; reserve shadows for interactive elements and modals only.
• Don't mix typefaces within a single component; each role (display, headline, body, label) has a designated family.
• Don't use gradients or transparency on primary surfaces; maintain stark, high-contrast relationships.
• Don't apply letter-spacing > 0.02em on body text; the system favors tightness and visual weight.