The complete identity system: mark, colour, type, layout and application. Everything needed to make something that looks like Patrimoine 365 — and nothing that doesn't.
Twelve sections. The rules that matter most are on pages 13, 16 and 24 — the mint rule, the contrast ledger, and the balance between green and accent.
Patrimoine 365 keeps a record. Properties, leases, tenants, payments — held accurately, in one place, for whoever needs to see them.
That is what the identity has to carry: a business where being right matters more than being loud. The deep green does the carrying. It is serious without being severe, and it holds a page on its own.
The mint stops it from becoming an accounting ledger. It appears rarely and always deliberately — on the 365, on what is active, on what has been paid. Used at that volume it is a signature. Used everywhere it is another mint fintech.
Balanced by design.
Built for growth.
If you remember one thing: the green carries the identity, the mint provides the spark, and the ivory is what makes a page feel like Patrimoine rather than like software.
Two pillars hold three bars. The pillars are the property; the bars are the records kept against it. The form is symmetrical because the product's job is to make two sides agree.
Drawn on a 64-unit square. Every edge lands on a whole unit — the mark can be rebuilt exactly from the table below without reference to the artwork.
| Element | X | Y | W | H | R |
|---|---|---|---|---|---|
| Pillar, left | 2 | 4 | 10 | 56 | 2 |
| Pillar, right | 52 | 4 | 10 | 56 | 2 |
| Bar, upper | 18 | 9 | 28 | 10 | 2 |
| Bar, middle | 18 | 27 | 28 | 10 | 2 |
| Bar, lower | 18 | 45 | 28 | 10 | 2 |
Bar gap 8 units — 80% of bar height. Never let it fall below 50%: the bars merge into a block when printed small or reproduced at low resolution.
Five approved forms. The horizontal lockup is the default and should be the first choice in every situation where it fits.
Keep clear on all four sides a margin equal to half the mark's height — 32 units, marked x below. Nothing enters that space: no type, no rule, no image edge, no other logo. Where the layout allows it, give more.
Below these sizes the bar gaps close and the mark reads as a solid block. There is no situation in which going smaller is better than dropping to the next form down.
| Form | Screen | |
|---|---|---|
| Horizontal lockup | 24 px high | 8 mm high |
| Stacked lockup | 32 px high | 11 mm high |
| Mark, three bars | 24 px | 7 mm |
| Mark, two bars | 16 px | 5 mm |
A dedicated two-bar mark exists for favicons and small tiles, with thicker strokes and wider gaps. At 16 px use the pixel-snapped file, which is drawn on a 16-unit grid so every edge lands on a whole pixel.
The lockup is coloured by the ground it sits on, not by preference. The mark and the 365 carry brand colour; the word Patrimoine takes the primary text colour of the ground — Ink on light, Mist on dark — which is why the lockup sits correctly inside a page of running text.
| Ground | Pillars | Ledger bars | Patrimoine | 365 | File |
|---|---|---|---|---|---|
| White, Warm Ivory, Mist | #123D35 | #0E7A56 | #17201E | #0B6449 | logo-light |
| Patrimoine Green, Ink, Night | #FFFFFF | #39D6A3 | #F2F6F4 | #39D6A3 | logo-reverse |
| One-colour, light | #123D35 throughout | logo-mono-green | |||
| One-colour, dark or photographic | #FFFFFF throughout | logo-mono-white | |||
| Black-only print | #17201E throughout | logo-mono-black | |||
The lockup is a fixed asset. It is placed, scaled and coloured according to the rules on the previous pages, and it is never rebuilt.
Three brand colours people should come to recognise, and five neutrals that do the work. Every other value in this document is a tint, a shade or a state of one of these eight.
Eight flat values cannot express a hover, a focus ring, a selected row or a dark theme. These five are added for that — all of them tints, shades or grounds of colours already in the identity. Nobody is asked to recognise thirteen colours; they are asked to recognise three.
#DDE6E2 remains part of the identity — it is the hairline that makes a card feel drawn rather than floated. What changes is its scope. It divides; it does not enclose a control. At 1.3:1 against white and 1.2:1 against Mist, an input outlined in Border is an input nobody can find.
Rule. Border for dividers and card edges. Border Strong for anything a person is meant to click, type into or tick.
Two ramps, anchored on the brand colours: Green 900 is Patrimoine Green and Mint 400 is Patrimoine Mint. Use them for hover and pressed states, chart fills, washes and dividers — not to introduce new brand colours by the back door.
F5FAF9 · EBF5F3 · D6EBE7 · B0D8D0 · 82C0B3 · 4EA291 · 347F70 · 246659 · 1C544A · 16463D · 123D35 · 0B2823
F3FCF9 · E6F9F3 · CDF4E7 · A3EBD3 · 70E1BB · 39D6A3 · 21BA87 · 13966A · 0E7A56 · 0B6044 · 084934
Where the ramps are allowed. Hover and pressed states, chart fills, washes behind quiet sections, dividers on coloured grounds, and the 25–100 steps as page tints.
Where they are not. As a second brand colour. Green 400 is not "the lighter Patrimoine green" — it is a state. A page led by Green 400 is not on brand.
Every pairing the identity implies, measured against WCAG 2.1. AA needs 4.5:1 for body text, 3:1 for large text and control boundaries. What fails here fails on screen and in print too — these are not preferences.
| Pairing | Ratio | Verdict | Sample |
|---|---|---|---|
| Ink on White | 16.6:1 | AAA | Lease renewed |
| Ink on Warm Ivory | 15.3:1 | AAA | Lease renewed |
| Green on White | 12.0:1 | AAA | Lease renewed |
| White on Green | 12.0:1 | AAA | Lease renewed |
| Mint on Night | 9.9:1 | AAA | Lease renewed |
| Mint on Ink | 9.0:1 | AAA | Lease renewed |
| Ink on Mint | 9.0:1 | AAA | Lease renewed |
| Mint on Green | 6.5:1 | AA | Lease renewed |
| Mint Deep on White | 5.3:1 | AA | Lease renewed |
| Pairing | Ratio | Verdict | Sample |
|---|---|---|---|
| Slate on White | 4.9:1 | AA only | Lease renewed |
| Slate on Ivory / Mist | 4.5:1 | AA edge | Lease renewed |
| Border Strong on White | 3.5:1 | Control | Input field |
| Slate on Green | 2.4:1 | Fail | Lease renewed |
| Mint on White | 1.9:1 | Fail | Lease renewed |
| White on Mint | 1.9:1 | Fail | Lease renewed |
| Mint on Warm Ivory | 1.7:1 | Fail | Lease renewed |
| Border on White | 1.3:1 | Divider only | Input field |
| Border on Mist | 1.2:1 | Divider only | Input field |
The full table, including dark-mode and status pairings, is in 03-Color/contrast-ledger.csv.
Mint is a surface colour on light grounds and an ink colour on dark ones.
That list is the entire budget. Anything added to it comes out of something already on it.
A bright mint on every button, badge, chart and icon is the single fastest way to make this look like every other fintech product. It also destroys the signal: if everything is highlighted, nothing is.
The deep green is what people should recognise. The mint is what tells them where to look.
A product about rent that is late, deposits that are held and payments that failed needs a way to say so. Positive uses the mint family, so the brand stays coherent. The other three deliberately leave the green world — a warning must never be mistaken for a brand element.
| Text | #0E7A56 |
| Surface | #E6F7EF |
| Border | #A8E3CA |
Paid, active, completed, verified.
| Text | #B45309 |
| Surface | #FEF6E7 |
| Border | #F0D391 |
Due soon, pending, needs attention.
| Text | #B42318 |
| Surface | #FEF3F2 |
| Border | #FCC9C4 |
Overdue, failed, destructive.
| Text | #175CD3 |
| Surface | #EFF6FF |
| Border | #B7DCFF |
Informational, in progress, neutral.
Colour is never the only signal. Every status carries a word. A green dot and a red dot are the same dot to eight per cent of men.
Status colour is not brand colour. Do not use Danger red as a decorative accent, and do not use Patrimoine Green to mean "success" — it is the navigation, and the two would become indistinguishable.
Occupancy heat, collection rate over time, arrears ageing. Dark is low, mint is high — keep that direction consistent everywhere so the reading is learned once.
Five is the ceiling. Beyond five, split the chart — a sixth colour in a green-led palette collides either with the brand or with a status.
One series, one colour. Mint marks the endpoint — the bar the reader is actually being asked to look at — and nothing else on the chart competes with it.
Never distinguish two series by Mint and Mint Deep alone. The difference survives a screen and disappears on a projector, in greyscale and in print.
The palette inverts on itself. Ink becomes the card, Mist becomes the text, and mint finally runs at full strength. Only four values are new, and Warm Ivory sits it out entirely.
| Role | Light | Dark |
|---|---|---|
| Page ground | #F2F6F4 Mist | #0E1614 Night |
| Card surface | #FFFFFF White | #17201E Ink |
| Raised surface | #FFFFFF + shadow | #1E2926 |
| Primary text | #17201E Ink | #F2F6F4 Mist |
| Secondary text | #66736F Slate | #A7B4B0 |
| Divider | #DDE6E2 | #2C3936 |
| Control outline | #7E8C87 | #55635E |
| Brand / heading | #123D35 | #39D6A3 |
| Accent, safe for text | #0E7A56 | #39D6A3 |
| Selected fill | #E6F7EF | #14312A |
Deep green is not the dark background. It stays the brand colour in both themes. On Night it becomes a band, a header, a filled button — a shape on the page, not the page.
Warm Ivory has no dark equivalent and does not need one. It is a brand surface for marketing, documents and email, none of which invert. Looking for a "dark ivory" is how a palette loses its warm-and-cool split.
The ratio is not the same everywhere. A marketing page is looked at for six seconds; the product is looked at for six hours. The instinct behind both numbers is the same — the green carries it, the mint sparks it.
Green carries whole bands, the footer and the CTA. Mint appears in the wordmark, one call to action and the graphic elements.
Green is the sidebar and the primary button — nothing else. Mint is the active indicator and positive figures. At 20% green a dashboard of leases and payments becomes a green wall, and colour stops meaning anything because everything has it.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 €£$₵&@()[]{}/?!
àâçéèêëîïôùûüÿœæ
A neutral grotesque drawn for screens: tall x-height, open apertures, and figures that stay distinct at the sizes a table of rent actually gets read at. It carries the whole system on its own — headings, interface and every amount — so nothing here depends on a second family being installed. Licensed under the SIL Open Font License, so it ships in the app, on the site, in documents and in email with no per-seat cost.
| Weight | Use |
|---|---|
| Regular 400 | Body copy and long-form reading. |
| Medium 500 | The interface: buttons, labels, nav, table headers. |
| SemiBold 600 | Headings and the wordmark. |
Medium is the most-used weight in the product and the easiest to forget. Bold 700 and above are not part of the system; if something needs more emphasis than SemiBold, it needs to be bigger or to have more space around it.
Fallback stack. Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif — never a bare sans-serif, which resolves to Times on some Windows configurations.
Eleven steps. Anything not on this list is off the system — including "just a bit bigger".
This is a product that displays money. A column of amounts that does not align reads as a broken system before anyone has read a single figure.
Applies to every amount column, every total, every date in a table, and every figure in a chart axis — in the interface, in PDFs and in email.
There is no monospace in this system. Anything a person will read aloud, dictate or type back in is set in Inter with tabular figures, a little extra tracking, and Inter's ss02 Disambiguation set, which slashes the zero and puts a tail on the lowercase l. That is what stops a code being misheard — not a second typeface.
Symbol before the figure, no space: ₵1,250.00. Thousands separated by a comma in English and by a narrow space in French — 1 250,00 FCFA — with the code after the figure where the currency has no symbol.
Never right-align a currency column on the symbol. Align on the decimal point and let the symbol sit flush left in its own column.
Body copy stays between 60 and 70 characters per line. Below 45 the eye jumps; above 80 it loses the return. In a two-column layout, set the column, not the page.
Ranged left, ragged right. Never justified — justification in a language with long compound words opens rivers, and French makes it worse.
Sentence case for headings, buttons and labels. Uppercase only at Micro size with +0.06em tracking. Never uppercase a whole heading, and never a whole sentence.
Every button, tab and navigation label is designed against its French string, not its English one. If it only fits in English, it does not fit.
A narrow non-breaking space before : ; ? ! and inside « ». Not a plain space — it breaks at the wrong place and leaves the colon stranded at the start of a line.
Balance the rag on anything over two lines. Never let a heading end on a single orphaned word, and never hyphenate one.
Weight, not italic. Inter's italics exist but the system does not use them for emphasis in the interface — an italic amount is harder to read and an italic label looks like an error.
Mint Deep #0E7A56 with an underline in body copy; colour alone is never the only cue. Inside dense tables, links may drop the underline provided they carry an icon or sit in a column that is entirely links.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Nothing off the scale, ever. A 15 px gap is not a decision, it is a mistake that survived review.
| Breakpoint | Columns | Gutter | Margin |
|---|---|---|---|
| Desktop ≥1280 | 12 | 24 | 64 |
| Laptop ≥1024 | 12 | 24 | 48 |
| Tablet ≥768 | 8 | 16 | 32 |
| Mobile <768 | 4 | 16 | 16 |
| Print A4 | 12 | 5 mm | 20 mm |
Maximum content width 1280 px; long-form text never exceeds 720 px regardless of viewport.
Shadows carry the brand hue. A pure black shadow over a green-neutral ground reads as dirt.
| Token | Duration | Applies to |
|---|---|---|
| fast | 120 ms | Hover, focus, checkbox |
| base | 200 ms | Dropdowns, tabs, toasts |
| slow | 320 ms | Modals, drawers |
Easing cubic-bezier(.2, 0, 0, 1). Nothing animates longer than 320 ms, and everything respects prefers-reduced-motion.
| Grid | 24 × 24 |
| Live area | 20 × 20 |
| Stroke | 1.5 px |
| Corner radius | 2 px |
| Cap and join | round |
Circular forms are drawn 1–2 units larger than square ones so they read the same size. A 20-unit circle next to a 20-unit square looks smaller than it is.
Five forms, all taken from the mark. They exist so a layout can feel like Patrimoine 365 without putting the logo on it four times.
Height 40 px, radius 6, padding 20 px, label Medium 500. One primary button per view. Hover darkens by one ramp step; pressed by two.
Outline Border Strong at rest — 3.5:1, the minimum for a control boundary. The focus ring is 2 px Mint Deep with a 2 px offset, and it is never removed.
Column heads in Micro caps. Amounts right-aligned with tabular figures. The selected row takes Mint Wash — the one place mint appears in a table.
| Item | Trim | Stock | Finish |
|---|---|---|---|
| Business card | 85 × 55 mm | 400 gsm | Uncoated, matt |
| Letterhead | A4 | 120 gsm | Uncoated |
| Compliment slip | 210 × 99 mm | 120 gsm | Uncoated |
| Folder | A4 + | 300 gsm | Matt laminate, spot UV on mark |
Bleed 3 mm on every printed item. Uncoated stock throughout — a gloss finish shifts the green towards blue and the whole palette follows it.
Print colour. Patrimoine Green converts to roughly 70 / 0 / 13 / 76 arithmetically and to 91 / 43 / 69 / 57 through a US Web Coated profile — press-dependent, so proof on the actual stock and record what comes back. Mint is outside the CMYK gamut and prints duller than it appears on screen; specify a spot colour where it has to be right. No Pantone reference is given until one has been matched against a physical guide.
Signature width 380 px. No image-only signatures, no social icon rows, no quotation. The mark is a PNG at 2× with alt text; everything else is live text so it survives dark mode in the recipient's client.
The product handles other people's money and other people's homes. The voice that suits it is plain, specific and calm — closer to a good statement of account than to a marketing campaign.
| Product | Patrimoine 365 |
| Short form | Patrimoine |
| Never | P365, Patrimoine365, PAT365 |
| Company | Kality Ltd |
One space between the word and the number, always. The 365 is part of the name, not a version number.
What went wrong, then how to fix it, then the code.
A control says what happens: Record payment, then a confirmation that says Payment recorded. Never "Submit", never "OK", and never a verb that does not match the toast that follows it.
Say what will appear here and how to make the first one. An empty table is not an opportunity for a joke or an illustration of a person holding a magnifying glass.
The target is WCAG 2.1 level AA, everywhere — the product, the marketing site, the documents and the email. These are not aspirations; a design that misses them is not finished.
The ledger is the test. Any new colour pairing is measured before it ships, and the result goes into 03-Color/contrast-ledger.csv. If a pairing is not in that file, it has not been checked.
| Folder | Contains |
|---|---|
| 01-Guidelines | This document, PDF and HTML source. |
| 02-Logo | SVG masters, PNG exports, favicon set, non-compliant alternate. |
| 03-Color | ASE, ACO, GPL, Sketch, JSON swatches and the contrast ledger. |
| 04-Typography | Inter — TTF and web, four weights, with the OFL licence. |
| 05-Tokens | JSON, CSS, Sass and Tailwind exports for developer handoff. |
| 06-Graphic-Elements | Pillar, bar, arch, dot grid, ledger stack, icon grid. |
| 07-Templates | Stationery, document, share card and slide artwork. |
patrimoine365-logo-light.svg
patrimoine365-logo-reverse@1600.png
patrimoine365-mark-light@512.png
patrimoine365-app-tile@1024.png
Lower case, hyphen separated, @size suffix on raster exports. Never rename a supplied file; if a new variant is needed, it is added to the package rather than edited in place.
| Situation | File |
|---|---|
| Web, app, anything vector | svg/*.svg |
| Slides, documents, partners | png/*@800.png |
| App stores, large print | png/*@1024.png |
| Browser tab | png/favicon.ico |
| iOS home screen | png/apple-touch-icon-180.png |
| Android | png/android-chrome-512.png |
| Social avatar | png/patrimoine365-avatar-circle@512.png |
The SVG masters are the source. Every PNG in the package is generated from them. If a logo needs to change, it changes in the SVG and the raster set is regenerated — never the other way round.
One file in this package must not be used. 02-Logo/alternates/patrimoine365-logo-light-brightmint.svg is supplied for reference only. It is the originally specified colouring and it fails contrast at 1.9:1.
Questions about applying this system, or a case it does not cover, go to the brand owner before anything ships. A rule that turns out to be wrong gets changed here first — not worked around in one layout.