Spaces:

ScaleupXQ
/

big-screen

Runtime error

App Files Files Community

big-screen / BRAND_GUIDELINES.md

Mathias

Update sdr-feature skill with browser push workflow

5f31fe8 2 months ago

preview code

raw

history blame contribute delete

8.7 kB

ScaleupXQ Brand Guidelines

A comprehensive guide to our visual identity, tone of voice, and core values. This guide ensures consistency and cohesiveness in every communication, helping amplify the ScaleupXQ brand with clarity and impact.

1. Colors

Primary Colors

The revised color palette for ScaleupXQ reflects the company's dynamic and authoritative stance in the sales consulting industry. Bold and expressive, designed to make a strong statement.

Name	Hex Code	Usage
Primary 100	`#6D3EF3`	Primary brand color, headers, key highlights
Primary 200	`#602DF2`	Darker primary variant, hover states

Secondary Colors

These colors reinforce ScaleupXQ's identity and enhance visual communication with potential clients.

Family	100 (Lightest)	200	300	400 (Darkest)
Lilac	`#F4F0FF`	`#E8E0FF`	`#B89EFF`	`#1E0C32`
Tangerine	`#FFEBE9`	`#FFD8D3`	`#FF8474`	`#391418`
Emerald	`#E8FAF3`	`#D1F5E6`	`#70E0B1`	`#00302A`
Marigold	`#FFFDEF`	`#FFFADF`	`#FFF09B`	`#2E2A22`
Zodiac	`#F2FCFE`	`#E4F9FD`	`#ABECFA`	`#001630`
Sierra	`#FEF4EC`	`#FDE9D9`	`#FAB987`	`#2D1622`

Base Colors

Name	Hex Code	Usage
Base 100	`#FFFFFF`	White backgrounds
Base 200	`#F5F5F6`	Light gray backgrounds
Base 300	`#D8D8D9`	Borders, dividers
Base 400	`#B2B1B3`	Muted text
Base 500	`#6E6D71`	Secondary text
Base 600	`#0D0B13`	Dark backgrounds, primary text

Color Level Usage (Important!)

ScaleupXQ uses colors at different "levels" for different purposes:

Level	Purpose	Example
100	Light backgrounds, subtle fills	`#F4F0FF` (Lilac 100) for card backgrounds
200	Slightly darker backgrounds, borders	`#E8E0FF` (Lilac 200) for hover states
300	Vibrant accents, charts, progress bars	`#B89EFF` (Lilac 300) for highlights
400	Dark text, strong contrast	`#1E0C32` (Lilac 400) for headings on light bg

Dashboard Color Mapping

:root {
    /* Primary brand */
    --primary: #6D3EF3;        /* Primary - main accent, buttons, links */
    --primary-dark: #602DF2;   /* Primary dark - hover states */

    /* Status colors - ALWAYS use 300-level (vibrant) for both themes */
    --success: #70E0B1;        /* Emerald 300 - positive metrics */
    --warning: #FFF09B;        /* Marigold 300 - caution, pending */
    --danger: #FF8474;         /* Tangerine 300 - negative, errors */
    --info: #ABECFA;           /* Zodiac 300 - informational */

    /* Card backgrounds - use 100-level colors */
    --bg-lilac: #F4F0FF;       /* Lilac 100 */
    --bg-emerald: #E8FAF3;     /* Emerald 100 */
    --bg-zodiac: #F2FCFE;      /* Zodiac 100 */

    /* Base colors */
    --bg-white: #FFFFFF;       /* Base 100 - main background */
    --bg-light: #F5F5F6;       /* Base 200 - subtle background */
    --border: #D8D8D9;         /* Base 300 - borders, dividers */
    --text-muted: #6E6D71;     /* Base 500 - secondary text */
    --text-dark: #0D0B13;      /* Base 600 - primary text */
}

2. Typography

Font: Inter

ScaleupXQ uses Inter as its typographic standard. This modern and bold font offers a range of weights, providing exceptional flexibility for various design needs.

Download: Inter Font

Font Weights

Weight	CSS Value	Usage
Black	`900`	Hero headlines, impact statements
Bold	`700`	Section headers, emphasis
Semibold	`600`	Subheadings, labels
Medium	`500`	Body text emphasis, buttons
Regular	`400`	Body text, paragraphs

Implementation

<!-- Google Fonts CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 { font-weight: 900; }
h2, h3 { font-weight: 700; }
h4, .label { font-weight: 600; }
.button { font-weight: 500; }
body { font-weight: 400; }

