Design & Engineering Standards
The Lunaris Design System defines the visual language, interface components, accessibility standards, motion principles, and engineering implementation patterns that underpin every Lunaris Software digital product and enterprise web application.
Enterprise Precision
Every visual decision communicates competence, reliability, and trust. No decoration that does not serve the user.
Dark-Native
Deep navy backgrounds with gold accents create a premium, high-contrast interface suitable for long-form professional use.
Typography-Led
Strong typographic hierarchy using Manrope and Space Grotesk creates immediate visual structure without relying on colour alone.
Performance First
Design decisions are constrained by performance. Animations, gradients, and images are always evaluated for Core Web Vitals impact.
Accessible by Default
Contrast ratios, focus states, and semantic structure are non-negotiable starting points, not afterthoughts.
Scalable Systems
Components, tokens, and patterns are built to extend. The design system grows with the product portfolio without inconsistency.
The Lunaris color system is built on deep navy backgrounds and gold accents, creating a premium enterprise aesthetic that is immediately distinctive and consistently applied.
Deep Navy
#030B14 — Primary background
Navy Deep
#0B1018 — Surface background
Gold
#C29134 — Primary accent
Gold Alt
#D4A43F — Interactive gold
Slate
#7A8899 — Body text
White
#FFFFFF — Heading text
Display / Headings
Manrope (variable)Used for H1–H3, hero text, and prominent labels
Body / Interface
Space GroteskUsed for body copy, UI labels, and supporting text
H1 Scale
3xl – 6xlResponsive scale from 1.875rem to 3.75rem
H2 Scale
2xl – 3xlSection headings with consistent font-semibold weight
Body Text
sm – base0.875rem – 1rem with 1.6 line-height for readability
Section Shell
Rounded-2xl container with border, background, and gold glow variants for consistent page layout cards.
Enterprise Kicker
Small uppercase label above headings using gold-alt color, letter-spacing 0.12em, used to introduce section context.
CTA Button — Primary
Gold background, navy text, rounded-md, with subtle hover lift animation. Used for primary conversion actions.
CTA Button — Secondary
Transparent with white/30 border, white text. Used for secondary navigation and soft CTAs.
Gold Glow Card
Card variant with a subtle radial gold glow on hover, used for service cards, case study previews, and featured sections.
Badge / Tech Tag
Rounded-full pill with gold/30 border and gold/10 background. Used for technology tags, service labels, and category pills.
Container
max-w-container with responsive horizontal padding (px-4 → px-8). Applied to all full-width page sections.
Performance-first animation
Animations use GPU-composited properties (opacity, transform) only. No layout-triggering CSS properties animated.
Respect user preferences
All motion disabled when prefers-reduced-motion is active. Users control their experience.
Purposeful stagger
Section entry animations use 0.08s child stagger with 0.05s delay. Fast enough to feel responsive, slow enough to feel premium.
Subtle hover feedback
Cards lift by -4px to -6px on hover with shadow enhancement. Buttons lift by -2px with scale(1.01) for tactile feel.
Next.js App Router with TypeScript. Server components by default, client components only where interactivity requires it.
Tailwind CSS utility-first system with custom design tokens for brand colors, spacing, and typography.
next/image for all content images with proper sizing, lazy loading, and WebP/AVIF optimization.
Google Fonts loaded via next/font with display: swap and subsetting. No FOUT on initial load.
Semantic HTML, ARIA attributes, keyboard navigation support, and screen-reader-friendly component markup.
Server-side metadata exports per page, JSON-LD schema injection, canonical URLs, and Open Graph tags.
Core Web Vitals optimized: LCP < 2.5s, INP < 200ms, CLS < 0.1 targets across all page templates.
Every website and software product Lunaris Software delivers is built to the standards defined in this design system. If your organization needs a digital platform built with this level of care and precision, contact Lunaris Software.