Vorx Guide - Vorx Consultancy
Vorxcon Brand Design System

Brand Design System
& Style Guide

Complete reference for colours, typography, components and usage guidelines. Use this page to maintain visual consistency across all touchpoints.

Primary font Cormorant Garamond
UI font Outfit
Primary gold #c49a2e
Primary navy #080f1d
01 — Colour

Brand Colour Palette

All colours defined as CSS custom properties on :root. Click any swatch to copy its hex value.

Primary tokens

#c49a2e
Primary gold
--gs-gold
CTAs, ticker, accents
#d4b24a
Light gold
--gs-gold2
Icons, stat numbers
#c8a93e
Mid gold
--gs-gold3
Italic em highlights
#080f1d
Deep navy
--gs-navy
Hero & tools bg
#0e1a2f
Mid navy
--gs-navy2
Stats & testimonials bg
#162238
Light navy
--gs-navy3
Card surfaces on dark
#f6f2ea
Cream
--gs-cream
Light section bg
#ede8de
Cream 2
--gs-cream2
Process section bg
#d8d0be
Border
--gs-border
Card & input borders
#1a2744
Body text
--gs-text
Headings & body on light
#7a8ba8
Muted text
--gs-muted
Secondary / helper text

Gold scale

50
100
200
300
gold2
gold3
gold
600
800
900

Navy scale

50
100
200
300
400
navy3
navy2
navy

Colour combinations

Gold on deep navy
Aa 123
Hero headings, ticker
White on gold
Aa 123
Primary CTA button
Gold2 on navy2
Aa 123
Stat numbers, eyebrows
Gold on cream
Aa 123
Service card links
Navy text on white
Aa 123
Body copy, forms
Gold2 on navy3
Aa 123
Tool cards, badges

Semantic-only colours

Never use these as brand colours — reserved for functional purposes only.

#25D366 — WhatsApp button only
#4ade80 — Live status dot only
#dc2626 — Form validation errors only
#15803d — Form success state only
02 — Typography

Type System

Two typefaces — Cormorant Garamond for editorial/display, Outfit for all UI and body copy.

Cormorant Garamond Serif · Headings
Google Fonts · Display / Editorial · 400, 600, 700 + Italic
Expand Your Business
Anywhere in the World
Regular 400
The quick brown fox jumps over the lazy dog
Italic 400
The quick brown fox jumps over the lazy dog
SemiBold 600
The quick brown fox jumps over the lazy dog
Bold 700
The quick brown fox jumps over the lazy dog
Bold Italic 700
The quick brown fox jumps over the lazy dog
Outfit Sans · UI & Body
Google Fonts · Modern / Geometric · 300, 400, 500, 600, 700
500+ Businesses Set Up Globally
Light 300
Aa Bb Cc 0–9 ?,.
Regular 400
Aa Bb Cc 0–9 ?,.
Medium 500
Aa Bb Cc 0–9 ?,.
SemiBold 600
Aa Bb Cc 0–9 ?,.
Bold 700
Aa Bb Cc 0–9 ?,.

Type scale

Hero H1
clamp(2.4rem, 5vw, 4.5rem)
Cormorant Garamond · 700 · lh 1.08
Expand Your Business Anywhere
Section title
clamp(1.6rem, 3vw, 2.8rem)
Cormorant Garamond · 700 · lh 1.2
Numbers That Speak For Themselves
Enquiry H2
clamp(1.8rem, 3.5vw, 3rem)
Cormorant Garamond · 700 · lh 1.15
Let's Build Your Global Business
Tool name
1.5rem
Cormorant Garamond · 700 · lh 1.2
Free Zone Finder
Service name
1.3rem
Cormorant Garamond · 700
Company Registration
Step / card name
1.15rem
Cormorant Garamond · 700
Free Consultation
Stat number
3rem
Cormorant Garamond · 700 · lh 1
500+
Hero subtext
1rem
Outfit · 300 · lh 1.8
We handle every step of your global expansion.
Body / desc
0.85rem
Outfit · 300 · lh 1.7
Full company formation services across 38+ countries.
Button text
0.9rem
Outfit · 700 · ls 0.3px
Get Your Free Estimate
Eyebrow
0.7rem
Outfit · 400 · ls 3px · UC
Our Track Record
Badge / ticker
0.72rem
Outfit · 700 · ls 2px · UC
Company Registration
Form label
0.7rem
Outfit · 700 · ls 1px · UC
Full Name
Tag / chip
0.72rem
Outfit · 500
LLC · Free Zone · Branch Office
Micro / HUD
0.65rem
Outfit · 400–700 · ls 1.5px · UC
Businesses Set Up

Typography on brand backgrounds

Our Track Record

Numbers That Speak For Themselves

Used in: Hero, Tools section, Testimonials section

Live Activity
Arjun S.

just submitted a Dubai LLC enquiry

Used in: Stats section, notification cards

What We Do

End-to-End Global Services

Used in: Services section, Countries section, Contact form

03 — Components

UI Component Library

All interactive and display components used across the site.

Buttons

Badges & Tags

Trusted by 350+ Clients Worldwide Free Tool Company Registration
LLCFree ZoneBranch OfficeInvestor VisaWork PermitDMCCJAFZAIFZARAKEZVATAccounting
Free Tool

