A Customizable Design System for Franklin Based Websites

Rosalind integrates with Figma and Style Dictionary to make designer and developer workflows seamless.

Get Started

Request Demo

Why use Rosalind?

When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. Rosalind offers a boilerplate setup to help get your company's design system started with an end-to-end designer/developer workflow across any platform.

Figma Integration

With Rosalind, design decisions start in Figma, which is where designers feel most at home. They can then customize the design system to their liking and, with the click of a button, give developers access to these decisions in code on any platform iOS, Android, CSS, JS, HTML etc.

  • One click design token CI/CD
  • Token support for multiple platforms and languages
  • Starter theme built to work with Franklin.
style
Secondary-background

Designer/Developer Workflow

When a designer makes updates to a design token, those changes are automatically pushed to developers, saving valuable time and reducing the potential for copy paste errors. By utilizing design tokens in Figma, the collaboration between designers and developers becomes more seamless, resulting in a more efficient and effective workflow.

Designers

Token Management

Designers manage tokens directly in Figma. Changes are then pushed from Figma to github by the designer.

learn more

CI/CD

Automatic Design System Releases

Rosalind is equipped with pre-configured CI/CD steps to validate and test changes in the design system, while also offering automated package releases for developers, enabling them to receive updates instantly.

learn more

Developers

Improved Productivity

Included with Rosalind is a variety of mixin and utility classes that enhance developer productivity when working with the design system.

learn more

What’s included?

Rosalind includes technologies that streamline the design and development process, making it faster and easier to get your Franklin site live.

Modern CSS

Leverage the latest css features with PostCSS integration.

Figma Support

Use figma as a living document to control your design system.

Style once, use everywhere

Sync design tokens across multiple development platforms with Style Dictionary.

Storybook Support

Develop your Franklin blocks in isolation using Storybook JS.

Lightning Fast

Optimized for the best performance on Franklin.

Fluid Typography

Typography that resizes smoothly to match any device width.a

Multiple Themes

Light and dark themes included. Fully customizable.

Beautiful Icons

Includes the incredible open source feather icons set.