Generate a live style guide instantly your Framer project

Style-board scans your Color and Text Styles, builds a clean style guide page, and lets you update it whenever your styles change.

View now

0:00 / 0:00

Great teamwork starts with great documentation. Style-board gives your team a shared style guide built directly from your project. Refresh it anytime new styles are added.

Great teamwork starts with great documentation. Style-board gives your team a shared style guide built directly from your project. Refresh it anytime new styles are added.

Great teamwork starts with great documentation. Style-board gives your team a shared style guide built directly from your project. Refresh it anytime new styles are added.

Theme - Light

Hex - #FBFAFF

Theme - Dark

Hex - #000000

Heading 1

H1 • Aspekta Variable • 400

Desktop (L - 1200px)

Size

42px

Line

1.2em

Letter

-0.02em

Paragraph

12px

Tablet (M - 810px)

Size

36px

Line

1.2em

Letter

-0.02em

Paragraph

-

Phone (S - 0px)

Size

32px

Line

1.18em

Letter

-0.02em

Paragraph

-

Create style guides. Generate a complete style guide page from the Color and Text Styles already in your project.

Font

T

Geist

500

  • Text style

  • Font family

  • Font size

Update text style guide

Text styles have changed since last generation

Update easily. Style-board detects when styles change

6 Text styles missing breakpoints

6 Text styles missing breakpoints

9 Color styles missing dark mode

9 Color styles missing dark mode

Fill gaps. Spot missing dark mode or breakpoints.

Style manager

Text

Colors

53 Color styles found

40 style with dark mode

Export styles

Import styles

Import and export styles. Move styles between projects or keep your design system consistent across multiple files.

Home

Components

Plugins

Templates

Blogs

Code

Components

Plugins

Blogs