Stat cards

500+
Business Set UpsAcross 50+ countries
350+
ClientsWorldwide & growing
50+
CountriesGlobal reach
12+
YearsTrusted since 2012
1,500+
VisasWork, investor & residency

Service cards

Company Registration

Full company formation services across 38+ countries — from LLC and free zone entities to branch offices.

LLCFree ZoneBranch Office
Learn more
Visa & Immigration

Investor visas, work permits, family sponsorship and permanent residency pathways.

Investor VisaWork PermitPR
Learn more
Free Zone Setup

Navigate 25+ UAE and international free zones for maximum tax efficiency.

DMCCJAFZAIFZARAKEZ
Learn more

Tool cards (dark)

Free Tool
Free Zone Finder

Filter 25+ free zones by country, industry and budget. Find the perfect free zone in seconds.

UAE, Singapore, Hong Kong & more
Filter by industry & budget
Cost, timeline & visa info
Open Free Zone Finder
Free Tool
Country Comparison

Compare up to 4 countries side by side — tax rates, setup timelines, visa policies and more.

8 countries available
Tax, visa & business data
Auto winner recommendation
Open Country Comparison

Process steps

Free Consultation

Tell us your goals, industry and preferred country.

Document Preparation

We guide you through every document required.

We Handle Everything

Registration, licensing, visa applications — all managed.

Open for Business

Receive your licence, visa and bank account.

Testimonial card

"Consultancy turned our vision into reality. Their expertise in global expansion made everything seamless. The professionalism and dedication were truly commendable."

AP
Mr. Anamalai Pandian
The Netherlands

Country chips

UAE (Dubai)
United Kingdom
United States
Singapore
Canada
Australia
Germany
Netherlands
Hong Kong
Malta

Contact form

Get Your Free Estimate
Fill in your details — we'll respond within 24 hours.
Please select a service to continue.

Trust list (dark bg)

Free initial consultation — no obligation
Response within 24 hours guaranteed
Transparent process with no hidden fees
500+ businesses successfully set up
Expert team across all 50+ countries

Live activity notification

Live Activity
Company Setup
Arjun S.
just submitted a Dubai LLC enquiry
Just now  ·  Verified

Ticker bar

Company Registration
Free Zone Setup
Investor Visas
Residency by Investment
Bank Account Opening
Business Immigration
Trademark Registration
Tax & Compliance
Global Expansion
Company Registration
Free Zone Setup
Investor Visas
Residency by Investment
Bank Account Opening
Business Immigration
Trademark Registration
Tax & Compliance
Global Expansion

WhatsApp floating button

Fixed position · bottom-right · 60px × 60px
Background: #25D366 · semantic only — never brand use

Logo marquee card

Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
04 — Surfaces

Background Surfaces

Each section of the site uses a distinct surface. Never mix navy and cream within the same section.

#080f1d — var(--navy)

Used in: Hero, Tools section

White (#fff) headings · Gold (--gs-gold2) accents · rgba(255,255,255,.45) body text

#0e1a2f — var(--navy2)

Used in: Stats, Testimonials, Video section

White headings · Gold2 eyebrows · rgba(255,255,255,.35) labels

#162238 — var(--navy3)

Used in: Tool cards, notification cards

White headings · Gold2 icons · rgba(255,255,255,.4) desc text

#f6f2ea — var(--cream)

Used in: Services, Countries

Navy (--gs-text) headings · Gold (--gs-gold) eyebrows & links

#ede8de — var(--cream2)

Used in: Process section

Navy headings · Gold process line

#ffffff — white

Used in: Service cards, form cards

Navy (--gs-text) headings · Border (--gs-border) dividers

05 — Reference

CSS Variables

Copy the full :root block into your theme's stylesheet. All components reference these tokens exclusively.

:root {
  /* ── Brand Gold ── */
  --gs-gold:   #c49a2e;  /* Primary — CTAs, ticker, key accents */
  --gs-gold2:  #d4b24a;  /* Light gold — icons, stat numbers */
  --gs-gold3:  #c8a93e;  /* Mid gold — italic em highlights */

  /* ── Navy ── */
  --gs-navy:   #080f1d;  /* Deep navy — hero & tools bg */
  --gs-navy2:  #0e1a2f;  /* Mid navy — stats & testimonials */
  --gs-navy3:  #162238;  /* Light navy — card surfaces on dark */

  /* ── Surface ── */
  --gs-cream:  #f6f2ea;  /* Light section background */
  --gs-cream2: #ede8de;  /* Process section background */
  --gs-border: #d8d0be;  /* Card & input borders */
  --gs-text:   #1a2744;  /* Body text on light backgrounds */
  --gs-muted:  #7a8ba8;  /* Secondary / helper text */

  /* ── Fonts ── */
  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --ff-sans:  'Outfit', system-ui, sans-serif;

  /* ── Semantic (functional only) ── */
  --wa:       #25D366;  /* WhatsApp button only */
  --success:  #4ade80;  /* Live status dot only */
  --error:    #dc2626;  /* Form validation only */
}

Google Fonts import

<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=Cormorant+Garamond:
      ital,wght@0,400;0,600;0,700;1,400;1,700
      &family=Outfit:wght@300;400;500;600;700
      &display=swap" rel="stylesheet">
Copied!