# my-biz.app — Brand Style Guide

# Brand Style Guide

Design Tokens · Typography · Components

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

Type Scale

Hero Headline · h1 font: Georgia 700 size: 2.6rem / 41.6 px color: --white #3E2723 line-height: 1.15 max-width: 980 px Used: hero section only | Running a business is hard. Your back-office shouldn't be.
Section Title · h2 font: Georgia 700 size: 2.4rem / 38.4 px color: --white #3E2723 line-height: 1.2 | We speak your industry's language.
Card / Sub-heading font: Georgia 700 size: 1.1–1.2rem / ~18 px color: --white #3E2723 | NGO & Non-Profit | Hire Any Odoo Developer
Pricing Display font: Georgia 700 size: 3.2rem / 51.2 px color: gradient text line-height: 1 | $395
Body Copy font: Segoe UI 400 size: 0.88–1.0rem / ~15 px color: --silver #6D4C41 line-height: 1.65–1.7 | 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.
Hero Sub / Intro font: Segoe UI 400 size: 0.92rem / 14.7 px color: --silver #6D4C41 line-height: 1.7 | Specialists for NGOs, Startups, Manufacturing, and Restaurants.
Tagline · Italic font: Segoe UI 400 italic size: 0.88rem / 14 px color: --grey #A1887F | No duct tape. No spreadsheet nightmares. No expensive surprises.
Section Label font: Segoe UI 400 size: 0.72rem / 11.5 px UPPERCASE · tracking 0.14em color: --gold #E65100 | Our Verticals · Simple Pricing · Customization
Button / CTA font: Segoe UI 700 size: 0.8–0.9rem UPPERCASE · tracking 0.06–0.1em color: varies per context | Free Trial · Book Meeting · Get Started
Caption / Date / Meta font: Segoe UI 400 size: 0.65–0.78rem / ~11 px color: --grey #A1887F | 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.

my-biz.app · $395 · Start Free Trial
/* CSS — applied as background */
background: linear-gradient(
135deg,
#BF360C 0%, /* Deep Burnt — --gold-lo */
#E65100 38%, /* Burnt Orange — --gold */
#FB8C00 55%, /* Warm Orange — --gold-hi */
#E65100 75%, /* Burnt Orange — --gold */
#BF360C 100% /* Deep Burnt — --gold-lo */
);
/* 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.

Primary Button

bg: orange 5-stop gradient
color: --bg #EFEBE9
font: Segoe UI 700 · 0.9rem
UPPERCASE · tracking 0.06em
padding: 14px 30px
radius: 2px
shadow: 0 4px 20px --gold-glow
Hover: opacity 0.88 + shadow deepen

Secondary Button

bg: transparent
border: 1px solid --grey #A1887F
color: --white #3E2723
font: Segoe UI 500 · 0.9rem
padding: 14px 30px · radius: 2px
Hover: border + color → --gold #E65100

Nav CTA — on dark header

Free Trial: border 1px + color --gold #E65100
→ fills solid #E65100 on hover
Book Meeting: border rgba(161,136,127,.55)
color --grey #A1887F
→ border + color --gold-hi #FB8C00 on hover
font: Segoe UI 700 · 0.8rem UPPERCASE
tracking: 0.08em · padding: 7px 18px · radius: 2px

Pills & Badges

✦ One Stop Shop · Built for Real Businesses
Most Popular

Eyebrow pill: border + color --gold
font-size 0.7rem UPPERCASE
letter-spacing 0.12em · radius: 100px
padding: 6px 16px
Badge: gradient background · color --bg
font-size 0.65rem UPPERCASE · weight 700
padding: 4px 12px · radius: 2px

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.

Donor CRM · Grant Accounting · Impact Reports

bg: --card #FFF3E0
left border: 3px solid gradient
padding: 40px 32px
border-radius: 0

Featured card · gold ring

Most Popular

### On the Rise · $395

Industry-specific modules, professional report templates, up to 10 users, priority onboarding, email & chat support.

bg: --lift #F5ECE4
box-shadow: 0 0 0 1px --gold + 0 0 28px --gold-glow
padding: 48px 40px
border-radius: 0

News card · border-top rule

NGO

How a regional NGO cut grant reporting time by 70%

Automating donor reconciliation freed 15 hours per week that went straight back into their mission.

June 2025

bg: transparent
border-top: 1px solid --border
Hover: border-top-color → --gold
padding-top: 28px

Section Backgrounds

--bg

Latte #EFEBE9

hero, news, customization

--surf1

Warm Latte #E8E0DA

verticals, pricing sections

--bg-deep

Dark Roast #3E2723

footer, nav, modal overlay

Sections alternate between --bg and --surf1 to create rhythm without hard borders.

06 · Spacing & Layout

## Spacing, Borders & Radius

Spacing is defined in `px` for fixed elements and `vw` for horizontal gutters, ensuring layout breathes appropriately across all viewport widths.

Key Spacing Values

Context | Value |
--- | --- | ---
Page horizontal gutter | 0 8vw |
Section vertical padding | 90px 8vw |
Hero padding | 44px 6vw |
Card padding (standard) | 40px 32px |
Card padding (featured) | 48px 40px |
Nav height | 62px |
Card grid gap | 1px (border bg) |
News grid gap | 24px |
Footer padding | 72px 8vw 40px |
Mobile section padding | 60px 5vw |

Border Radius Scale

0 px
Cards

2 px
Buttons

4 px
Chat
inputs

6 px
Chat
panel

100 px
Pill labels

Border & Shadow Tokens

--border · Hairline divider

rgba(93, 64, 55, 0.25)

Card grids, nav, table rows, quote rule

Featured card ring + glow

0 0 0 1px #E65100, 0 0 28px rgba(230,81,0,.18)

Focus ring · inputs & chat

border: 1px solid --gold + box-shadow 0 0 0 2px --gold-glow

Grid Layouts

Section | CSS Grid | Min column | Gap
--- | --- | --- | ---
Verticals | auto-fit | 220px | 1px (gold hairline)
News | auto-fit | 220px | 24px
Pricing | auto-fit | 300px · max 820px | 1px (gold hairline)
Customization | auto-fit | 300px | 1px (gold hairline)

Responsive Breakpoints

Breakpoint | Changes
--- | ---
≤ 768 px | h1 → 1.9rem · nav CTAs hide → show compact Free Trial · chat panel hidden
≤ 480 px | h1 → 1.5rem · nav/section padding → 5vw · modal padding reduced

07 · Usage Rules

## Design Guidelines

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: