---
name: Flecto
description: "This site is a strong example of a modern, dark-mode B2B SaaS landing page that balances professionalism with a bold, memorable accent color."
version: alpha

colors:
  background: "#004737"
  primary: "#FFFBE8"
  tertiary: "#56F09F"
  line: "rgba(86,240,159,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 10px
  md: 19px
  lg: 40px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The easiest way to access new customers and a greener future.

*A streamlined logistics dashboard for rental businesses.*

## Colors

High-contrast dark mode with a signature neon green accent.

- **Background (`#004737`)** — uses `bg` token
- **Primary text (`#FFFBE8`)** — uses `ink` token
- **Accent (`#56F09F`)** — uses `accent` token
- **Borders (`rgba(86,240,159,0.2)`)** — uses `line` token

## Typography

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

- Geometric sans for display headlines.
- Humanist sans for body text.

## Layout

Centered hero with large graphic and prominent CTA.

*Rhythm:* 4px base unit

## Elevation & Depth

- 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)

## Shapes

- `sm`: 10px
- `md`: 19px
- `lg`: 40px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with neon green fill or outline.
- **card:** Floating cards with subtle shadows and rounded corners.
- **chip:** Minimal chips for categories.
- **input:** Clean, rounded input fields.
- **hero:** Large, centered hero section with a dominant dark background and neon green accents.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```