+ my-biz.app
+ Version 1.0 · 2025
+ Confidential — for designer use only
+
+ Back-office built on Odoo CE
+ Web: my-biz.app
+
+
+
+
+
+
+
+
+
+
+
01 · Colour Palette
+
Brand Colours
+
+ All colours are defined as CSS custom properties in :root.
+ Use the exact HEX values for digital work. CMYK values are converted mathematically
+ and should be verified against a press proof before final print production.
+
+
+
+
Backgrounds & Surfaces
+
+
+
+
+
+
Latte
+
--bg
+
HEX#EFEBE9
+
RGB239, 235, 233
+
CMYK0, 2, 2, 6
+
UsePage background
+
+
+
+
+
+
+
Warm Latte
+
--surf1
+
HEX#E8E0DA
+
RGB232, 224, 218
+
CMYK0, 3, 6, 9
+
UseAlternate sections
+
+
+
+
+
+
+
Cream
+
--card
+
HEX#FFF3E0
+
RGB255, 243, 224
+
CMYK0, 5, 12, 0
+
UseCards, modal, chat
+
+
+
+
+
+
+
Lifted Cream
+
--lift
+
HEX#F5ECE4
+
RGB245, 236, 228
+
CMYK0, 4, 7, 4
+
UseCard hover, featured bg
+
+
+
+
+
+
+
Dark Roast
+
--bg-deep
+
HEX#3E2723
+
RGB62, 39, 35
+
CMYK0, 37, 44, 76
+
UseFooter, nav, overlays
+
+
+
+
+
+
+
Text Colours
+
+
+
+
+
+
Dark Roast
+
--white · Headings
+
HEX#3E2723
+
RGB62, 39, 35
+
CMYK0, 37, 44, 76
+
Useh1, h2, card titles
+
+
+
+
+
+
+
Medium Roast
+
--light · Body
+
HEX#5D4037
+
RGB93, 64, 55
+
CMYK0, 31, 41, 64
+
UseBody text, paragraphs
+
+
+
+
+
+
+
Deep Brown
+
--silver · Secondary
+
HEX#6D4C41
+
RGB109, 76, 65
+
CMYK0, 30, 40, 57
+
UseTeasers, sub-copy
+
+
+
+
+
+
+
Warm Taupe
+
--grey · Muted
+
HEX#A1887F
+
RGB161, 136, 127
+
CMYK0, 16, 21, 37
+
UseDates, captions, placeholders
+
+
+
+
+
+
+
Accent & CTA Colours
+
+
+
+
+
+
Burnt Orange
+
--gold · Primary
+
HEX#E65100
+
RGB230, 81, 0
+
CMYK0, 65, 100, 10
+
Pantone~PMS 1595 C
+
UseButtons, links, accents
+
+
+
+
+
+
+
Warm Orange
+
--gold-hi · Highlight
+
HEX#FB8C00
+
RGB251, 140, 0
+
CMYK0, 44, 100, 2
+
Pantone~PMS 137 C
+
UseHover states, gradient peak
+
+
+
+
+
+
+
Deep Burnt
+
--gold-lo · Shadow
+
HEX#BF360C
+
RGB191, 54, 12
+
CMYK0, 72, 94, 25
+
Pantone~PMS 1675 C
+
UseGradient start/end stops
+
+
+
+
+
+
+
Orange Glow
+
--gold-glow
+
RGBA230, 81, 0 / 18%
+
UseBox shadows, focus rings
+
+
+
+
+
+
+
Border
+
--border
+
RGBA93, 64, 55 / 25%
+
UseGrid gaps, rule lines, table rows
+
+
+
+
+
+
+
+ Print Note:
+ CMYK values are calculated conversions. Colour accuracy depends on paper stock and printing process.
+ Always request a proof. For single-colour print, use Burnt Orange #E65100 (CMYK 0, 65, 100, 10)
+ as the primary brand accent. Pantone approximations are provided as reference only.
+
+
+
+
+
+
+
+
02 · Typography
+
Type System
+
+ Two typefaces form the full type system. Georgia brings authority and warmth to display text;
+ Segoe UI delivers clean legibility in body copy and UI elements.
+
+
+
+
Typefaces
+
+
+
Display / Headings
+
Aa Bb Cc
+
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ a b c d e f g h i j k l m n o p q r s t u v w x y z
+ 0 1 2 3 4 5 6 7 8 9 $ % & . , ; : ! ?
+
+
Georgia, "Times New Roman", serif
+
+ Used for: h1, h2, card titles, pricing, modal title, logo text, rates
+
+
+
+
Body / UI / System
+
Aa Bb Cc
+
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ a b c d e f g h i j k l m n o p q r s t u v w x y z
+ 0 1 2 3 4 5 6 7 8 9 $ % & . , ; : ! ?
+
+
"Segoe UI", system-ui, -apple-system, sans-serif
+
+ Used for: body copy, buttons, labels, nav, forms, captions, chat messages
+
+
+ We eliminate the chaos behind the scenes — invoicing, HR,
+ inventory, CRM, reports — all in one place, set up for your
+ exact industry, ready from day one.
+
+
+
+ June 2025 · per year, billed annually · Powered by Odoo Community Edition
+
+
+
+
+
+
+
+
+
+
+
+
03 · Brand Gradient
+
Metallic Orange Gradient
+
+ A 5-stop metallic gradient is the centrepiece of the visual identity.
+ It appears on primary buttons, the logo, pricing figures, modal titles, and badges —
+ conveying warmth, craft, and premium quality.
+
+ /* CSS — applied as text clip */
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+
+
+
+
+
Gradient as button background
+
+
+
+
Gradient as badge background
+ Most Popular
+
+
+
Gradient as text fill (logo, price)
+ $65 USD / hour
+
+
+
+
+
+ Print equivalent:
+ Replicate with a left-to-right blend of Deep Burnt (#BF360C) through Burnt Orange (#E65100) to Warm Orange (#FB8C00) and back.
+ For single-ink applications, use solid Burnt Orange #E65100.
+ Avoid using the gradient as small text below 14 pt — prefer solid Burnt Orange instead.
+
+
+
+
+
+
+
04 · Buttons & CTAs
+
Interactive Elements
+
+ Four button variants cover all CTA contexts. Use UPPERCASE for nav-sized buttons;
+ sentence case is acceptable for large hero buttons. Never modify the border-radius above 2 px for buttons.
+
+ Interaction principle:
+ All hover states use CSS transition: 0.2s on colour, border, and opacity only.
+ Never use animation or keyframes on buttons — transitions only.
+
+
+
+
+
+
+
05 · Cards & Surfaces
+
Card Styles
+
+ Cards have no border-radius — sharp corners communicate structure and precision.
+ A gold accent line or featured ring differentiates card hierarchy.
+
+
+
+
+
+
Standard card · on Latte bg
+
+
NGO & Non-Profit
+
Grant tracking, donor management, project accounting, and compliance reporting — built for organizations that answer to their mission.
+ These rules maintain brand consistency across all touchpoints — web, print, social, and presentation decks.
+
+
+
+
+
Do ✓
+
+
Use Dark Roast (#3E2723) for all headlines on light backgrounds
+
Use Burnt Orange (#E65100) as the primary CTA and accent colour
+
Use Georgia serif for any display or decorative headline
+
Apply the 5-stop orange gradient to primary buttons, logos, and pricing figures
+
Keep section labels in UPPERCASE with 0.14–0.2em letter-spacing
+
Use Latte (#EFEBE9) as the page background on all light-theme layouts
+
Use Dark Roast (#3E2723) for all footer, header, and overlay dark areas
+
Pair warm tones together — Cream cards on Latte background, Dark Roast footer
+
Use Warm Taupe (#A1887F) for dates, metadata, and placeholder text
+
Maintain 2px border-radius on all button elements
+
+
+
+
Don't ✗
+
+
Don't introduce pure black (#000) or cold grey tones — brand is warm-only
+
Don't use Burnt Orange for body text on light backgrounds (insufficient contrast for long copy)
+
Don't add border-radius above 6px to cards or containers
+
Don't use Segoe UI for display headings or decorative text
+
Don't mix cold colours — no blues, purples, teals, or cool greens
+
Don't stretch or distort the logo — scale proportionally only
+
Don't place gradient text smaller than 14pt / 18px
+
Don't use more than two font sizes on a single card or label group
+
Don't use the outline/ghost button style on a light (Latte/Cream) background for primary actions
+
Don't add drop-shadows to standard cards — use the featured ring only on the highlighted item
+
+
+
+
+
+
Minimum Logo Sizes
+
+
+
+
+
+
36 px · Nav bar (minimum digital)
+
+
+
+
+
+
52 px · Cover / hero style guide standard
+
+
+
+ For print materials, maintain a minimum clear space of half the logo height on all sides.
+ Never place the logo on a mid-tone background without sufficient contrast.
+ Preferred backgrounds: Dark Roast #3E2723 or Cream #FFF3E0.
+
+
+
+
+
+
Tone & Voice (for copy)
+
+
+
+
✓ Direct and confident — "We eliminate the chaos"
+
✓ Warm but professional — no jargon, no fluff
+
✓ Industry-specific empathy — "we've lived your challenges"
+
✓ Transparent on pricing — "No expensive surprises"
+
+
+
+
+
✗ Don't use buzzwords: "synergise", "leverage", "ecosystem"
+
✗ Don't make vague promises — be specific and measurable
+
✗ Don't use exclamation marks in formal print materials
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Now let me commit this to the repository:
+