Lord Systems

Brand Identity

The visual language and design system that defines how Lord Systems presents itself to the world.

02 — Color

Color Palette

A purposeful palette built around trust, clarity, and energy. Blue anchors the brand in reliability and technology; amber drives action; the teal gradient is the brand signature.

Brand Signature

Brand Gradient #093d58 → #2a8ea3 Logo, product hero, accents
Brand Dark #093d58
Brand Light #2a8ea3

Primary Blue

Navy #1e3a8a Dark sections, backgrounds
Primary Dark #1e40af Hover states, deep accents
Primary #3b82f6 Links, UI elements, badges
Primary Tint #dbeafe Backgrounds, card fills

Accent Colors

Amber #f59e0b Primary CTA buttons, highlights
Amber Dark #d97706 CTA hover state
Emerald #10b981 Success, positive states
Emerald Dark #059669 Success hover

Neutrals

Text Primary #0f172a Headings, body text
Text Muted #475569 Body copy, descriptions
Text Secondary #64748b Captions, labels
Border #e2e8f0 Dividers, card borders
Background #f8fafc Page & section backgrounds
03 — Typography

Typography

Two typefaces work together across the brand: Exo 2 for display and structural headings; Inter for body copy, UI labels, and everything requiring high legibility at small sizes.

Display / Headings

Exo 2

Google Fonts ↗
Software Engineering
& Cloud Solutions
100 Thin Lord Systems
300 Light Lord Systems
400 Regular Lord Systems
600 SemiBold Lord Systems
700 Bold Lord Systems
800 ExtraBold Lord Systems
800 ExtraBold Italic Lord Systems
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 ! @ # $ % & * ( ) — / ?
UI / Body

Inter

System font stack
Empowering businesses through expert technology consulting and innovative software solutions. We build scalable, secure systems that grow with your ambitions.
400 Regular The quick brown fox jumps over the lazy dog
500 Medium The quick brown fox jumps over the lazy dog
600 SemiBold The quick brown fox jumps over the lazy dog
700 Bold The quick brown fox jumps over the lazy dog
800 ExtraBold Italic — Wordmark Lord Systems
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 ! @ # $ % & * ( ) — / ?

Type Scale

Display / H1 — 3.5rem · 800 · Exo 2 Heading
H2 — 2rem · 700 · Exo 2 Section Title
H3 — 1.5rem · 700 · Inter Subsection
H4 — 1.25rem · 600 · Inter Card Title
Body Large — 1.1rem · 400 · Inter Lead paragraph text
Body — 1rem · 400 · Inter Standard body copy
Small / Label — 0.875rem · 500 · Inter UI labels and captions
Micro / Badge — 0.75rem · 700 · Inter BADGE TEXT
04 — Gradients

Gradient System

Gradients are used to create depth, hierarchy, and visual interest. Always use directional consistency — primary gradients run 135°.

Brand Gradient 135° · #093d58 → #2a8ea3 Logo, ShopPin hero, brand moments
Primary 135° · #3b82f6 → #1e40af Badges, CTAs, UI highlights
Navy 135° · #1e3a8a → #3b82f6 Dark section backgrounds
Hero Dark 135° · #0f172a → #1e3a5f Product page heroes
Light 135° · #f8fafc → #e0e7ff Section backgrounds, cards
Card Light 135° · #eff6ff → #dbeafe Subtle card fills
') repeat;"> Hero Overlay 135° · Blue 70% opacity Video hero overlay
Hero Text 45° · #ffffff → #e0e7ff Hero h1 clipped text fill
05 — Elevation

Shadows & Elevation

A consistent shadow system creates depth and communicates interaction states. Coloured shadows reinforce the primary brand colour on interactive elements.

sm 0 2px 4px · 5% black Subtle separation
md 0 4px 6px · 5% black Cards, default state
lg 0 12px 24px · 10% black Modals, drawers
xl 0 20px 40px · Blue 15% Featured cards
hover 0 10px 30px · 10% black Card hover state
hover-primary 0 8px 24px · Blue 20% Button hover state
amber 0 4px 12px · Amber 30% CTA button default
amber-lg 0 8px 20px · Amber 40% CTA button hover
06 — UI Elements

UI Components

Core interactive elements and their visual states. Consistent use of these components builds trust and predictability across every product.

Buttons

Primary CTA btn-amber · Amber #f59e0b
Blue Action btn-blue · Primary #3b82f6
Brand Teal btn-teal · Brand gradient
Success btn-emerald · #10b981
Outline btn-outline · White border
Outline Light btn-outline-light · Blue border
Ghost btn-ghost · Neutral border
Coming Soon btn-disabled · 55% opacity

Badges & Pills

Shopify App Product New Active Web Platform Google Maps OpenStreetMap Shopify Themes

Border Radius

sm — 8px Buttons, inputs
md — 12px Cards, panels
lg — 16px Feature cards
xl — 20px Badges, pills
full — 50% Logo wrap, avatars
07 — Products

Product Logo Suite

Each Lord Systems product has its own mark. Product logos should always appear in their designated colors and never be mixed with the parent brand gradient.

FormFlow
FormFlow Shopify App
FormFlow
FormFlow Reversed
Game Keep
Game Keep Hosting Platform
ShopPin
ShopPin Shopify App
ShopPin
ShopPin Reversed