Design System

Brand Identity

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

02 — Color

Color Palette

Three roles: brand cobalt anchors trust and product identity and carries the single loud CTA, Ultra Violetis the premium accent for Pro and creative surfaces, andsignal cyan marks "alive" moments (AI, realtime, new) — used sparingly at ≤2% of any screen.

Brand Signature

Brand Gradient#0a63ff → #1f8dffLogo, hero moments, brand lockups
Blue 600 · Brand Hover#0a63ff
Blue 500 · Brand#1f8dff

Brand Cobalt — Primary UI

Blue 50 · brand-subtlest#eaf3ffTint fills, hover washes
Blue 100 · brand-subtle#d2e6ffInfo surfaces, chips
Blue 500 · brand#1f8dffPrimary UI fill, links
Blue 700 · brand-active#0a4fccActive / pressed brand

Ultra Violet — Premium Accent

Ultra Violet is the secondary accent for premium, Pro, and creative surfaces. It is never a CTA fill — cobalt owns the action; violet adds depth and signals something elevated.

Violet 100 · accent-subtle#ecd6ffTint fills, premium washes
Violet 400 · accent#a614ffPremium / Pro accent
Violet 500 · accent-hover#9b2fffAccent hover
Violet 600 · accent-active#8200e0Pressed state

Signal Cyan — Alive Moments Only

Signal is reserved for AI, realtime indicators, and "new" badges. Keep it ≤2% of any screen and never place it adjacent to the cobalt CTA.

Cyan 100 · signal-subtle#cdf7ff
Cyan 400 · signal#38ecffAI, live, new
Cyan 500#06c6f0

Status

Success#11b46e
Warning#e68a0a
Danger#e62f2f

Neutrals

Slate 900 · text-primary#0d1320Headings, body text
Slate 600 · text-secondary#434e5eBody copy
Slate 500 · text-tertiary#5d6878Captions (≥16px)
Slate 200 · border-subtle#dde4ee
Slate 50 · surface-1#f6f8fcPage background
03 — Typography

Typography

Red Hat Display sets headings and the wordmark (700–800);Inter carries body and UI. Both are self-hosted variable fonts. Display 800 upright is reserved for the wordmark.

Display / Headings

Red Hat Display

Self-hosted · variable
Software Engineering
& Cloud Solutions
Empowering businesses through expert technology consulting and innovative software solutions. We build scalable, secure systems that grow with your ambitions.
400 RegularThe quick brown fox jumps over the lazy dog
500 MediumThe quick brown fox jumps over the lazy dog
600 SemiBoldThe quick brown fox jumps over the lazy dog
700 BoldThe quick brown fox jumps over the lazy dog
800 ExtraBoldThe quick brown fox jumps over the lazy dog
800 Display — WordmarkLord 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 — text-6xl · 800Heading
H1 — text-5xl · 800Heading
H2 — text-3xl · 700Section Title
H3 — text-2xl · 700Subsection
H4 — text-xl · 600Card Title
Lead — text-lg · 400Lead paragraph text
Body — text-md · 400Standard body copy
Small — text-sm · 500UI labels and captions
Eyebrow — text-2xs · 700 · TRACKEDEYEBROW TEXT
04 — Gradients

Gradient System

Gradients run 135° by convention. Reserved for hero moments, brand lockups, and soft card fills — never as button or icon fills.

--gradient-brand135° · blue-600 → blue-500Logo lockup, brand moments
--gradient-hero-dark150° · slate-900 → #07060fProduct & page heroes
--gradient-card-soft135° · blue-50 → blue-100Section backgrounds
--gradient-hero-text115° · white → blue-100Clipped text on dark hero
05 — Elevation

Shadows & Elevation

Elevation tokens express intent, not arbitrary depth. Use --elevation-ctaonly on the cobalt CTA — it carries the brand glow.

--elevation-restResting card, default state
--elevation-hoverCard / button hover
--elevation-activePressed — drops back
--elevation-popoverMenus, tooltips
--elevation-modalDialogs, sheets
--elevation-toastTransient notifications
--elevation-ctaCobalt CTA default
--elevation-cta-hoverCobalt CTA hover
06 — UI Elements

UI Components

Core interactive elements and their visual states. All interactive elements meet the 44px minimum tap target and use:focus-visible for keyboard focus.

Buttons

Primary CTAbtn · cobalt · one per view
Brand Actionbtn-secondary · cobalt brand
Outlinebtn-outline · on dark
Outlinebtn-outline · on light
Ghostbtn-ghost · neutral
Coming Soondisabled · 55% opacity

Badges & Pills

ProductActionNew · AIActiveWeb PlatformGoogle MapsOpenStreetMapShopify Themes

Border Radius

xs — 4pxFocus rings
sm — 8pxButtons, inputs
md — 12pxCards, panels
lg — 16pxFeature cards
xl — 20pxPills
fullAvatars, dots
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
FormFlowShopify App
FormFlow
FormFlowReversed
Game Keep
Game KeepHosting Platform
ShopPin
ShopPinShopify App
ShopPin
ShopPinReversed