Living Style Guides for Digital Products

With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Try CatalogDocumentation

~/$

Features

Why choose Catalog?

We believe that maintaining a style guide should require as little extra work as possible. That's why we built Catalog with a focus on simplicity: authoring feels natural for designers and integration is painless for developers.

Edit
Presentation
Code
No Lock-in
Versatile
Extensible

Specimens

What's included in Catalog?

Catalog offers a broad variety of building blocks – called Specimens – to document and specify every piece of your design system in the right format. Specimens are defined as Markdown code blocks.

Design Guidelines

To specify design guidelines, Catalog comes with a set of basic Specimens for colors, typography, and imagery. More advanced Specimens including audio and video allow you to document audible or behavioral aspects of your interface like sound effects, animations, or transitions.

Explore all Specimens

Write Markdown, create design specification.

1
2
3
4
5
6
7
```color-palette|horizontal
colors:
  - {name: 'RED 100', value: '#FFC2C2'
  - {name: 'RED 200', value: '#FF9999'
  - {name: 'RED 300', value: '#FF7777'
  - {name: 'RED 400', value: '#FF5555'
```
RED 100
#FFC2C2
RED 200
#FF9999
RED 300
#FF7777
RED 400
#FF5555

Interactive Components

Document interactive, code-based components built with HTML, CSS and JavaScript. The rendered example also shows the underlying source code. If you integrate React components, they even have access to local state.

Learn about component integration

Integrate live components using React.

1
2
3
4
5
6
```react
<button 
  onClick={setState({count: state.count + 1})}>
  Clicked {state.count} times
</button>
```

Responsive Views

To understand how your interface looks and works, it's important to see it on different screen sizes. That's why Catalog comes with a powerful responsive mode that displays your components for different breakpoints. You can choose between a tabbed version or place individual screen sizes next to each other.

See it in action

Test responsive behavior across screen sizes.

small
360×640 
medium
1024×768 
large
1440×900 (scaled)

Discover Catalog's full capabilities in the documentation.

Documentation

Examples

Made with Catalog

We've built Catalog in response to our own need for a robust yet flexible system when building digital products. The following examples show Catalog in action serving a few different use cases. We're excited to see what you're building with it.

Brand Guidelines
Guidelines for corporate identity and brand experience.Brand Guidelines
Website Guidelines
Guidelines for website interface design.Website Guidelines

Getting Started

Start using Catalog today with the help of our guides and resources. We're here, should you need any support.

icon
Documentation
Learn how to install, integrate, and use Catalog.
icon
Github
Catalog is open source and freely available on GitHub.
icon
Partner
If you need a partner for digital product design, we're happy to hear from you.