Krzysztof Abramowski

UX/UI designer, Webflow developer

Blog

Resume

📅 Book a call

Back to the main page
mobile
reusable
design ops

How to keep a design system alive?

Check online

Problem

With over 130 separate deployments used by more than 300 institutions, the dLibra system lacked a unified visual and functional language. This fragmentation led to inconsistencies across implementations, increased development and maintenance efforts, and made it harder to ensure accessibility and responsive design. The absence of standardized components also slowed down the design and adaptation of tailored solutions for institutions with unique needs.

Goal

Create a cohesive design system for dLibra that would unify styles, components, and interactions across all implementations. By standardizing elements through reusable components, design tokens, and Figma features like Variants and Variables, the system aimed to ensure consistency, improve efficiency, and support rapid customization—while also aligning with accessibility standards and responsive design principles.

Scroll to top

‍

‍

‍

‍

‍

‍

Button style guide from a design system showing different button types (Primary, Secondary, Tertiary, and Text) in sizes Large, Medium, and Small. Each button type is displayed across five interaction states: Default, Hover, Focus, Pressed, and Disabled. The buttons vary in background color, border style, and opacity depending on the state, illustrating their visual response to user interactions

‍

Color palette from a design system showcasing various shades for categories such as Primary, Secondary, Link, Accent, Success, Warning, Error, and Neutral. Each category displays a gradient of color boxes, labeled with values from 200 to 800 for intensity. The interface on the right lists the local styles, including text and color styles with associated color names and values.

You may also like

Designing for city of Poznań

From clutter to clarity: improving usability in a competitive market

 
class SampleComponent extends React.Component { 
  // using the experimental public class field syntax below. We can also attach  
  // the contextType to the current class 
  static contextType = ColorContext; 
  render() { 
    return <Button color={this.color} /> 
  } 
}

© Krzysztof Abramowski