Brand & UI system
eWebXperts Brand Guidelines
Logo, colour, typography and the reusable components that make up the website design system.
01 · Logo
The Growth Node
The mark forms an X from two strokes: a rising growth arrow and a diagonal of pixels, crossing at a connected node. It reads as web, data and growth, and stays legible from a 16px favicon to a billboard.
Clear space
Keep space equal to the height of the node ring around the logo.
Minimum size
Horizontal logo 120px wide on screen; icon 16px for favicons.
Don'ts
Don't recolour the mark, add effects, stretch it or place it on busy imagery.
02 · Colour
Colour Palette
A calm, technology-led palette. Midnight and white carry most layouts; blue drives action; cyan and violet are accents used sparingly, mainly inside gradients.
--ewx-midnight--ewx-electric-blue--ewx-cyan--ewx-violet--ewx-background--ewx-dark-section--ewx-text--ewx-slate-500--ewx-grad-blue-cyan--ewx-grad-blue-violet--ewx-grad-midnight03 · Typography
Type System
Sora for headlines (geometric, technical), DM Sans for reading, JetBrains Mono for labels and data.
Sora 700 · clamp(40–76px) · −0.045emIdeas into growth
Sora 700 · clamp(32–50px) · −0.04emEverything you need to grow
Sora 600 · 22–28pxConversion focused
DM Sans 400 · 17px / 1.65We design, develop and market digital experiences that help businesses grow online.
JetBrains Mono 500 · 12px · uppercase · 0.14emFeatured service
04 · Components
UI Components
Every section on the site is built from these reusable classes, ready to map to Elementor global widgets and templates.
Tags & icons
Form field · .ewx-field
Stat · .ewx-stat
Accordion · .ewx-faq
Native details/summary elements: accessible, no JavaScript required.
Component list
Header, Footer, Hero, Page hero, Service card, Feature block, Process timeline, Showcase row, Industry tabs, Portfolio card, Case study, Testimonial carousel, CTA band, FAQ, Blog card, Article, Contact form.
05 · Tokens
CSS Variables
The full design system lives in /assets/css/style.css. Map these to Elementor Site Settings (Global Colours and Fonts).
:root{
/* brand */
--ewx-midnight:#081426; /* primary */
--ewx-blue:#2563EB; /* secondary / action */
--ewx-cyan:#06B6D4; /* accent */
--ewx-violet:#7C3AED; /* highlight */
--ewx-bg:#F8FAFC; /* page background */
--ewx-dark:#050B14; /* dark sections */
--ewx-text:#172033; /* body text */
/* neutrals (blue-biased slate) */
--ewx-white:#FFFFFF;
--ewx-50:#F1F5F9;
--ewx-100:#E7EDF5;
--ewx-200:#D6DFEA;
--ewx-300:#B4C2D4;
--ewx-400:#8494AB;
--ewx-500:#5B6B82;
--ewx-600:#3E4C62;
--ewx-line:rgba(8,20,38,.09);
--ewx-line-dark:rgba(255,255,255,.09);
--ewx-ink-soft:#4A5872;
--ewx-on-dark:#E6EDF7;
--ewx-on-dark-soft:#94A3B8;
/* semantic */
--ewx-success:#10B981;
--ewx-warning:#F59E0B;
--ewx-danger:#EF4444;
/* gradients (use sparingly) */
--ewx-grad-blue-cyan:linear-gradient(120deg,#2563EB 0%,#06B6D4 100%);
--ewx-grad-blue-violet:linear-gradient(120deg,#2563EB 0%,#7C3AED 100%);
--ewx-grad-text:linear-gradient(100deg,#2563EB 0%,#06B6D4 55%,#7C3AED 110%);
--ewx-grad-midnight:radial-gradient(1100px 600px at 80% -10%,rgba(37,99,235,.28),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(124,58,237,.18),transparent 60%),#050B14;
/* type */
--ewx-font-display:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--ewx-font-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--ewx-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--ewx-fs-xs:.8125rem; /* 13 */
--ewx-fs-sm:.9375rem; /* 15 */
--ewx-fs-base:1.0625rem;/* 17 */
--ewx-fs-lg:1.1875rem; /* 19 */
--ewx-fs-h4:1.25rem; /* 20 */
--ewx-fs-h3:clamp(1.375rem,1.1rem + .9vw,1.75rem);
--ewx-fs-h2:clamp(2rem,1.4rem + 2.2vw,3.125rem);
--ewx-fs-h1:clamp(2.5rem,1.6rem + 3.6vw,4.75rem);
--ewx-lh-tight:1.08;
--ewx-lh-body:1.65;
/* space (8pt) */
--ewx-s1:.25rem;--ewx-s2:.5rem;--ewx-s3:.75rem;--ewx-s4:1rem;--ewx-s5:1.5rem;--ewx-s6:2rem;--ewx-s7:3rem;--ewx-s8:4rem;--ewx-s9:6rem;--ewx-s10:8rem;
--ewx-section:clamp(4.5rem,3rem + 6vw,8rem);
--ewx-gutter:clamp(1rem,.5rem + 2.5vw,2.5rem);
--ewx-container:1240px;
/* shape & depth */
--ewx-r-sm:10px;--ewx-r-md:16px;--ewx-r-lg:24px;--ewx-r-xl:32px;--ewx-r-pill:999px;
--ewx-shadow-sm:0 1px 2px rgba(8,20,38,.05),0 2px 8px -2px rgba(8,20,38,.06);
--ewx-shadow-md:0 1px 2px rgba(8,20,38,.04),0 12px 32px -12px rgba(8,20,38,.16);
--ewx-shadow-lg:0 2px 6px rgba(8,20,38,.04),0 32px 64px -24px rgba(8,20,38,.28);
--ewx-shadow-glow:0 10px 30px -10px rgba(37,99,235,.55);
--ewx-ease:cubic-bezier(.2,.7,.2,1);
--ewx-header-h:76px;
color-scheme:light;
}