theme lab

Theme Lab

Every look SysForge can give a system: 11 design axes combine into millions of themes. Try combinations here, then use one in the Generator.

Mix & match

--lock

Colour palettes

24 palettes, each with light and dark mode, WCAG AA contrast
Amber
amber
Calm Blue
calm-blue
Charcoal Lime
charcoal-lime
Coffee
coffee
Crimson
crimson
Dark Cinema
dark-cinema
Earth Olive
earth-olive
Emerald
emerald
Forest
forest
Graphite Cyan
graphite-cyan
Lavender
lavender
Magenta Pop
magenta-pop
Medical Teal
medical-teal
Mint
mint
Navy
navy
Neon Purple
neon-purple
Ocean
ocean
Rose
rose
Royal Indigo
royal-indigo
Sky Blue
sky-blue
Slate & Gold
slate-gold
Sunset Coral
sunset-coral
Tomato
tomato
Warm Orange
warm-orange

Layouts

Where the menu goes
Boxed
The whole app in a centred box
Floating
Menu and top bar float as rounded cards
Mega menu
Top bar with a large drop-down (8+ menu items)
Header + side menu
Coloured header across the top, light menu below
Side menu
Menu in a column on the left
Two-level menu
Icon rail plus a panel for each menu group
Mini side menu
Icon rail on the left, labels on hover
Right side menu
Menu in a column on the right
Top menu
Menu across the top, full-width pages
Top menu + tabs
Top bar with a second row of tabs

Home pages

The public front page visitors see before they sign in
Corporate
Top menu, big headline, key numbers and modules
Minimal
Name, one button and the modules
One page
Full-screen colour hero, all on one scrolling page
Service portal
Search box that finds the right module, plus news
Product
Centred headline with a live preview of the app
Split screen
Text on one side, illustration on the other

Menu colours

Colour of the side or top menu, in every palette
Light
White menu
Dark
Near-black menu
Brand colour
Menu in the main colour
Tinted
Light tint of the main colour

Other axes

Corners (4)

Corner style of buttons, inputs and cards

  • Square — Sharp corners
  • Rounded — Small rounded corners
  • Soft — Large, friendly corners
  • Pill — Fully round buttons and inputs

Spacing (3)

How much fits on one screen

  • Compact — More rows on screen
  • Comfortable — Balanced spacing
  • Spacious — Roomy, touch friendly

Fonts (8)

Font pair (Latin + Thai)

  • Anuphan + Manrope
  • Bai Jamjuree + DM Sans
  • Chakra Petch + Space Grotesk
  • IBM Plex Sans Thai + IBM Plex Sans
  • Kanit + Montserrat
  • Noto Sans Thai + Roboto
  • Prompt + Poppins
  • Sarabun + Inter

Card style (5)

Look of panels and cards

  • Flat — No border, no shadow
  • Shadow — Light drop shadow
  • Outline — Thin border
  • Glass — Frosted see-through cards (needs a full-bleed or gradient login)
  • Soft 3D — Embossed cards on soft palettes

Icons (4)

Icon set

  • Lucide — Clean outline icons
  • Tabler — Rounded outline icons
  • Phosphor — Friendly, slightly bold icons
  • Material Symbols — Google style icons

Login page (6)

Design of the sign-in page

  • Centered card — Login box in the middle
  • Full-bleed — Full-screen colour background
  • Gradient — Colour gradient background
  • Minimal — Plain page, form only
  • Side illustration — Drawing on one side
  • Split image — Half picture, half form

Dashboard (6)

Home page arrangement

  • Chart first — Big chart on top
  • Compact table — KPIs in a dense table
  • Card grid — Equal tiles
  • KPI row — Numbers on top, details below
  • Split list — Numbers left, latest items right
  • Timeline — Activity timeline

Theme registry

The theme each system received, per portfolio salt. Regenerating a system keeps its theme; a new salt starts a new registry.

Open the full gallery (offline HTML)

SmartERP
SYS-001 · Slate & Gold · Header + side menu
CRMPro
SYS-002 · Ocean · Header + side menu
HRMaster
SYS-003 · Graphite Cyan · Floating
InventoryX
SYS-004 · Slate & Gold · Mini side menu
POSNova
SYS-005 · Graphite Cyan · Mini side menu
AccountingPro
SYS-006 · Ocean · Top menu + tabs
ProjectFlow
SYS-007 · Navy · Mega menu
SupplyChainHub
SYS-008 · Slate & Gold · Floating
RetailMaster
SYS-009 · Slate & Gold · Top menu
ServiceCRM
SYS-010 · Graphite Cyan · Two-level menu
FleetTrack
SYS-011 · Graphite Cyan · Side menu
AssetManager
SYS-012 · Emerald · Top menu + tabs
BudgetControl
SYS-013 · Calm Blue · Top menu + tabs
LeaveMaster
SYS-014 · Graphite Cyan · Top menu
PayrollX
SYS-015 · Ocean · Mini side menu
VendorPortal
SYS-016 · Royal Indigo · Mini side menu
ECommerceHub
SYS-017 · Calm Blue · Side menu
BookingPro
SYS-018 · Slate & Gold · Top menu + tabs
WarehouseSmart
SYS-019 · Royal Indigo · Header + side menu
AuditTrail
SYS-020 · Graphite Cyan · Boxed
DocumentFlow
SYS-021 · Royal Indigo · Boxed
TaskMaster
SYS-022 · Sky Blue · Floating
MeetingRoom
SYS-023 · Sky Blue · Top menu + tabs
FeedbackPro
SYS-024 · Navy · Header + side menu
PerformanceHR
SYS-025 · Sky Blue · Two-level menu
BizAnalytics
SYS-026 · Graphite Cyan · Right side menu
ClientPortal
SYS-027 · Sky Blue · Mega menu
OrderMaster
SYS-028 · Calm Blue · Mini side menu
PricingEngine
SYS-029 · Emerald · Header + side menu
SalesForceX
SYS-030 · Emerald · Top menu
LeadManager
SYS-031 · Graphite Cyan · Top menu + tabs
ContractPro
SYS-032 · Calm Blue · Right side menu
FranchiseHub
SYS-033 · Royal Indigo · Two-level menu
BranchControl
SYS-034 · Emerald · Boxed
ReportMaster
SYS-035 · Sky Blue · Side menu
WorkflowX
SYS-036 · Royal Indigo · Top menu + tabs
ApprovalSystem
SYS-037 · Royal Indigo · Side menu
RiskManager
SYS-038 · Calm Blue · Two-level menu
CompliancePro
SYS-039 · Graphite Cyan · Header + side menu
ResourcePlanner
SYS-040 · Ocean · Top menu
CostControl
SYS-041 · Royal Indigo · Mega menu
ProfitTracker
SYS-042 · Ocean · Boxed
MerchandisePro
SYS-043 · Navy · Two-level menu
PromotionEngine
SYS-044 · Slate & Gold · Mega menu
LoyaltyProgram
SYS-045 · Sky Blue · Right side menu
BusinessDashboard
SYS-046 · Calm Blue · Top menu
EnterpriseHub
SYS-047 · Slate & Gold · Boxed
OperationMaster
SYS-048 · Emerald · Side menu

Showing 48 of 52. The full gallery shows all of them.