Foundation · Version 1.0
The visual contract for every expense screen.
Countryside Cannabis Co. brand assets, semantic tokens and a sixteen-piece component library — measured against WCAG in both themes before a single screen is drawn. Nothing built after this page may introduce a colour, font, radius or spacing value that is not defined here.
01 · Identity
Countryside Cannabis Co.
The product is called Countryside Cannabis Co. everywhere a person can see it — chrome, headers, page titles, emails. Mera never appears as the product name.
countryside-main-logo-full-colour.svg
countryside-main-logo-inverse.svg
Clear zone
Minimum padding around the lockup equals the height of the icon glyph. The dashed boundary below is that zone — no text, rule, edge or image may enter it. It is enforced at full measure in the brand placements, the print header and any standalone use.
Documented exception: the sticky app header compresses the zone to 12px so the chrome stays at 74px rather than 120px. Confirm against the clear-zone page of the brand guide booklet — if the zone is defined against the leaf glyph rather than the full lockup height, the header may already comply and the exception can be removed.
Asset map
countryside-main-logo-full-colour.svg light theme headercountryside-main-logo-inverse.svg dark theme headercountryside-icon-full-colour.svg favicon, collapsed nav, mobile, app iconcountryside-wordmark-full-colour.svg print and PDF report headersSupplied files, used as supplied. No traced, redrawn or recoloured substitute exists in this codebase — the theme swap selects between two official files, it does not filter one.
Never
- Stretch, squash or rotate the lockup
- Recolour it, including CSS filters and opacity
- Apply a shadow, glow, outline or gradient
- Place it over a photograph or patterned surface
- Reconstruct the lockup from the icon plus type
- Use "Mera" as the product name in the interface
Print / PDF report header
02 · Colour
Seven brand values, two semantic sets.
The brand hexes below are the only raw colour values in the codebase, and they live in one file. Components read semantic tokens, so a component cannot know which theme it is in — and cannot break when the theme changes.
Semantic tokens
Both panels are live: each is scoped with data-theme and rendering its own
token set right now, whichever theme the page is in.
03 · Accessibility
Six rules, all of them measured.
This is a finance tool. A number a person cannot read with certainty is a control failure, not a styling preference — so the palette bends to the ratios, never the other way round.
1.64:1 on White Smoke. In light theme it is a fill, border, underline or icon-on-dark only. The eyebrow label therefore renders the accent as a fill mark and sets its words in Gun Powder.
2.17:1 on White Smoke. Light-theme secondary text is Gun Powder at 9.23:1 or better.
1.63:1 on Eerie Black. In dark theme it carries surfaces and borders only.
9.65:1 in light, 10.91:1 in dark. White on gold is 1.78:1 and is audited as a prohibited pairing so it cannot creep back in.
Monetary values use --fg — 15.05:1 light, 14.10:1 dark on the worst surface in each theme. Status text uses a dedicated ink tier that clears 7:1 against the page, the card, the zebra row and its own wash.
Every status chip, every validation message and every toast carries an icon and a word alongside its colour. Removing all colour from this page leaves it fully readable.
Corrections the audit forced
Four values had to move to satisfy the rules above. Each is the smallest possible change, stays inside the brand hue, and is recorded here rather than applied quietly.
04 · Status & severity
Five states, each with a shape and a word.
Derived from the brand palette rather than imported from a framework. Every state has three tiers: a mark for fills and icons, an ink that clears 7:1 for text, and a wash for panels.
05 · Typography
Serif headings against clean sans data.
Tenor Sans at weight 400 only — it has one weight and needs no other. Plus Jakarta Sans carries every interface string, and carries currency in tabular figures so columns align on the decimal.
Reimburse in four days
Approver queue
Mileage & per diem
Receipt required
Attach the receipt and the line clears policy automatically.
Expenses submitted before Thursday are paid in the same cycle.
Fuel · Highway 401 corridor · reconciled against the fleet card.
Uploaded 2.4 MB · JPEG
Approver review
Tabular numerals
Every currency and kilometre figure uses font-variant-numeric: tabular-nums.
The decimal points below sit on one axis regardless of digit count — that alignment is the
whole reason a reviewer can scan a column and trust the total.
Sample figures shown to demonstrate alignment — not live data.
Currency is always two decimal places at rest, right-aligned, and set in
--fg so it clears 7:1 in both themes. Negative amounts take the block ink
tier and a minus sign — never colour alone.
06 · Layout & form
1180 max, an eight-step spacing scale, nothing fully rounded.
Spacing
Radius
Elevation
cards, table chrome
toasts, popovers
Light theme lifts with a hairline shadow. Dark theme lifts with
--surface instead — a heavy shadow on Eerie Black reads as dirt.
07 · Component library
Sixteen pieces, live and interactive.
Type in them, drop a receipt on the dropzone, open the modal. Every control is at least 44px on its short edge because receipt capture happens one-handed on a phone.
Primary is a Golden Tobacco fill with Eerie Black text at 9.65:1. Never white.
Must match Finance's books exactly.
Type any number and tab away — it settles to two decimals.
An amount is required before this line can be submitted.
Required for anything over policy.
0 / 240Legal entity, spelled as Finance's books spell it. Quiet by design — it is a reference, not branding.
Toasts stack bottom-right on desktop, full-width above the thumb on mobile.
No expenses this period
Snap a receipt and the line is drafted for you — merchant, date and amount pre-filled.
| Date | Merchant | Legal entity | Distance | Amount | Status |
|---|---|---|---|---|---|
| 03 Jul 2026 | Fuel · Highway 401 | Mera Cannabis Corp. | — | 42.50 | Approved |
| 08 Jul 2026 | Accommodation · two nights | Mera Cannabis Corp. | — | 1,284.00 | Over policy |
| 11 Jul 2026 | Mileage · site visit | Mera Cannabis Corp. | 118.40 km | 96.35 | In review |
| 14 Jul 2026 | Parking · downtown | Mera Cannabis Corp. | — | 7.10 | Receipt missing |
| 18 Jul 2026 | Courier · sample transfer | Mera Cannabis Corp. | — | 318.75 | Draft |
| Total · 5 lines | 1,748.70 | ||||
08 · Contrast audit
Proof, measured in the browser.
None of these ratios are typed by hand. Each row resolves the real token through the
browser — compositing translucent borders and color-mix() washes exactly as
painted — then applies the WCAG relative-luminance formula. Change a token and this
table re-reports on the next load.
| Pairing | Rendered | Resolved | Measured | Required | Verdict |
|---|
| Pairing | Rendered | Resolved | Measured | Required | Verdict |
|---|
Rows marked Banned — unused are pairings the rules forbid. They are audited on purpose: the measurement is the evidence that Golden Tobacco text on light, Smoke text on light, Gun Powder text on dark and white text on gold are all unusable, and the verdict flips to a failure the moment one appears in the codebase.
09 · Responsive
375 and 1440, both themes, no horizontal scroll.
Receipt capture is phone-primary and one-handed. Approver review is desktop-primary but must stay readable on a phone — so a monetary table becomes stacked cards below 768px rather than scrolling sideways and hiding half an amount.
Both frames are the real components under a scoped data-theme — not
screenshots. The whole page is also built to render at 375px; narrow the window and the
DataTable above becomes cards.