my-biz.app — Brand Style Guide

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

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

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

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