Stay Connected with Soilboy
Keep growing with us. Get updates on new launches, workshops, and more from Soilboy.
 
 

Glossary

Mirrors the Figma STYLING page — specs in captions are the design values; resolved CSS variables are checked live against them.

01.

Logos

soilboy.
soilboy.
soilboy.

Wordmark approximated as text — the real logo asset lives in the header section settings, not reachable from a template.

02.

Colours & Font Weights

02 - A

Palette

Green #19341E

Headers, body text, buttons, links

--green

Label #617A65

Labels

--label

Placeholder #A4A399

Inactive state, placeholder text

Stroke 1 #304835

Main stroke colour

Stroke 2 #E4D7C8

Secondary stroke colour (FAQs)

BG-1 #FFF9F2

Background

--background-main

BG-2 #F2E9DF

Secondary background

--background-secondary

Terracotta #B35E34

Secondary colour

Black #222222

Announcement bar

--black

White #FFFFFF

Text on dark backgrounds

--white

02 - B

Text utilities

.c-green The quick brown fox
.c-label The quick brown fox
.c-black The quick brown fox
.c-white The quick brown fox
.c-placeholder The quick brown fox
.c-red (theme-only, not in Figma) The quick brown fox
02 - C

Font weights

PP Object Sans — Semibold 600 Grown with meaning
PP Object Sans — Regular 400 Grown with meaning
03.

Typography

03 - A

Headers

.h1lh 1.1 · ls -1.44 · w400 · 32 / 32 / 52 / 72 / 72px Grown with meaning
.h2lh 1.1 · ls -1.04 · w400 · 25 / 25 / 40 / 52 / 52px Grown with meaning
.h3lh 1.1 · ls -0.8 · w400 · 23 / 23 / 32 / 40 / 40px Grown with meaning
.h4lh 1.2 · ls -0.48 · w400 · 18 / 18 / 21 / 24 / 24px Grown with meaning
.h5theme-only — no Figma spec (legacy: cart title, loading text) Grown with meaning
03 - B

Paragraphs

.p1lh 1.4 · ls -0.18 · w400 · 16 / 16 / 18 / 18 / 18px Order plants in bulk for your team, clients, or events.
.p2(default) lh 1.4 · ls -0.14 · w400 · 14px all breakpoints Order plants in bulk for your team, clients, or events.
.p3lh 1.4 · ls -0.12 · w400 · 11 / 11 / 12 / 12 / 12px Order plants in bulk for your team, clients, or events.
.p4lh 1.4 · ls 0.11 · w400 · 10 / 10 / 11 / 11 / 11px Order plants in bulk for your team, clients, or events.
.p5lh 1.4 · ls 0.09 · w400 · from 9px Order plants in bulk for your team, clients, or events.
.p6theme-only — no Figma spec (legacy: gift card, size guide) Order plants in bulk for your team, clients, or events.
04.

Buttons

04 - A

Editor styles — buttons.liquid

.btn1 Figma Button 1
Label only With arrow Full width + arrow
.btn2 Figma Button 2
Label only With arrow Full width + arrow
.btn3 Figma Button 3
Label only With arrow Full width + arrow
.btn4 Figma Button 4
Label only With arrow Full width + arrow
.btn5 Figma Button 5 — small: pad 8/16
Label only With arrow
.btn6 Figma Button 6 — small: pad 8/16
Label only With arrow
04 - B

Custom type classes (button-anim-style)

.btn-1 Figma Button 1 — pad 12/24, gap 48 Hover me
.btn-2 Figma Button 2 — pad 12/24, gap 48
Hover me
.btn-3 Figma Button 3 — pad 12/24, gap 48 Hover me
.btn-5 Figma Button 5 — small: pad 8/16, gap 4 (baked in) Hover me
.btn-6 Figma Button 6 — small: pad 8/16, gap 4 (baked in)
Hover me
.btn-4 not created — spec-identical to btn-2, separate inactive pairing
To inspire a sense of curiosity for the greener things in life.