# Lemonsoft.fi Design System

> High-contrast enterprise utility anchored by heavy geometric headings and a signature citrus-gold functional accent.

**Source:** https://lemonsoft.fi | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Lemonsoft.fi utilizes a high-contrast monochrome foundation of deep charcoal (#404040) and pure white (#ffffff), punctuated by a functional yellow accent (#ffcc00 / #f8c121). The typography is dominated by Lexend Deca, used at extreme weights (800) for display headers to create a sense of industrial stability. Layouts rely on generous vertical rhythm and a 4px base unit, with a specific "sharp-soft" contrast where most containers are square (0px) while interactive cards and primary buttons use a 40px radius. Depth is achieved through a single, extremely soft shadow tier (6% opacity) rather than traditional borders.

## Signature DNA
1. **Heavy Geometric Display** (Lexend Deca at weight 800 with -0.8px tracking creates a dense, authoritative header style seen across all landing pages).
2. **The "Lemon" Functional Accent** (Use of #ffcc00 and #f8c121 exclusively for high-priority conversion points like "Asiakaspalvelu" and cookie consent).
3. **Floating Surface Depth** (Large white sections utilize a `0px 12px 100px` shadow at 0.06 alpha to separate content blocks without using visible hairlines).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.charcoal}` | `#404040` | Primary text, footer background, primary buttons | 100 | 0.8 | computed_style |
| `{color.slate}` | `#5c5c5c` | Secondary body text, shadow base | 47 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page canvas, card surfaces, inverted text | 41 | 0.8 | computed_style |
| `{color.black}` | `#000000` | High-emphasis text | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.lemon}` | `#ffcc00` | Primary CTA background, active borders | 3 | 0.6 | computed_style |
| `{color.gold}` | `#f8c121` | Secondary CTA borders, decorative text | 4 | 0.6 | computed_style |
| `{color.ochre}` | `#7f6002` | Small labels, decorative text (decorative_only) | 35 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Lexend Deca | 400, 500, 600, 700, 800 | Display, Headings, Body | Lexend (Google Fonts) | SIL Open Font |
| Nunito Sans | 600 | Navigation, inline links | Nunito Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 58px | 58.5px | -0.8px | 800 | Hero H1 | `h1` |
| `{type.display-md}` | 48px | 60px | -0.8px | 600 | Module Headings | `h1.gb-module-heading` |
| `{type.heading-lg}` | 32px | 40px | -0.8px | 600 | Section Headings | `h2` |
| `{type.heading-md}` | 24px | 30px | -0.8px | 600 | Feature Titles | `h3` |
| `{type.heading-sm}` | 18px | 22.5px | -0.8px | 600 | Subheadings | `h3.gb-module-heading` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro Paragraphs | `p:nth-of-type(1)` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard Body | `section.gb-module` |
| `{type.body-sm}` | 15px | 22.5px | normal | 400 | Card Content | `div.gb-module-item` |
| `{type.caption}` | 10px | 10px | normal | 500 | Labels/Badges | `div.gb-label` |

### Principles
1. **Tight Display Tracking:** All headings from 18px to 58px use a consistent -0.8px letter spacing.
2. **Weight Contrast:** Display headers use 800 weight, while body text strictly adheres to 400.
3. **Sans-Serif Exclusivity:** No serifs are used; Lexend Deca provides the geometric structure for all content.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 5 |
| `{space.sm}` | 12px | 5 |
| `{space.base}` | 16px | 16 |
| `{space.md}` | 20px | 8 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 32px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, default surfaces | 172 occurrences |
| `{radius.sm}` | 5px | Form inputs, small cards | `radius: 5px` |
| `{radius.full}` | 40px | Primary CTA buttons, featured cards | `radius: 40px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.floating}` | `rgba(92, 92, 92, 0.06) 0px 12px 100px 0px` | Content modules, pricing cards | Observed on 13 elements |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main conversion action (e.g., "Toiminnanohjaus")
**Pages observed:** https://lemonsoft.fi
**Spec:** Background `{color.charcoal}` (#404040) / Text `{color.white}` (#ffffff) / Radius `{radius.full}` (40px) / Padding 12px 24px
**States observed:** Default | Hover: captured

#### Accent Button
**Role:** High-priority support/contact action
**Pages observed:** https://lemonsoft.fi
**Spec:** Background `{color.lemon}` (#ffcc00) / Text `{color.charcoal}` (#404040) / Radius `{radius.full}` (40px) / Padding 12px 24px
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Benefit and service descriptions
**Pages observed:** https://lemonsoft.fi
**Spec:** Background `rgba(255, 255, 255, 0.05)` / Border `rgba(255, 255, 255, 0.2)` 1px / Radius `{radius.sm}` (5px) / Padding 32px
**States observed:** Default: captured

#### Category Badge
**Role:** Industry labeling (e.g., "Metalliteollisuus")
**Pages observed:** https://lemonsoft.fi
**Spec:** Background `{color.white}` (#ffffff) / Border `{color.gold}` (#f8c121) 1px / Radius `{radius.sharp}` (0px) / Typography `{type.caption}` (10px)
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Floating Module
**Role:** Major content section separation
**Pages observed:** https://lemonsoft.fi
**Spec:** Background `{color.white}` (#ffffff) / Shadow `{shadow.floating}` / Radius `{radius.sharp}` (0px)
**States observed:** Default: captured

#### Footer Block
**Role:** Site-wide navigation and contact info
**Pages observed:** https://lemonsoft.fi, https://lemonsoft.fi/about
**Spec:** Background `{color.charcoal}` (#404040) / Text `{color.white}` (#ffffff) / Padding 64px vertical
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 80px - 120px |
| Grid | 12-column desktop / 1-column mobile |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; padding reduced to 20px; font-size scaling for H1. |
| Desktop | 1440px | Standard 1200px container centering. |

## Imagery & decoration
- **Industrial Photography:** High-quality imagery of manufacturing, logistics, and office environments.
- **Iconography:** Simple line icons in charcoal or gold.
- **Avoids:** Rounded corners on large layout containers; excessive use of gradients.

## Do's
- Use Lexend Deca 800 for all primary page headers.
- Apply `-0.8px` letter spacing to all headings.
- Reserve `#ffcc00` for the most critical user actions.
- Use `{shadow.floating}` to create depth without adding borders.
- Maintain a 40px radius for all primary interactive buttons.

## Don'ts
- **Wrong:** Using a sub-brand blue or green as a primary background. **Right:** Keep backgrounds `#ffffff` or `#404040`. **Reason:** Lemonsoft is a monochrome-first parent brand.
- Do not use serif fonts for any UI or body copy.
- Do not apply rounded corners to main section backgrounds.
- Do not use shadows stronger than 6% opacity for standard UI elements.

## Similar brands
- SAP (Enterprise structure)
- Visma (Nordic software utility)
- Salesforce (High-contrast data density)

## Quick start
```css
:root {
  --color-charcoal: #404040;
  --color-lemon: #ffcc00;
  --color-white: #ffffff;
  --font-display: 'Lexend Deca', sans-serif;
  --radius-pill: 40px;
  --shadow-soft: 0px 12px 100px 0px rgba(92, 92, 92, 0.06);
}
```

## Known gaps
- Hover and focus states for secondary navigation items were not fully captured in bulk runner.
- Mobile-specific spacing tokens for intermediate breakpoints (768px-1024px) are missing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://lemonsoft.fi | 1440px | 2026-06-06 |
| Pricing | https://lemonsoft.fi/pricing | 1440px | 2026-06-06 |
| About | https://lemonsoft.fi/about | 1440px | 2026-06-06 |