Rules is an AI-ready design guidelines platform for shadcn/ui

Rules generates structured design guidelines for shadcn/ui components, so your team stays aligned and your vibe-coded UI ships production-ready.

mybrand_guidelines.md


# Colour Guidelines

## Primary

Our main brand colour, used for high-emphasis actions.

## Input

Applied to form fields or functional borders where contrast is needed.

## Muted Foreground

For low-emphasis text and icons, like disclaimers or helper text.


# Component Guidelines

## Default Button

Use for primary actions like **Save**, **Submit**, and **Continue**.

## Secondary Button

For supporting actions such as **Cancel** or **Back**.

## Outline Button

Minimal, used for tertiary actions where subtlety is preferred.

Choose from preset guidelines

Fintech Product

SaaS Marketing

Travel Blog

Choose from preset guidelines

Fintech Product

SaaS Marketing

Travel Blog

Choose from preset guidelines

Fintech Product

SaaS Marketing

Travel Blog

Level up your shadcn/ui apps

Use guidelines from leading design teams, choose from presents, or generate your own design system guidelines for your shadcn/ui apps.

Design tokens

Components

Dial in your typographic styles, every time.

With Rules

This is a heading

This is a sub heading

Typographic hierarchy is essential in UI design because it guides users through content and helps them understand what is most important. By using different font sizes, weights, and spacing, designers can create a clear structure that makes pages easier to scan and read. Strong hierarchy improves usability, reinforces branding, and ensures that key messages stand out without overwhelming the user. Consistent use of headings, body text, and supporting labels also helps maintain visual rhythm across screens and components.

Design tokens

Components

Dial in your typographic styles, every time.

With Rules

This is a heading

This is a sub heading

Typographic hierarchy is essential in UI design because it guides users through content and helps them understand what is most important. By using different font sizes, weights, and spacing, designers can create a clear structure that makes pages easier to scan and read. Strong hierarchy improves usability, reinforces branding, and ensures that key messages stand out without overwhelming the user. Consistent use of headings, body text, and supporting labels also helps maintain visual rhythm across screens and components.

Design tokens

Components

Dial in your typographic styles, every time.

With Rules

This is a heading

This is a sub heading

Typographic hierarchy is essential in UI design because it guides users through content and helps them understand what is most important. By using different font sizes, weights, and spacing, designers can create a clear structure that makes pages easier to scan and read. Strong hierarchy improves usability, reinforces branding, and ensures that key messages stand out without overwhelming the user. Consistent use of headings, body text, and supporting labels also helps maintain visual rhythm across screens and components.

Bring your brand voice to life

Rules captures your voice and tone so every message feels unmistakably on-brand.

Turn a cold system message into a human, reassuring one.

Before

An error has occurred. Please try again.

Before

An error has occurred. Please try again.

Before

An error has occurred. Please try again.

Shareable guidelines in seconds

Shareable guidelines in seconds

Export your brand rules as Markdown or a link and drop them straight into your AI coding tools.

Export your brand rules as Markdown or a link and drop them straight into your AI coding tools.

mybrand_guidelines.md


# Colour Guidelines

## Primary

Our main brand colour, used for high-emphasis actions.

## Input

Applied to form fields or functional borders where contrast is needed.

## Muted Foreground

For low-emphasis text and icons, like disclaimers or helper text.


# Component Guidelines

## Default Button

Use for primary actions like **Save**, **Submit**, and **Continue**.

## Secondary Button

For supporting actions such as **Cancel** or **Back**.

## Outline Button

Minimal, used for tertiary actions where subtlety is preferred.

A new way to brand

A new way to brand

Before

Guidelines sit in Notion, unread

AI outputs all look the same

Small teams can’t keep docs updated

Guidelines sit in Notion, unread

AI outputs all look the same

Small teams can’t keep docs updated

Guidelines sit in Notion, unread

AI outputs all look the same

Small teams can’t keep docs updated

With Rules

Share rules directly with your AI tools

Tone, style, and components stay on-brand

Start fast with presets from leading design systems

Share rules directly with your AI tools

Tone, style, and components stay on-brand

Start fast with presets from leading design systems

Share rules directly with your AI tools

Tone, style, and components stay on-brand

Start fast with presets from leading design systems

On our roadmap…

On our roadmap…

Automatically scan your existing guidelines

Share your brand guidelines or design system website, and we turn them into structured rules automatically.

Rank your touchpoints for brand-compliance

Our platform can scan your existing touch points to provide an assessment of how closely they're following your brand & design system rules.

Sound interesting?

We're getting ready for our public launch, but you can get early access to the platform at no charge.