3. Iconography

Style Guidelines

Our iconography features clean and minimalistic line icons, providing a perfect counterbalance to our bold fonts and vibrant color palette.

Characteristics:

Simple, understated design
Line-based (not filled)
Consistent stroke width
Enhances clarity and readability

Recommended Icon Sets:

Lucide Icons
Heroicons (outline style)
Phosphor Icons (light weight)

4. Assets

Logo Usage

Variant	Use Case
Color Light	Dark backgrounds
Color Dark	Light backgrounds
Mono Light	Single-color on dark
Mono Dark	Single-color on light

Logomark

The logomark integrates building blocks and an upward-pointing arrow, symbolising:

Foundational strength
Growth trajectory
Building and elevating B2B sales organizations

Brand Element

The graphical brand element features a dynamic composition of squares forming an arrow and stairs, symbolising growth and forward momentum.

5. Tone of Voice

Bold, Engaging, and Playfully Authentic

We communicate with:

Quality	Description
Clarity	Assertive messaging that's impactful and memorable
Engagement	Connect with audience on a deeper level
Playfulness	Touch of humor adds unique charm
Authenticity	Genuine commitment to excellence shines through

Writing Guidelines

Do:

Use active voice
Be direct and confident
Keep messaging concise
Add personality where appropriate
Focus on value and outcomes

Don't:

Use jargon unnecessarily
Be overly formal or stiff
Make vague claims
Use passive constructions
Overuse superlatives

Example Phrases

Instead of...	Write...
"We provide solutions"	"We build sales machines"
"Our services include"	"We deliver"
"It is possible that"	"You can"
"In order to"	"To"

6. Dashboard-Specific Guidelines

Card Design

.card {
    background: rgba(109, 62, 243, 0.05);
    border: 1px solid rgba(109, 62, 243, 0.2);
    border-radius: 12px;
}

Progress Indicators

Use 300-level colors (vibrant) for progress bars - consistent across light and dark themes:

0-25%: Tangerine 300 (#FF8474) - Danger/low
25-50%: Sierra 300 (#FAB987) - Caution
50-75%: Marigold 300 (#FFF09B) - Warning/medium
75-99%: Zodiac 300 (#ABECFA) - Good
100%+: Emerald 300 (#70E0B1) - Excellent/complete

Charts

Primary chart colors (in order):

#6D3EF3 - Primary
#70E0B1 - Emerald
#ABECFA - Zodiac
#FFF09B - Marigold
#B89EFF - Lilac
#FAB987 - Sierra
#FF8474 - Tangerine

Leaderboard Rankings

Rank	Style
1st	Gold gradient (`#FFF09B` to `#FAB987`)
2nd	Silver (`#D8D8D9`)
3rd	Bronze (`#FAB987`)
Others	Subtle border

Quick Reference

/* Copy-paste ready CSS variables */
:root {
    --scaleup-primary-100: #6D3EF3;
    --scaleup-primary-200: #602DF2;

    --scaleup-lilac-100: #F4F0FF;
    --scaleup-lilac-200: #E8E0FF;
    --scaleup-lilac-300: #B89EFF;
    --scaleup-lilac-400: #1E0C32;

    --scaleup-tangerine-100: #FFEBE9;
    --scaleup-tangerine-200: #FFD8D3;
    --scaleup-tangerine-300: #FF8474;
    --scaleup-tangerine-400: #391418;

    --scaleup-emerald-100: #E8FAF3;
    --scaleup-emerald-200: #D1F5E6;
    --scaleup-emerald-300: #70E0B1;
    --scaleup-emerald-400: #00302A;

    --scaleup-marigold-100: #FFFDEF;
    --scaleup-marigold-200: #FFFADF;
    --scaleup-marigold-300: #FFF09B;
    --scaleup-marigold-400: #2E2A22;

    --scaleup-zodiac-100: #F2FCFE;
    --scaleup-zodiac-200: #E4F9FD;
    --scaleup-zodiac-300: #ABECFA;
    --scaleup-zodiac-400: #001630;

    --scaleup-sierra-100: #FEF4EC;
    --scaleup-sierra-200: #FDE9D9;
    --scaleup-sierra-300: #FAB987;
    --scaleup-sierra-400: #2D1622;

    --scaleup-base-100: #FFFFFF;
    --scaleup-base-200: #F5F5F6;
    --scaleup-base-300: #D8D8D9;
    --scaleup-base-400: #B2B1B3;
    --scaleup-base-500: #6E6D71;
    --scaleup-base-600: #0D0B13;
}