# Lumensoft.biz Design System

> A corporate blue canvas punctuated by high-contrast amber accents and structured Open Sans typography.

**Source:** https://lumensoft.biz | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Lumensoft.biz utilizes a professional, high-contrast palette dominated by a primary sky blue `#2ea3f2` and a functional amber `#fcd21d`. The system is built on a foundation of pure white `#ffffff` and deep charcoal `#232323` surfaces, creating a clear hierarchy for enterprise software solutions. Typography is strictly anchored in **Open Sans**, utilizing heavy weights (700) for display and medium weights (500) for body and UI labels. Layouts rely on generous vertical spacing (up to 145px section gaps) and a mix of sharp corners for structural containers and pill-shaped (50px) radii for interactive elements.

## Signature DNA
1. **The Amber Accent Strike** (Using `#fcd21d` for primary CTAs and key highlights against dark `#232323` or white backgrounds to drive immediate conversion focus, seen on Homepage and About pages).
2. **Blue-Bordered Framing** (Feature cards and content blocks are frequently encapsulated in 1px `#2ea3f2` borders with 18px rounded corners, providing a distinct "software module" aesthetic).
3. **Open Sans Stack** (The total reliance on Open Sans across all roles—display, heading, and body—creates a unified, legible, and neutral corporate voice).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, text on dark, borders | 117 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Footer background, primary text | 52 | 1.0 | Computed Style |
| `{color.charcoal}` | `#232323` | Dark section backgrounds, headings | 21 | 0.8 | Computed Style |
| `{color.gray.600}` | `#666666` | Primary body text | 182 | 0.8 | Computed Style |
| `{color.gray.300}` | `#dddddd` | Form borders, canvas dividers | 8 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary.blue}` | `#2ea3f2` | Primary buttons, borders, icons | 79 | 0.8 | Computed Style |
| `{color.primary.amber}` | `#fcd21d` | High-priority CTAs, Newsletter button | 13 | 0.8 | Computed Style |
| `{color.secondary.blue}` | `#127bb6` | Decorative surfaces, hover states | 2 | 1.0 | Decorative Only |
| `{color.cyan}` | `#00afef` | Product ecosystem badges | 5 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 400, 500, 600, 700 | Display, Heading, Body | N/A | Google Fonts |
| Oswald | 500 | Subheadings (Module headers) | N/A | Google Fonts |
| Helvetica | 300 | Secondary body-sm | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 40px | normal | 700 | Hero Headlines | `h2` |
| `{type.h2}` | 36px | 36px | normal | 700 | Section Titles | `h2` |
| `{type.h3}` | 25px | 25px | normal | 700 | Card Titles | `h3` |
| `{type.h4}` | 18px | 18px | normal | 500 | Subheadings | `h4` |
| `{type.body.lg}` | 18px | 23.8px | normal | 700 | Bold emphasis | `strong` |
| `{type.body}` | 16px | 23.8px | normal | 500 | Standard prose | `p` |
| `{type.label}` | 14px | 26px | normal | 600 | List items | `li` |
| `{type.caption}` | 12px | 12px | normal | 600 | Utility labels | `span#et-info-phone` |

### Principles
1. **Headings are never light.** All H1-H3 levels use weight 700 for maximum authority.
2. **Body copy uses Medium (500).** Standard prose avoids the 400 weight in favor of 500 to maintain legibility against white backgrounds.
3. **Tight Display Leading.** Large headings use 1:1 line height (e.g., 40px size / 40px height) to create dense, impactful blocks of text.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 13 |
| `{space.sm}` | 10px | 73 |
| `{space.md}` | 15px | 77 |
| `{space.lg}` | 20px | 35 |
| `{space.xl}` | 40px | 3 |
| `{space.section}` | 145px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Structural sections, footer | 390 occurrences |
| `{radius.input}` | 5px | Text inputs | Form fields |
| `{radius.card}` | 18px | Feature cards with borders | Blue-bordered cards |
| `{radius.pill}` | 50px | CTA Buttons, Newsletter button | Primary actions |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.3) 0px 1px 10px 0px` | Feature cards | Observed on 14 elements |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.3) 0px 2px 18px 0px` | Floating buttons | Observed on 7 elements |
| `{shadow.nav}` | `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px` | Top navigation | Header sticky state |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Lead generation and contact forms.
**Pages observed:** Homepage, About.
**Spec:** Background `#f4f4f4` | Text `#444444` | Border 1px `#dddddd` | Radius 5px | Padding 10px | Font 14px.
**States observed:** Default: captured | Hover/Active: not captured.

