Skip to content
TREN
Start a project

Design system

We design buttons, forms and cards once and use them on every page so everything looks like one brand.

Typical targets; the real figure is measured in the pilot.

  • One sourceshared values for design and code
  • Less reworktarget of using ready parts on new pages
  • Mobile firstcomponent approach

The problem

Every page of your site looks a little different. Adding a new page means redoing buttons, headings and spacing. When several people work on it, screens come out that do not match.

Who it is for

  • Owners of growing sites and apps
  • Companies with several sites or products
  • Teams where designers and developers work together
  • Those who often add new pages or campaigns
  • Projects whose interface has become scattered

What it does

  1. Design values

    Decisions on colour, text size, spacing and corner radius are written once. The same values are used everywhere.

  2. Component library

    Parts such as buttons, form fields, cards, menus and alerts sit ready in Figma. New screens are built from them.

  3. Counterpart in code

    The same parts are written in code as ready components. What you see in design matches what is on the site.

  4. Light and dark theme

    If you want, the same system works with two themes. Users see the one that suits their screen.

  5. Usage guide

    We prepare a short guide showing which part to use when. A newcomer can apply it too.

  6. Pulled from your current site

    We scan the parts you already use, remove the inconsistent ones and gather them into the system.

How we deliver it

  1. 01

    Seeing the current state

    We take an inventory of your site and screens. We show which parts repeat and where inconsistencies are.

  2. 02

    Core rules

    We set colour, type, spacing and corner rules and get your approval.

  3. 03

    Components

    We prepare the shared parts in Figma and in code. We test them by rebuilding a few real pages with them.

  4. 04

    Guide and handover

    We write the usage guide and give your team a short walkthrough. From then on the system is yours.

Works with

  • Figma
  • Storybook
  • Next.js
  • React
  • Tailwind CSS

Questions

Is it needed for a small site?

For a site of five or six pages it is often not necessary, a light version is enough. It pays off as the site grows or when you have several products.

How long does it take?

It depends on scope. A small system usually takes 2 to 4 weeks. It takes longer as the number of parts grows.

Will my current site break?

No. We first build the system separately, then move pages onto it step by step. We test each step.

Can another team use it too?

Yes. That is why the guide and the organised files are prepared. A new designer or developer can use the system on their own.

More from this service

Design

Design system

Ask for a free analysis