Contact
Start a project hello@soviljdesign.com
EnglishENSrpskiSR
Design systems

Design systems your team will actually use

Components, tokens and documentation that make every new screen faster and more consistent, for designers and developers alike.

We make: Component library, Design tokens, Documentation, Figma library, Theming, Audit

Start a project How we work
tokens.css
Preview
NewDesign system
Click the preview to change theme
How we start Interface audit

We inventory what exists before deciding what the system needs.

Selected work

All projects(08)

You’re here if any of this sounds familiar

Twelve shades of the same button

Every designer and developer made their own version. Now nobody knows which one is right.

Every screen takes too long

Simple features take weeks because each screen is designed and built from zero.

Design and code drifted apart

The Figma file says one thing, production says another, and fixing it keeps slipping.

What we design

A system is more than a component file. We cover the parts that make it stick.

01 / 04

Design tokens

Color, type, spacing and radius as named decisions that map one-to-one to code.

  1. Color roles01
  2. Type scale02
  3. Spacing and radius03
  4. Themes and modes04
  5. Code export05

How we work

Clear stages with a result at the end of each. Weekly demos, so feedback comes during the work, not after.

  1. 01

    Audit

    1 week

    We collect every button, input and color in use and show where the inconsistencies are.

    What you get
    • UI inventory
    • Audit report
  2. 02

    Foundations

    1–2 weeks

    Tokens for color, type, spacing and elevation, agreed with engineering.

    What you get
    • Tokens
    • Theming
  3. 03

    Components

    2–4 weeks

    The core set first, then the long tail, each with variants, states and rules.

    What you get
    • Library
    • States
    • A11y notes
  4. 04

    Documentation

    1–2 weeks

    Guidelines and examples in a format your team already reads.

    What you get
    • Guidelines
    • Examples
  5. 05

    Adoption

    ongoing

    Pilot screens, workshops and support while the team switches over.

    What you get
    • Pilot
    • Workshops

Our approach

  1. 01

    Start from what exists

    We don’t throw away years of work. The system grows out of your product, not a template.

  2. 02

    One source of truth

    Token names and component APIs match between Figma and code.

  3. 03

    Made to evolve

    Clear ownership and a contribution model keep the system alive after we’re done.

Who we work with

  • Growing products

    Teams adding features faster than they can keep the UI consistent.

  • Multi-product companies

    Several products that should feel like one brand.

  • Engineering-led teams

    Who want a system developers enjoy using, not just a nice Figma file.

Other services

Product & web designWeb apps, platforms and marketing sites Dashboards & dataData-heavy interfaces people can read at a glance Brand identityLogo, visual system and brand guidelines

Design systems questions

Answers to what people ask most before we start.

Do you build the coded components too?

We design and specify them and work closely with your developers who build them, so design and code stay aligned.

Can we start small?

Yes. Foundations and a core set of components already bring most of the speed-up.

Which tools do you use?

Figma for the library and tokens exported in a format your stack can consume.

How do we keep it up to date?

We set up ownership, a changelog and a simple contribution process before we hand it over.

Let’s build something people understand.

Prefer a direct line? Write an email and you’ll hear back from a real person, not a form robot.

DSDragan BēPortfolio
Contact and project details
Estimated budgetoptional

Only your name and email are required. See our Privacy Policy.