Lord Systems

Brand Identity

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

02 — Color

Color Palette

Three roles, three colors: brand teal anchors trust and product identity, copper is the single loud CTA color, and signal cyan marks "alive" moments (AI, realtime, new) — used sparingly at ≤2% of any screen.

Brand Signature

Brand Gradient #093d58 → #2a8ea3 Logo, hero moments, brand lockups
Teal 900 · Brand Dark #093d58
Teal 500 · Brand Light #2a8ea3

Brand Teal — Primary UI

Teal 50 · brand-subtlest #eef7fa Tint fills, hover washes
Teal 100 · brand-subtle #d4ebf1 Info surfaces, chips
Teal 700 · brand #135066 Primary UI fill, links
Teal 800 · brand-hover #0a4058 Hover state for brand

Copper — The One CTA

Copper 100 · cta-subtle #fbe7d2 CTA hover wash
Copper 500 · cta #c46a2a Primary CTA — one per view
Copper 600 · cta-hover #a0541f CTA hover
Copper 700 · cta-active #7b3f18 Pressed 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 CTA.

Signal 100 · signal-subtle #c2f3ff
Signal 400 · signal #22bde5 AI, live, new
Signal 500 #0aa3cc

Status

Success #0f9868
Warning #d08612
Danger #c43a3a

Neutrals

Slate 900 · text-primary #0f161b Headings, body text
Slate 600 · text-secondary #445159 Body copy
Slate 500 · text-tertiary #5e6b76 Captions (≥16px)
Slate 200 · border-subtle #dfe5eb
Slate 50 · surface-1 #f7f9fb Page background
03 — Typography

Typography

Inter is the single typeface across the brand — self-hosted variable font for display, body, and UI. Italic 800 styling is reserved for the wordmark.

Display / UI / Body

Inter

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 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 The quick brown fox jumps over the lazy dog
800 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 — text-6xl · 800 Heading
H1 — text-5xl · 800 Heading
H2 — text-3xl · 700 Section Title
H3 — text-2xl · 700 Subsection
H4 — text-xl · 600 Card Title
Lead — text-lg · 400 Lead paragraph text
Body — text-md · 400 Standard body copy
Small — text-sm · 500 UI labels and captions
Eyebrow — text-2xs · 700 · TRACKED EYEBROW 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-brand 135° · teal-900 → teal-500 Logo lockup, brand moments
--gradient-hero-dark 135° · slate-900 → teal-900 Product & page heroes
--gradient-card-soft 135° · teal-50 → teal-100 Section backgrounds
--gradient-hero-text 135° · white → teal-100 Clipped text on dark hero
05 — Elevation

Shadows & Elevation

Elevation tokens express intent, not arbitrary depth. Use --elevation-cta only on the copper CTA — it carries the warm glow.

--elevation-rest Resting card, default state
--elevation-hover Card / button hover
--elevation-active Pressed — drops back
--elevation-popover Menus, tooltips
--elevation-modal Dialogs, sheets
--elevation-toast Transient notifications
--elevation-cta Copper CTA default
--elevation-cta-hover Copper 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 CTA btn · copper · one per view
Brand Action btn-secondary · teal brand
Outline btn-outline · on dark
Outline btn-outline · on light
Ghost btn-ghost · neutral
Coming Soon disabled · 55% opacity

Badges & Pills

Product Action New · AI Active Web Platform Google Maps OpenStreetMap Shopify Themes

Border Radius

xs — 4px Focus rings
sm — 8px Buttons, inputs
md — 12px Cards, panels
lg — 16px Feature cards
xl — 20px Pills
full Avatars, 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
FormFlow Shopify App
FormFlow
FormFlow Reversed
Game Keep
Game Keep Hosting Platform
ShopPin
ShopPin Shopify App
ShopPin
ShopPin Reversed