A

Design Rationale

The thinking behind the decisions

Design Direction · 2026

Less template.
More intention.

The RGL Showcase component was designed to break away from the conventions that make most e-commerce feel interchangeable. The direction draws on the rigour of Swiss Design and the restraint of iOS's Human Interface Guidelines — two systems that proved, decades apart, that confidence doesn't need decoration.

01 — Swiss Grid

Structure as Visual Language

Inspired by the International Typographic Style, the layout is built on a strict grid with a clear axis: product on the left, meaning on the right. Every element occupies its position for a reason. Nothing floats. Nothing fills space for decoration. The grid itself communicates precision — which is exactly what a craft product demands.

Influence: Müller-Brockmann · Armin Hofmann

02 — Negative Space

What You Remove Is the Design

In 2026, the dominant visual fatigue comes from density. Every scroll is full of competing stimuli. The counter-move — generous white space, minimal UI chrome, no decorative clutter — forces the product to carry all the visual weight. The page doesn't compete with the sneaker. It presents it. Space is the most expensive thing on a web page, and here we spend it deliberately.

Influence: Dieter Rams · Apple HIG

03 — iOS Core

Interaction That Feels Inevitable

Micro-interactions borrow from Apple's core philosophy: transitions should feel inevitable, not theatrical. The image scales subtly on hover. The CTA lifts 5px and shifts to rust — never a dramatic transformation, always a confirmation. The user should feel in control, never surprised. Feedback is present, but never loud.

Influence: iOS HIG · Material Motion Principles

04 — Type as Architecture

Two Voices in Conversation

The typographic system pairs Inter's geometric precision — at heavy weights, with tight tracking — against Playfair Display's editorial warmth. The result is a voice that's confident without being cold, and emotional without being vague. This contrast is the personality of the brand made visible: handcrafted craftsmanship expressed in modern form.

Influence: Editorial print design · Luxury fashion

"Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials."

Dieter Rams — 10 Principles of Good Design

Visual Influences

Swiss International Style

Grid-first thinking, objective typography, asymmetric yet disciplined layouts. The idea that the structure itself communicates meaning before a single word is read.

Apple Human Interface

Deference, clarity, depth. The UI steps back to let content lead. Animations are purposeful: they orient, they confirm, they don't perform.

2026 Minimal Luxury

The dominant shift in premium DTC brands: moving away from maximalist content grids toward singular, large-format product moments that demand attention through restraint.

Decisions Made — Rejected vs. Chosen

Gradient hero background

→

Flat white with drop-shadow on product

The product earns depth. The background doesn't need to.

Multiple accent colors

→

Single rust accent used sparingly

One warm tone against black and gray reads as intentional, not branded.

Animated section reveals (scroll-triggered)

→

Static layout, hover micro-interactions only

Scroll animations have become template noise. Stillness commands more attention.

Rectangular CTA button

→

Full-radius pill button

The pill form softens the assertiveness of all-caps text — confidence without aggression.

Accordion or tabbed specs

→

Flat linear spec list, always visible

Hidden information creates doubt. The customer should never need to hunt for quality signals.

Single typeface (all Inter)

→

Inter 800 + Playfair Display italic

Contrast in voice creates rhythm. The serif italic is the brand's emotional register — used once, for maximum effect.

Colors

8 tokens

Dark

#000000

--dark · Primary text, CTA bg

Gray

#666666

--gray · Body, spec values

Rust

#A64B35

--rust · Label, CTA hover

White

#ffffff

Section background

Off-White

#fcfcfc

Visual panel bg

Border

#eeeeee

Spec row dividers

Muted

#999999

Shipping note, hints

Hover Surface

#fafafa

Spec row hover bg

Name	Hex	CSS Token	Use case
Dark	`#000000`	`--dark`	Primary text, CTA background, headings
Gray	`#666666`	`--gray`	Body copy, spec values, italic title
Rust	`#A64B35`	`--rust`	Section label accent, CTA hover
White	`#ffffff`	—	Section background, CTA label color
Off-White	`#fcfcfc`	—	Image/visual panel background
Border	`#eeeeee`	—	Spec list dividers, section border-top
Muted	`#999999`	—	Shipping note, tertiary labels
Hover Surface	`#fafafa`	—	Spec row hover background

