The website, in parts

Design System

A shared language for meaningful experiences. Explore the foundations, components, and how they work together.

5 foundation groupsInteractive components

01 / Foundations

Foundations

The complete set of specimens on 01 - Foundations in Figma.

Iconography

All 30 families, including each size and Grey / Color variation.

Arrow Up Right

xxxlg
80px

xxlg
64px

xlg
48px

lg
24px

md
16px

sm
14px

Arrow Up Flat

Large
24px

Small
16px

Large
24px

Small
16px

Primitive Palette

Neutral, State and Accent colors. White 12% is shown over the dark canvas to make its opacity visible.

Neutral

State

Accent

Text Styles

All 17 specimens, labelled by their linked Figma style. The final four layers are named “Body/Small” in Figma but reference Navigation styles.

Headings/H1

Zalando Sans Expanded · 900
64px / 72px · Uppercase

Headings/H1

Headings/H1 Alt

Zalando Sans Expanded · 900
64px / 72px · Original case

Headings/H1 Alt

Headings/H2

Zalando Sans Expanded · 900
36px / 40px · Uppercase

Headings/H2

Headings/H3

Zalando Sans Expanded · 900
24px / 36px · Uppercase

Headings/H3

Headings/H4

Zalando Sans Expanded · 900
32px / 48px · Original case

Headings/H4

Headings/H5

Zalando Sans Expanded · 900
18px / 24px · Uppercase

Headings/H5

Headings/H6

Zalando Sans Expanded · 400
12px / 16px · Uppercase

Headings/H6

Display/Large

DM Sans · 400
40px / 64px · Original case

Display/Large

Display/Medium

DM Sans · 300
32px / 48px · Original case

Display/Medium

Display/Small

DM Sans · 500
20px / 36px · Original case

Display/Small

Body/Large

DM Sans · 500
20px / 36px · Original case · Underlined

Body/Large

Body/Medium

DM Sans · 400
16px / 32px · Original case

Body/Medium

Body/Small

Zalando Sans Expanded · 900
14px / 24px · Original case

Body/Small

Navigation/Large Paragraph Link

DM Sans · 500
20px / 36px · Original case · Underlined

Navigation/Medium Paragraph Link

DM Sans · 500
16px / 24px · Original case · Underlined

Navigation/Small Paragraph Link

DM Sans · 500
14px / 24px · Original case · Underlined

Navigation/Navigation Link

Zalando Sans Expanded · 900
40px / 48px · Original case

Grid System

Five centered column grids. Diagrams scale to fit; the table gives exact Figma dimensions in pixels.

mobile-portrait (320px)

mobile-landscape (480px)

tablet-portrait (768px)

tablet-landscape (1024px)

default-desktop (1440px)

Viewport	Columns	Column	Gutter	Margin	Content	Frame height
320px	6	44px	8px	8px	304px	900px
480px	12	30px	8px	16px	448px	900px
768px	12	54px	8px	16px	736px	900px
1024px	12	68px	16px	16px	992px	900px
1440px	12	94px	24px	24px	1392px	900px

CSS Spacing Scale

All 20 values from the Figma scale, shown at their actual CSS width.

02 / Components

Components

Explore the reusable controls and patterns used across the website.

02 / Interaction

Controls

Hover, press, or use Tab to inspect native states. Disabled examples cannot be activated.

ButtonMain

Primary · Secondary · Icon left / right · Disabled

Primary Secondary Trailing icon

Leading icon

<ButtonMain hierarchy="primary" href="/">Return Home</ButtonMain>

ButtonIcon

Primary · Secondary · Tertiary / Large 48px · Small 32px

primary

secondary

tertiary

<ButtonIcon version="tertiary" size="large" aria-label="Go to components" href="#components" icon="/assets/icons/arrow-up-right.svg" />

ButtonAccordion

The owning component controls the panel and expanded state.

How does this component work?

A single button controls this panel. Activate it with a click, Enter, or Space. The content stays readable when JavaScript is unavailable.

Unavailable section

<ButtonAccordion aria-expanded="true" aria-controls="panel">Section title</ButtonAccordion>

03 / Detail

Text & feedback

ParagraphLink

Mode describes text color. Each surface shows large, medium, small and disabled links.

light text

large paragraph link medium paragraph link small paragraph linkDisabled link

dark text

large paragraph link medium paragraph link small paragraph linkDisabled link

<ParagraphLink mode="light" size="medium" href="/legal/">Privacy & Cookie Policy</ParagraphLink>

Tooltip

Hover or focus the example to reveal its label.

<span class="tool" tabindex="0" data-tooltip-owner aria-describedby="tip">Figma<Tooltip id="tip" title="Design and prototyping" /></span>

LegalText

Paragraph content with automatic links for the policy’s known destinations.

Read more at andreaschristofi.com or contact hello@andreaschristofi.com.

<LegalText text="Contact hello@andreaschristofi.com." size={16} />

04 / Together

Patterns

Simple Accordion

Collapsed and expanded examples. Each item toggles independently with a click, Enter, or Space. View in Figma.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus erat at augue consectetur, eget laoreet lacus dapibus. Ut volutpat erat sit amet nisl lacinia, non maximus lorem luctus.

<SimpleAccordion id="example" title="Card title" content="Your content" />
<SimpleAccordion id="expanded-example" title="Card title" expanded>
  <p>Rich content can go in the default slot.</p>
</SimpleAccordion>

Process/Step

Explore, Design, Build and Ship. Select any card to view its details. View in Figma.

Research, Planning & Strategy

Understanding the problem starts with research, analysis and strategic planning, aligning user needs, business goals and project requirements around a clear direction.

Ideation, UX & Visual Design

Insights take shape through concepts, user flows and intuitive interfaces that balance usability, visual craft and business objectives. Interactive prototypes bring key ideas to life, allowing flows, behaviours and assumptions to be tested and refined before development begins. From there, design moves into implementation through close collaboration and careful attention to responsive behaviour, interaction details and the overall quality of the experience.

Web Development & Implementation

Approved designs and prototypes are translated into responsive, production-ready experiences using modern web technologies, with careful attention to performance, accessibility, interactions and design fidelity.

Launch, Measure & Improve

The final experience is prepared for release through quality assurance, final refinements and implementation checks. After launch, feedback, performance insights and real-world usage help identify opportunities for optimisation, iteration and continuous improvement.

<ProcessStep id="process-example" />

SocialLinks

Profile destinations open in a new tab. Surface selects the matching icon-button style.

Dark surface

Light surface · Menu order

<SocialLinks surface="dark" />

ContactPopup

Open the dialog, then close it with its close button or Escape. Focus returns to the trigger.

Email AndreasThe dialog preview requires JavaScript.

<ContactPopup id="contact-dialog" />
// Open the native dialog with showModal().

05 / Structure

Site shell

This page uses Header and PageLoader through BaseLayout. Open the menu above to explore it. The footer is omitted on this page.

BaseLayout

The shared document, metadata, fonts, header, main content and optional footer.

src/layouts/BaseLayout.astro

<BaseLayout title="Page title" description="Page summary" showFooter={false}>
  <!-- Page content -->
</BaseLayout>

Hero, Process and Experience are composed homepage sections. Explore them on the homepage.