One tree. One system.
Everything on this site comes from the CanopyBay logo brief: five colours, one typeface, and three ideas borrowed from the tree. Nodes are round. Things grow from a trunk. Layers stack like leaves.
Logo
The layered canopy stands for growth. Its twelve nodes are staff, centres and AI agents working together. The solid trunk is the platform that holds them up. The wordmark is custom rounded lettering and is always used as artwork, never retyped.
- Clear space
- Keep a margin the height of the letter C on every side. Nothing enters it.
- Smallest size
- Horizontal logo 120 px wide. Tree mark 24 px wide. Below that, use the favicon drawing.
- Do not
- Recolour the tree, stretch it, add a shadow or outline, retype the wordmark in a font, or set the colour tree on Violet.
- Files
- SVG for every lockup lives in
/public/brand. They are traced from the approved Option 13 artwork.
Colour
Blackberry and violet. The five brand colours do almost all the work. Components never use a raw colour: they use a role, so the same button works on Ivory, Night and Violet.
Brand palette
- Blackberry#321647
--blackberryInk. Headings, body text, primary buttons, the word Canopy. - Deep Plum#3F1F58
--plumDark surfaces that sit beside Blackberry. - Violet#804DA4
--violetThe accent. Links, active states, nodes, the word Bay. - Lavender#AC7FCD
--lavenderThe accent on dark surfaces. Never text on Ivory. - Ivory#FEFDF9
--ivoryThe page. Text on dark surfaces.
Supporting tints
- Night#1F102B
--nightThe darkest surface: footer, dark sections. - Slate#6B5A75
--slateSecondary text on light. - Thistle#DCD0E5
--thistleStrong hairlines, input borders. - Haze#E9DFEF
--hazeHairlines, panel borders. - Mist#F3EDF7
--mistTinted bands and panels.
Status colours
An addition to the brand sheet, needed for product states. They are muted so they sit quietly beside the purples, and they always carry a word as well as a colour.
ApprovedNeeds a lookBlocked
Contrast
| Text | On | Ratio | Use for |
|---|---|---|---|
| Blackberry | Ivory | 15.4 : 1 | All text |
| Slate | Ivory | 6.2 : 1 | All text |
| Violet | Ivory | 5.9 : 1 | All text |
| Ivory | Violet | 5.9 : 1 | All text |
| Ivory | Night | 17.7 : 1 | All text |
| Lavender | Night | 5.7 : 1 | All text |
| Lavender | Ivory | 3.1 : 1 | Large text and shapes only |
| Violet | Night | 3.0 : 1 | Large text and shapes only |
Surfaces
Typography
One family: Noto Sans. Bold for headings, Regular for body, as the brand sheet sets out. It is self-hosted as a single variable file of 36 KB, so every weight costs one request.
Fully agentic. Fully yours.
The AI ERP for schools
Every team’s work, ready for a yes
Agents prepare the work
Agents prepare the work in every department, and your team approves it in one place.
Nothing is sent, paid or changed until a person says yes.
Drafted by Joanne’s AI at 6.02am
Product screens use sample data.
- Two tones
- A display heading may be split the way the wordmark is: the first sentence in Blackberry, the last in Violet. Only on a page’s main heading.
- Numbers
- Tabular figures in tables, prices and counters, so columns line up and nothing jumps when a value changes.
- Case
- Sentence case everywhere. No capitals for labels.
- Measure
- Body text stops at about 62 characters a line.
Space and shape
A 4 px base. Shapes come from the logo: nodes are perfect circles, panels are soft like the lettering, and big colour changes use a canopy edge instead of a straight line.
--s14 px--s28 px--s312 px--s416 px--s524 px--s632 px--s748 px--s864 px--s996 px
- Grid
- 12 columns, a gutter of 16 to 32 px, and a page width of 1,320 px.
- Depth
- The logo is flat, so the site is too. One soft shadow exists, for things that float above the page.
- Lines
- Hairlines in Haze separate rows. Borders do not decorate.
Components
These are the live components, not pictures of them.
Buttons
The fill floods out of a node on hover and the arrow travels. One primary action per view.
Choices and tags
Node list
A branch with a node per item. Use it for anything that belongs to one idea.
- Agents prepare. Drafts for every team.
- People decide. Nothing is sent without a yes.
- Every action is logged. Who asked and who approved.
Form field
Questions
Is there a free trial?
Yes. 30 days, with the modules you pick and sample data to start with.
Motion
Things grow from the trunk and settle. Motion shows what changed, and it never decorates.
- One moment per page
- The home page has two: the logo tree taking approvals, and the tree answering as you read the five layers. Everything else is still until you touch it.
- Ease
cubic-bezier(0.22, 0.8, 0.24, 1)for everything. Nodes may overshoot a little when they pop.- Speed
- 0.18 s for feedback, 0.45 s for a state change, 0.9 s for anything that grows. Big things move slower than small ones.
- Hover
- Primary actions flood from a node. Links draw a branch. Rows step aside. Legal and footer links only change colour.
- Reduced motion
- With reduced motion on, nothing loops, nothing scrolls by itself, and every part of every diagram is visible at once.
- Cost
- Only transform and opacity animate. The animation library loads after first paint and only on pages that scroll-link.
Voice
Plain words an owner would use at 11pm. We describe what happens, and we do not sell.
- Say what happens
- “A reply is drafted overnight. Joanne checks it at 9am and sends it.” Not “AI-powered engagement”.
- Buttons name the action
- “Start 30 days free”, “Book a demo”, “Approve”. The same words everywhere.
- Numbers only when true
- Prices, counts and times come from the product. Sample data is always labelled.
- Never
- Dashes as punctuation, capitals for labels, filler such as seamless, unleash or cutting-edge.