#### Navigation
**Role:** Global site header.
**Pages observed:** Homepage, About.
**Spec:** Background `#ffffff` | Text `#666666` | Border 0px | Shadow `rgba(0,0,0,0.1) 0px 1px 0px 0px` | Font 14px.
**States observed:** Default: captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or services.
**Pages observed:** Homepage, About.
**Spec:** Background `transparent` | Text `#666666` | Border 1px `#2ea3f2` | Radius 18px | Shadow `rgba(0,0,0,0.3) 0px 1px 10px 0px`.
**States observed:** Default: captured.

#### Primary CTA (Amber)
**Role:** High-conversion actions (e.g., "Learn More").
**Pages observed:** Homepage, About.
**Spec:** Background `#fcd21d` | Text `#000000` | Radius 50px | Padding 18px 40px | Font 14px / 700.
**States observed:** Default: captured.

### Tier 3: Surface-specific

#### Footer
**Role:** Global site closure.
**Pages observed:** Homepage, About.
**Spec:** Background `#000000` | Text `#666666` | Radius 0px | Font 14px.
**States observed:** Default: captured.

#### Product Badge
**Role:** Identifying specific software in the ecosystem.
**Pages observed:** Homepage.
**Spec:** Background `#00afef` | Text `#ffffff` | Radius 0px | Padding 5px 0px 6px | Font 15px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Section Gap | 145px |
| Max Width | 1200px (estimated from desktop view) |
| Column Gap | 30px |

## Do's
- Use `#fcd21d` for the most important action on a page.
- Apply 18px border radius to cards that use the `#2ea3f2` border.
- Set all H1 and H2 headings to Open Sans 700.
- Use `#232323` for dark background sections to maintain contrast with white text.
- Ensure 145px of vertical space between major content sections.

## Don'ts
- Do not use `#127bb6` for primary buttons; it is reserved for decorative surfaces.
- Do not use sharp corners (0px) for interactive buttons; use the 50px pill radius.
- Do not use weights below 500 for primary body text on white backgrounds.
- Do not mix Oswald with body copy; it is strictly for module sub-headers.
- Avoid using shadows on text inputs; keep them flat with 1px `#dddddd` borders.

## Quick start

### CSS Variables
```css
:root {
  --color-primary-blue: #2ea3f2;
  --color-primary-amber: #fcd21d;
  --color-charcoal: #232323;
  --color-gray-body: #666666;
  --font-main: 'Open Sans', sans-serif;
  --radius-card: 18px;
  --radius-pill: 50px;
  --shadow-soft: rgba(0, 0, 0, 0.3) 0px 1px 10px 0px;
}
```

## Agent prompt examples
- "Create a feature card with a 1px #2ea3f2 border, 18px corner radius, and a soft shadow using Open Sans 700 for the title."
- "Generate a primary CTA button using a #fcd21d background, black text, and a 50px pill radius."
- "Design a dark section using #232323 background with white Open Sans text and 145px top/bottom padding."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://lumensoft.biz | Desktop 1440 | 2026-06-06 |
| About | https://lumensoft.biz/about | Desktop 1440 | 2026-06-06 |
| Mobile Home | https://lumensoft.biz | Mobile 390 | 2026-06-06 |