Building a design systemfor a more connected workflow

Overview

The work

01

Turning visual identity into a system

I work on translating brand decisions into a structured design system, including color, typography, spacing, variables, and reusable components.

Figma serves as the visual foundation, while documented design rules and tokens help make those decisions accessible beyond individual design files.

The goal is to create a system that can grow, remain consistent, and support different types of digital experiences.

ObjectStyle Sports Foundations

Drawn in code from the documented tokens

Color colors.json

• Sport Main#0031FFbrand/sport-mainPrimary Sports accent
• Secondary#00B9FFbrand/sport-secondaryRole not formally defined
• Woman#DBFE02brand/sport-womanWoman Sport contexts only

#FF3B00 brand/objectstyle-main — the parent ObjectStyle orange, kept apart from the Sports accents.

• 1000#000000
• 900#040309
• 800#19181E
• 700#222127
• 600#37363C
• 500#4B4A50
• 400#68676D
• 300#A7A6A9
• white#FFFFFF

Typography typography-*.json

font-family/Druk · Display

Druk Wide Bold

font-family/Zalando · Text

Zalando Sans carries body copy and supporting text, set in sentence case for easy reading.

• font-size/1000Aa70 / 60 / 40
• font-size/900Sport40 / 36 / 24
• font-size/800Sport34 / 34 / 20
• font-size/700Sport24 / 24 / 20
• font-size/500Body copy16 / 16 / 16
• font-size/400Body copy14 / 14 / 14

px: desktop / tablet / mobile. Sizes are shown scaled to fit; values are the documented ones.

Spacing spacing.json

• spacing/14
• spacing/28
• spacing/312
• spacing/416
• spacing/524
• spacing/632
• spacing/748
• spacing/864
• spacing/980
• spacing/10120

px, drawn at 2×. spacing/0 is 0.

Components sport-main-button

DefaultHoverActive

Default200 × 50 px

LABEL20050

LABEL

LABEL

Small160 × 40 px

LABEL16040

LABEL

LABEL

• Fill background/background-invert
• Label brand/sport-main
• Padding 20 px horizontal
• Gap 8 px
• Radius none

02

Connecting design and AI

An important part of the work is exploring how design systems can support AI-assisted production. This creates opportunities for closer collaboration between design, marketing, and development.

By connecting design documentation, structured tokens, and tools such as Claude, we're developing workflows that make it easier to translate visual decisions into consistent digital interfaces.

1. 01Visual foundation

   Figma

   • Variables
   • Text styles
   • Components
2. Define

3. 02Shared rules

   Design Tokens + Documentation

   • colors.json
   • spacing.json
   • typography.json
   • design-system/*.md
4. Document

5. 03Being explored

   Claude

   • Reads the tokens
   • Follows the written rules
6. Generate

7. 04Output

   Digital Interfaces

   • Digital experiences
   • Marketing materials
   • Service landing pages

03

From foundations to real applications

The system is intended to support practical work, including digital experiences, marketing materials, and service landing pages.

Rather than treating each new project as an isolated design exercise, the approach is to establish shared foundations that can be reused and extended.

My approach

Brand, design and development work best from the same source of truth, so that is where I start.

1. 01

   Foundations before screens

   Color, typography and spacing are defined once, as variables, before any page depends on them.

2. 02

   Documented, not only designed

   Decisions live in written rules and tokens as well as in Figma files, so they are accessible to anyone who needs them.

3. 03

   Built to be reused

   Rather than treating each project as an isolated exercise, shared foundations are extended as new needs appear.

4. 04

   AI as part of the process

   I’m exploring how Claude can use that documentation to translate visual decisions into interfaces. The workflow is still taking shape.