Typography

8 styles

Style Name	Font	Token	Preview
Display Heading clamp(32px–55px) · 800 · -0.04em	`Inter 800`	`.rgl-s-title`	Unmistakable.
Italic Accent Same size · Playfair 400i	`Playfair 400i`	`.rgl-s-title i`	Unmistakable.
Section Label 10px · 700 · 5px tracking	`Inter 700`	`.rgl-s-label`	Product Specifications
Body Copy 16px · 400 · 1.6 line-height	`Inter 400`	`.rgl-s-intro-copy`	A refined sneaker designed to move between worlds.
Spec Name 13px · 700 · uppercase · 1px tracking	`Inter 700`	`.rgl-s-spec-name`	Materials
Spec Value 13px · 400 · #666	`Inter 400`	`.rgl-s-spec-value`	Premium full-grain white leather
Shipping Note 9px · 400 · uppercase · 1px tracking	`Inter 400`	`.rgl-s-shipping-note`	Global shipping available worldwide
CTA Label 11px · 700 · uppercase · 3px tracking	`Inter 700`	`.rgl-s-btn-primary`	Select Your Size

Spacing & Layout

7 tokens

--spacing

clamp(60px, 10vw, 140px)

Section top/bottom padding

grid-gap

100px (desktop)

Column gap in 2-col grid

container-pad

0 10%

Horizontal container padding

spec-row-py

20px

Spec list item top/bottom

label-mb

25px

Label → title margin

cta-gap

30px

CTA button → shipping note

max-width

1500px

Container max-width

Motion

5 transitions

Property	Duration	Easing	Speed	Element & trigger
`transform: scale(1.05)`	`0.8s`	`ease`	Slow	Hero image — hover on `.rgl-s-visual-main`
`translateY(-5px)`	`0.5s`	`ease`	Medium	CTA button lifts on hover
`background → --rust`	`0.5s`	`ease`	Medium	CTA background shifts to rust on hover
`background #fafafa`	`0.3s`	`—`	Fast	Spec row hover background fade
`drop-shadow(0 30px 60px…)`	Static	—	—	Always-on filter shadow on hero image (rgba 0.05 opacity)

Buttons

2 states

Component	Token	Preview	Specs
Primary CTA Default state	`.rgl-s-btn-primary`		bg: #000 · color: #fff · padding: 22px 60px · radius: 100px · shadow: 0 15px 30px rgba(0,0,0,0.1)
Primary CTA Hover state	`.rgl-s-btn-primary:hover`		bg: var(--rust) · transform: translateY(-5px) · transition: all 0.5s ease

Spec List

3 states

Component	Token	Preview	Specs
Spec Row Default	`.rgl-s-spec-item`	Origin Handmade in Portugal	py: 20px · border-top/bottom: 1px #eee · space-between
Spec Row Hover	`:hover`	Artistry Signature Tatreez embroidery	background: #fafafa · transition: 0.3s
Spec List Full example	`.rgl-s-spec-list`	MaterialsPremium full-grain leather OriginHandmade in Portugal ArtistrySignature Tatreez embroidery	margin-bottom: 60px · border-top: 1px #eee

Labels & Tags

4 variants

Component	Token	Preview	Specs
Section Label	`.rgl-s-label`	Product Specifications	10px · 700 · uppercase · 5px tracking · color: --rust
Spec Name	`.rgl-s-spec-name`	Materials	13px · 700 · uppercase · 1px tracking · color: --dark
Shipping Note	`.rgl-s-shipping-note`	Global Shipping Available Worldwide	9px · 400 · uppercase · 1px tracking · max-width: 120px · color: #999
Badge – Rust	—	Handmade in Portugal	Derived from brand rust color · use for highlight tags

Grid

2 breakpoints

Breakpoint	Condition	Layout	Token
Desktop	`> 1024px`	Image Content 1fr 1fr · gap: 100px · padding: 0 10%	`.rgl-s-container`
Tablet / Mobile	`≤ 1024px`	Image Content 1fr · gap: 60px · text-align: center	`@media max-width: 1024px`