CURATED · OPEN · FREE

Flecto

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

SaaSProductivityApp UIGeometricRefined

Flecto screenshot

↓ Download design system (23 MB)Open in OpenDesign

Visit: https://flecto.io

📦 Browse pack contents →

01

Identity DNA

Rental ManagementSaaSB2BEfficiency

A streamlined logistics dashboard for rental businesses.

02

Color

#56F09FAccent

#FFFBE8Ink

#004737BG

rgba(86,240,159,0.2)Line

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

03

Typography

geometric-sans · humanist-sans

display64px · 400
body16px · 400

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

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base unit

05

Surfaces

sm · 10px

md · 19px

lg · 40px

pill · 999px

1px solid rgba(86,240,159,0.2)

rgba(0,0,0,0.12) 0px 3px 3.96px 0px · rgba(0,0,0,0.1) 0px 18px 18px 0px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero with large graphic and prominent CTA.

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Smooth fade-ins and scale transitions for interactive elements.

Subtle color shifts or scale changes on interactive elements. · Active state with slight scale-down.

08

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.

09

Voice & Don'ts

Tone Professional, efficient, and forward-thinking.
Headlines Direct and benefit-oriented.
CTAs Action-oriented and clear.

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.
Avoid: Jargon
Avoid: Aggressive sales language
Avoid: Overly complex sentences

10

Inside the pack — real screenshots

Flecto — 桌面首屏（hero） — 桌面首屏（hero）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko