Utopia design system

A copy (sort of) of the fresk.digital website with Utopia and the Cube CSS methodology. Inspired by this talk of Andy Bell.

All styles in the page below are first reset, then applied to ensure there are no project related styles.

Creating meaningful digital products, strategies and services for professionals

At fresk.digital we empower organisations to help their professional users work smarter with intuitive digital solutions tailored to their operational challenges.

Cases

  • Case

    NEN

    Guiding customers through the complexity of standards by understanding their needs

  • Case

    Hertek

    From business strategy to validated digital safety solutions

  • Case

    Rocsys

    A human centred approach to a hands-free charging solution

  • Article

    Design

    Behind the scenes of a service: how Service Blueprinting connects the dots

  • Article

    Design

    From shadowing sessions to action points: Customer Journey Mapping at fresk.digital

  • Article

    Technology

    How an Expert Review can identify pain points in your digital product; our work for NOC*NSF

Clients

  • ...

Our clients are our partners, their goal is our goal. This helps us understand them well and at the same time bring them a fresh perspective on their challenges, so we can create the best solution.

How we create meaningful digital products

Discover & strategise

We define the dot on the horizon and shape the Minimum Meaningful Product we need to create in order to deploy and learn as soon as possible. This is fueled by understanding user needs, desired business outcomes and the technical landscape.

Learn how

Create & launch

We build the Minimum Meaningful Product that we shaped in close collaboration between our client and our multidisciplinary team. While we are working towards the launch, we guard the boundaries of our partnership and the product agreements we have made.

Learn how

Optimise & grow

We measure the Minimal Meaningful Product we have launched and learn from the interaction with users. This leads to key insights that we translate into concrete product optimisations that make the digital product more meaningful and help grow our clients business.

Learn how

Conclusion

I like it a lot. It kinda works the same as the CSS implementation at GRRR, but it prevents the duplication in your CSS. Resulting in a way smaller bundle.

The mental model is also a bit different. Therefore, you will need less code to achieve the same result. And you focus on re-use instead of re-apply.

There are more then enough options to tweak the things you need, without having to re-implement the total styling.

Open question(s)

The thing I'm wondering about is how you adjust (for instance) the var(--region-space). If you have applied this class to an HTML element

<section class="region">...</section>

And you want to adjust the spacing, how do you do it?

1. Add an additional class

<section class="region specific-name">...</section>

And update the var(--region-space) there?

.specific-name {  --region-space: 3rem;}

2. Update the css variable as inline styles

<section class="region specific-name" style="--region-space: var(--space-l);">...</section>

3. Create utility classes for each version

<section class="region region-l">...</section>

Not sure about this answer yet!