Allotment ProYour allotment, organised

Private by default. No third-party analytics.

Internal visual reference

Allotment Pro style guide

Owned tokens, foundations and components used across the product.

01 · Tokens

Shared design decisions

Semantic colour, spacing, typography, radius and sizing tokens are the only styling vocabulary used by owned components.

Canvas

--ap-color-canvas

Surface

--ap-color-surface

Muted surface

--ap-color-surface-muted

Heading

--ap-color-heading

Action

--ap-color-action

Focus

--ap-color-focus

Spacing scale

12345678

02 · Foundations

Document-level behaviour

Typography, links, focus, selection and readable body copy come from the shared foundation layer.

Typography

Grow well.

Plan with confidence

Clear body copy uses the owned document rhythm and remains readable across viewport sizes.

Supporting text uses the shared muted-text contract.

03 · Layouts

Responsive relationships

Containers, clusters, stacks and grids describe arrangement without owning component appearance.

Stack

FirstSecondThird

Cluster

Seed libraryPlot journalProjects

Responsive grid

04 · Primitives

Owned component inventory

These variants and states are implemented by Allotment Pro and have no Tailwind-backed visual contract.

Buttons

Linked action

Badges

PublishedPlannedUnavailablePrivate

Fields

Cards

Plot journal
A persistent record of what happened and when.
Owned card spacing, borders and typography.

Modal drawer

05 · Composed public components

Reusable customer-facing composition

Shared public components combine owned foundations and primitives while leaving route facts with their domain owners.

Section heading and action

Knowledge library

Choose what to grow

The repeated eyebrow, title and description arrangement has one public contract.

Browse growing guides

Responsive botanical image

Asparagus crop illustration

AppImage contract

Artwork with one dependable contract

Responsive sources, intentional frames and shapes, priority loading and fallback recovery remain owned by AppImage.

Named frames

Aubergine illustration with none frame
none
Aubergine illustration with subtle frame
subtle
Aubergine illustration with paper frame
paper
Aubergine illustration with parchment frame
parchment
Aubergine illustration with botanical frame
botanical

Shape language

Yin Yang bean illustration in none shape
none
Yin Yang bean illustration in soft shape
soft
Yin Yang bean illustration in rounded shape
rounded
Yin Yang bean illustration in circle shape
circle

Delivery and recovery

Priority-loaded pea illustration
Priority
Direct-source journal photograph
Direct URL