Service

Design system

One set of building blocks your whole product is made of: website, app and dashboard. Designers and developers build with the same pieces, so the product grows faster and stays consistent along the way.

  • Colour & typography
  • Buttons
  • Forms
  • Components
  • Dark mode
Let’s talk about your product
Dark mode

Revenue

1–30 September

€11,240+12.4%

Top channels

  • Online store€4,980
  • Mobile app€3,470
  • Marketplace€1,900
  • B2B sales€890

A design system is a shared language for designers and developers: a library of ready-made elements and rules that every screen of the product is built from.

Your product
How it’s built

From a single colour to a whole page

A system grows in layers. The smallest decisions, such as a colour, a spacing value or a typeface, add up to buttons and fields, those add up to bigger blocks, and those to finished screens. A change at the bottom flows through every layer above.

  1. Tokens01Named values: colours, font sizes, spacing, corner radii.
  2. Atoms02The smallest elements: a button, a field, an icon, a switch.
  3. Molecules03Simple combinations of atoms, e.g. a search field with a button.
  4. Organisms04Bigger blocks: a card, a table, navigation.
  5. Templates05The screen layout: which block goes where.
  6. Pages06A finished screen with real content.
The problem

Without a system, every screen is designed from scratch

A new feature, a new screen, new decisions: which shade, which spacing, how big a button. A year later the product has several versions of the “Save” button and three shades of the same colour. Users won’t name it, but they’ll feel it: the product seems less polished, and the team loses time agreeing which version is the right one.

  • 3 different primary buttons
  • 4 corner radii
  • 3 shades of one colour
Foundations

Colour

Every colour has a name, a role and nine shades. Nobody picks “some blue”. You reach for a token that tells you where it belongs.

Brand9Primary actions, links and highlights.
100
100#edecff
200
200#d4d3ff
300
300#b5b4ff
400
400#908fff
base
500#6563ff
600
600#5755d8
700
700#4847b2
800
800#3a398b
900
900#2d2c69
Neutral9Text, backgrounds, lines and surfaces.
100
100#eeeeef
200
200#d7d7d9
300
300#bababf
400
400#97989f
base
500#6f7079
600
600#5f6068
700
700#4f5056
800
800#3f4045
900
900#313136
Success9Confirmations and positive states.
100
100#e4f1e9
200
200#c0decc
300
300#93c7a8
400
400#5cab7d
base
500#1d8a4a
600
600#1a7640
700
700#176136
800
800#144d2d
900
900#123b24
Warning9Things that need attention.
100
100#f8ede1
200
200#eed5b9
300
300#e2b787
400
400#d3944b
base
500#c26a05
600
600#a55b06
700
700#874c08
800
800#6a3c09
900
900#512f0a
Error9Errors and irreversible actions.
100
100#f6e5e4
200
200#eac2c0
300
300#db9793
400
400#c8635d
base
500#b3261e
600
600#98221b
700
700#7d1d19
800
800#621916
900
900#4b1513

Colours with roles

Screens don’t use shades directly. They use roles: “background”, “secondary text”, “action”. That makes dark mode a different set of values for the same roles, not a second design.

Light
  • Background#F4F4F5
  • Surface#FFFFFF
  • Text#131311
  • Secondary text#6F6F6A
  • Line#E5E5E6
  • Action#6563FF
Dark
  • Background#141518
  • Surface#1D1E23
  • Text#F5F4F0
  • Secondary text#9A9A94
  • Line#2E3036
  • Action#7F7DFF
Foundations

Typography

One typeface, a few weights and a fixed type scale. Every piece of text in the product has its place in the hierarchy.

General Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

  • Regular400
  • Medium500
  • Semibold600
  • Bold700
  • DisplayClear layout, readable text
  • Heading 1Clear layout, readable text
  • Heading 2Clear layout, readable text
  • Heading 3Clear layout, readable text
  • Body largeBody text, where most of the content is read. It has a comfortable line length and line height that’s easy on the eye.
  • BodyBody text, where most of the content is read. It has a comfortable line length and line height that’s easy on the eye.
  • CaptionBody text, where most of the content is read. It has a comfortable line length and line height that’s easy on the eye.
Foundations

Icons

A shared 24×24 grid and one stroke weight. Every new icon looks like it was part of the set from the start.

Stroke: 1.75

Icon set

Icons inherit the text colour, so they adapt to the element’s state and to dark mode on their own.

Foundations

Spacing & radius

A fixed scale of spacing and radii creates rhythm. Every value is a token, so screens line up predictably, with no eyeballing.

0
2
4
6
8
12
16
20
24
32
40
48
64
80
96

Spacing

Margins and padding take their values from the scale. On the card, every gap is one of the tokens.

# 6→space-6→24px

Corner radius

A few radii instead of any value. Small elements get a smaller one, cards and dialogs a bigger one.

0
4
8
12
16
24
full
Foundations

Shadows

A few levels of depth instead of random shadows. The higher an element sits, the more important it is at that moment.

Noneshadow-0
Smallshadow-1
Mediumshadow-2
Largeshadow-3
Dialogshadow-4
Components

Buttons

One component, many situations. Size, type, state and icons are properties. Designers switch them in Figma, developers in code, and the result always matches.

Variants and states

Every combination of type and state is designed up front. Nobody has to guess what a disabled or hovered button looks like.

LargeHeight: 48px
DefaultHeight: 40px
SmallHeight: 32px
Extra smallHeight: 28px
FilledTonalOutlineText
Default
Hover
Pressed
Focus
Disabled
Button
Left icon
Right icon

