Skip to content

Rythm Design System

Headline Typography

TypeExampleClass
H1
Products
text-h1
H2
Afternoon Delight
text-h2
H3
Afternoon Delight #4
text-h3
H4
New AD#4 Merch
text-h4
H5
Bubba Fett
text-h5
H6
More Strains
text-h6

Label Typography

TypeExampleClass
L1
FT GMO x Trophy Wife
text-l1
L2
November 28, 2025
text-l2
L3
Hazy Indie
text-l3

Body Typography

TypeExampleClass
P1

Occaecat commodo sit sit ullamco. Non eiusmod cupidatat ad reprehenderit et occaecat adipisicing sunt incididunt. Labore Lorem anim commodo ad enim dolor Lorem irure consequat aute ullamco consequat fugiat amet. Lorem elit Lorem velit cupidatat tempor fugiat excepteur. Commodo eu minim sit nostrud eu veniam pariatur eiusmod.

text-p1
P2

Occaecat commodo sit sit ullamco. Non eiusmod cupidatat ad reprehenderit et occaecat adipisicing sunt incididunt. Labore Lorem anim commodo ad enim dolor Lorem irure consequat aute ullamco consequat fugiat amet. Lorem elit Lorem velit cupidatat tempor fugiat excepteur. Commodo eu minim sit nostrud eu veniam pariatur eiusmod.

text-p2
P3

Occaecat commodo sit sit ullamco. Non eiusmod cupidatat ad reprehenderit et occaecat adipisicing sunt incididunt. Labore Lorem anim commodo ad enim dolor Lorem irure consequat aute ullamco consequat fugiat amet. Lorem elit Lorem velit cupidatat tempor fugiat excepteur. Commodo eu minim sit nostrud eu veniam pariatur eiusmod.

text-p3
P4

Occaecat commodo sit sit ullamco. Non eiusmod cupidatat ad reprehenderit et occaecat adipisicing sunt incididunt. Labore Lorem anim commodo ad enim dolor Lorem irure consequat aute ullamco consequat fugiat amet. Lorem elit Lorem velit cupidatat tempor fugiat excepteur. Commodo eu minim sit nostrud eu veniam pariatur eiusmod.

text-p4

Colors

Black
bg-black
White
bg-white

Badges

Tones

PrimarySecondaryTertiaryGradient

Custom Gradients

IndicaHybridSativa

With Icons

Icon

Buttons

Sizes

<Button size="default" />
<Button size="large" />

Tones

<Button tone="primary" />
<Button tone="primary" disabled />
<Button tone="secondary" />
<Button tone="secondary" disabled />
<Button tone="tertiary" />
<Button tone="tertiary" disabled />
<Button tone="ghost" />
<Button tone="ghost" disabled />

Tones (light)

<Button tone="primary" />
<Button tone="primary" disabled />
<Button tone="secondary" />
<Button tone="secondary" disabled />
<Button tone="tertiary" />
<Button tone="tertiary" disabled />
<Button tone="ghost" />
<Button tone="ghost" disabled />
<Button tone="gradient" gradientStops={[]} />
<Button tone="gradient" gradientStops={[]} disabled />

With Arrows

<Button tone="primary" arrow="right" />
<Button tone="primary" arrow="right" disabled />
<Button tone="secondary" arrow="right" />
<Button tone="secondary" arrow="right" disabled />
<Button tone="ghost" arrow="left" />
<Button tone="ghost" arrow="left" disabled />
<Button tone="primary" size="large" arrow="right" />
<Button tone="secondary" size="large" arrow="right" />

Arrows Only

<Button tone="primary" arrow="left" arrowOnly />
<Button tone="primary" arrow="right" arrowOnly />
<Button tone="secondary" size="large" arrow="left" arrowOnly />
<Button tone="secondary" size="large" arrow="right" arrowOnly />

Misc

<Button tone="secondary" size="large" arrow="right" fullWidth />
<Button tone="primary" icon={...} />
<Button tone="primary" size="large" icon={...} />
<Button tone="secondary" icon={...} />
<Button tone="secondary" size="large" icon={...} />
<Button tone="primary" icon={...} iconOnly />
<Button tone="primary" size="large" icon={...} iconOnly />

Resin

Text Treatment

Small

Our terpenes are always strain specific, delivering the nuanced aromas, flavors, and potential effects of each unique strain.

Regular

100% Strain
Specific Terpines

Large

Shop The
Latest Rythms

light

100% Strain
Specific Terpines

Our terpenes are always strain specific, delivering the nuanced aromas, flavors, and potential effects of each unique strain.

April 10, 2026

A Lineage Strain Takes Flight

April 10, 2026

new ad#4 merch Available Now

April 10, 2026

recap budball 2025