VoicePen style guide

Internal page. Tokens come from the Bubble design system (inventory/06 §C).

Colour tokens

brand
brand-hover
brand-lavender
brand-deep
brand-tint
ink-950
ink-850
ink-700
silver
success
danger

Type scale

Hero 56 · Poppins

Section 48 · Lato bold

Heading 2 · 40

Heading 3 · 30

Title · 24

Lead · 20

Body · 18

Base · 16

Small · 14

App (light)

Buttons

Form fields

Badges

whiteblueyellowredgreengreypurple
whiteblueyellowredgreengreypurple
DefaultSecondaryOutlineFailed

Chips

Card

Interview with a psychoanalyst
Audio/Video to Blog post · 42 min

Navigating the beautiful mess of relationships, turned into a 1,200-word post.

Tabs

The generated blog post appears here.

Dialog and toasts

Marketing (dark)

Buttons

Form fields

Badges

whiteblueyellowredgreengreypurple
whiteblueyellowredgreengreypurple
DefaultSecondaryOutlineFailed

Chips

Card

Interview with a psychoanalyst
Audio/Video to Blog post · 42 min

Navigating the beautiful mess of relationships, turned into a 1,200-word post.

Tabs

The generated blog post appears here.

Dialog and toasts