Change the properties. This is how the component works in Figma and in code.

Components

Form fields

Label, field, helper text and error message work as one. A form behaves the same at sign-up, at checkout and in settings.

Field anatomy

A field can have an icon, a button, a dropdown or a prefix, always with the same spacing.

States and variants

Default, hover, typing, focus, error and disabled, all in two styles.

OutlineFilled
Default
Hover
Typing
Focus
ErrorThis field is requiredThis field is required
Disabled
Components

Component library

Ready-made elements built on shared tokens. Each follows the same spacing, sizing and state rules, in dark mode too.

  • ButtonsSemantic colours and every state.
  • FieldsLabel, field, help and validation.
  • ANProject2
    ChipsFilters, tags and multi-select.
  • ANPKML+5
    AvatarsPeople and teams, with status.
  • ProjectsReport
    BreadcrumbsShow users where they are.
  • NewNew
    BadgesStatus, priority or category.
  • 123…12
    PaginationNavigating long lists.
  • SelectionCheckboxes, radios and switches.
  • Tooltip
    TooltipsContext without interruption.
  • …and 20+ more
Components

Status badges

Status, priority or category, always in the same semantic colours. Green means “done” on every screen of the product.

FilledTonalBareOutline
BrandBadgeBadgeBadgeBadge
NeutralBadgeBadgeBadgeBadge
SuccessBadgeBadgeBadgeBadge
ErrorBadgeBadgeBadgeBadge
WarningBadgeBadgeBadgeBadge
In practice

Building blocks become whole screens

The table below isn’t a separate design. It’s fields, buttons, avatars, badges and pagination from the same library, assembled into a new view in hours, not days.

Team: allStatus: active
PersonStatusTeamEmailTags
ANAnna NowakProduct DesignerActiveProductanna@example.comResearchFigma+2
PKPiotr KowalskiFrontend DeveloperActiveEngineeringpiotr@example.comReactUI
MLMarta LisProduct ManagerOn leaveProductmarta@example.comStrategy+1
TMTomasz MazurMarketingOnboardingMarketingtomasz@example.comSEOResearch
EKEwa KaczmarekBackend DeveloperActiveEngineeringewa@example.comAPIReact+3
JWJan WronaCustomer SuccessInactiveSupportjan@example.comSupport
1–6 of 128Per page: 6123…22

One component, many places

The widget adapts to its width. In a dashboard, in an app and on a phone it keeps the same rules.

Revenue

1–30 September

€11,240+12.4%

Top channels

  • Online store€4,980
  • Mobile app€3,470
  • Marketplace€1,900
  • B2B sales€890

Revenue

1–30 September

€11,240+12.4%

Top channels

  • Online store€4,980
  • Mobile app€3,470
  • Marketplace€1,900
  • B2B sales€890
One change, everywhere

Change one value and the whole product follows

Colours, corner radii and typefaces are stored as tokens: named values that every component uses. Changing a token flows through the entire product at once, without combing through hundreds of screens. Dark mode, a rebrand or a version of the product for another brand work the same way: the tokens change, the screens stay.

Brand colour
Mode
Corners
Typeface
Tokenscolor.action:#6563FFmode:lightradius.control:10pxfont.family:General Sans
DesignSystemAN

Revenue

1–30 September

€11,240+12.4%

Top channels

  • Online store€4,980
  • Mobile app€3,470
  • Marketplace€1,900
  • B2B sales€890
NewNew
What you gain

Fewer decisions on every screen, more time for what’s new

  1. Faster delivery

    A new screen is assembled from ready-made pieces. The team designs and builds what’s new, not the same form for the fifth time.

  2. A consistent brand

    Users see one product, not a collection of screens made by different people in different months.

  3. Cheaper changes

    Changing a colour, a typeface or a corner radius is one fix in the system, not an audit of the whole app.

  4. Fewer design-to-code fixes

    Designers and developers call the same elements by the same names. Fewer “it was supposed to look different” moments.

  5. Accessibility from the start

    Contrast, touch target sizes and focus states are checked once, in the system. Every new screen inherits them automatically.

  6. Easier onboarding

    A new developer, agency or freelancer gets ready-made rules instead of guessing from existing screens.

When it makes sense

Not every project needs a design system

It’s worth it when…

  • the product will be developed for months and years, not handed over once
  • several people or several teams work on it
  • you have more than one platform, e.g. a website, an app and a dashboard
  • you sell the product under different brands or are planning a rebrand
  • developers keep asking: “which button is this, exactly?”

Not yet, when…

  • you need a single website or landing page
  • you’re building an MVP to test an idea, in which case solid foundations are enough: colours, typography and a few components, which we’ll expand once the product proves itself
How I work

From audit to a library the whole team uses

  1. 01

    Audit

    I gather everything that already exists: screens, styles, components in code. I count the variants and show where the product drifts apart.

  2. 02

    Foundations

    I define the tokens: a colour palette with roles, a type scale, spacing, corner radii and shadows.

  3. 03

    Components

    I design the library in Figma: every element with all its variants and states, ready to use in new screens.

  4. 04

    Documentation & handover

    I write down the usage rules and hand the system over to developers, so that names and tokens in Figma match the ones in code.

What you get

  • A component library in Figma
  • Tokens ready to move into code
  • Usage documentation
  • Support for your team during implementation

Is your product growing faster than its consistency? Let’s talk.

Get in touchBack to the home page