# Flecto · Design system migration spec

> Source: https://flecto.io  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a modern, dark-mode B2B SaaS landing page that balances professionalism with a bold, memorable accent color.

## 1. Identity DNA

Flecto's design system operates like a streamlined logistics dashboard for rental businesses, where every element serves a functional purpose without ornament. The visual language is one of controlled efficiency—a dark, focused environment where information hierarchy is paramount and the interface recedes to let the product speak.

**One-liner:** The easiest way to access new customers and a greener future.
**Keywords:** Rental Management · SaaS · B2B · Efficiency
**Analogy:** A streamlined logistics dashboard for rental businesses.

## 2. Color

The color system is built on a high-contrast dark mode principle, anchored by a deep, professional dark green background. A single, high-chroma neon green accent cuts through this field for critical actions and highlights, creating a palette that is both memorable and strictly functional.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#004737` | main background |
| `--ink` | `#FFFBE8` | body text |
| `--accent` | `#56F09F` | single accent |
| `--line` | `rgba(86,240,159,0.2)` | divider |

**Color principle:** High-contrast dark mode with a signature neon green accent.

This is a monochromatic palette with a single accent, deliberately avoiding multiple dominant hues to maintain visual clarity and focus.

## 3. Typography

Typography establishes a clear voice through a dual-category system: a geometric sans-serif for authoritative display headlines and a humanist sans-serif for legible body text. This pairing creates a professional yet modern rhythm, ensuring content is both scannable and approachable.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -2.2px | Main headline |
| body | 16px | 1.4 | 400 | normal | Paragraphs |

**Type rules:**
- Geometric sans for display headlines.
- Humanist sans for body text.

## 4. Spacing

A strict 4px base unit governs all spacing, creating a consistent and predictable visual rhythm across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit

## 5. Surfaces

Depth is communicated through subtle, soft shadows that lift elements from the dark background, creating a layered but flat hierarchy. Borders are minimal, rendered as faint, translucent lines that define without distracting.

- **Radius:** sm 10px · md 19px · lg 40px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.12) 0px 3px 3.96px 0px
  - rgba(0,0,0,0.1) 0px 18px 18px 0px
- **Borders:** 1px solid rgba(86,240,159,0.2)

## 6. Layout

The layout skeleton is centered and spacious, built around a dominant hero section with a large graphic and a prominent call-to-action. This structure prioritizes a clear value proposition above the fold, with generous whitespace guiding the user's focus downward.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero with large graphic and prominent CTA.

## 7. Motion & Interaction

Motion is used sparingly for functional emphasis, with smooth fade-ins and scale transitions that maintain a calm, responsive feel. All interactions follow a refined easing curve, ensuring transitions feel purposeful and premium rather than decorative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth fade-ins and scale transitions for interactive elements.

- **Hover:** Subtle color shifts or scale changes on interactive elements.
- **Click:** Active state with slight scale-down.
- **Transition:** Smooth transitions using cubic-bezier(0.19, 1, 0.22, 1).
- **Keyboard:** Standard focus states for navigation.

## 8. Voice & Don'ts

The editorial voice is professional, efficient, and forward-thinking, with direct, benefit-oriented headlines and clear, action-oriented calls-to-action. Language avoids jargon and overly complex sentences in favor of straightforward clarity.

- **Tone:** Professional, efficient, and forward-thinking.
- **Headline style:** Direct and benefit-oriented.
- **CTA style:** Action-oriented and clear.
- **Avoid:** Jargon / Aggressive sales language / Overly complex sentences

### Don'ts
- ❌ don't use a white background — screenshot shows a dark green (#004737) background instead.
- ❌ don't use serif fonts — screenshot shows geometric and humanist sans-serif fonts instead.
- ❌ don't use multiple dominant colors — screenshot shows a monochromatic green palette with a single neon accent.
- ❌ don't use sharp corners — screenshot shows rounded corners (10px to 999px radius) instead.
- ❌ don't use heavy drop shadows — screenshot shows subtle, soft shadows instead.
- ❌ don't use dense text blocks — screenshot shows generous whitespace and clear hierarchy instead.

The system deliberately does not use light backgrounds, serif typefaces, sharp corners, heavy drop shadows, or dense text blocks, defining its identity as much by what it omits as by what it includes.

## System Prompt (paste into AI tool)

```
This is a SaaS landing page for a rental management platform named Flecto. It uses a dark mode aesthetic with a primary dark green (#004737) background and a high-chroma neon green (#56F09F) accent color for key actions and highlights. Typography is clean and geometric for headlines, transitioning to humanist sans-serif for body text, creating a professional yet modern feel. The layout is centered and spacious, focusing on a clear value proposition and a prominent 'Book a Demo' call-to-action. Critical design constraints include avoiding light backgrounds, serif typefaces, and sharp corners, as the visual language is defined by soft radii and a dark, focused environment. The overall tone is efficient, premium, and trustworthy.
```
