---
title: "Flecto — Final Note design system"
variant: extended
source: https://flecto.io/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/flecto-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Flecto — Final Note · Design System

> A heartfelt farewell in deep green and luminous type.

**Theme:** dark · **Industry:** saas · **Source:** https://flecto.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Flecto’s farewell page pairs an intimate editorial message with a bold, deep-green feature panel. Oversized type, restrained mint accents, and generous cream margins make the closing note feel personal and composed.

## North star

Let one oversized, expressive message lead, and use deep green, mint accents, and generous warm-white framing to keep it human and calm.

## Overview

The page is framed by a warm off-white canvas, with a large deep-green panel as its dominant visual field. Green-on-green line details and thin rules add structure without competing with the message. Geist provides a clean, contemporary voice: an oversized, tightly tracked headline anchors the left side, with its second line picked out in bright mint. Supporting copy steps down from crisp cream text to muted sage, while small uppercase labels and dates supply editorial cues. The content sits in an asymmetric composition: a broad text column on the left and a compact thank-you note on the right. Generous open space keeps the farewell calm and legible. A small wordmark and date sit in the light header; restrained footer labels repeat the same framing. There is no prominent photography: typography, color, and subtle circular outlines carry the story.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Flecto Forest | `#004f3f` | `--color-flecto-forest` | brand | Dominant green panel, header wordmark and date details; anchors the page’s identity. |
| Warm Paper | `#f8f7f0` | `--color-warm-paper` | surface | Outer canvas and primary text on the green panel. |
| Sage Haze | `#8bb2a2` | `--color-sage-haze` | neutral | Muted body copy and secondary supporting text on the dark panel. |
| Mint Light | `#a7f4cb` | `--color-mint-light` | accent | Bright highlighted headline text and small editorial accent labels. |
| Fern Rule | `#0e694e` | `--color-fern-rule` | semantic | Measured border tone; use for subtle green-on-green separators and outlines. |
| Moss Line | `#1a6153` | `--color-moss-line` | semantic | Secondary measured line tone, appearing in restrained panel details. |
| Signal Mint | `#52e69a` | `--color-signal-mint` | accent | Brighter green accent used sparingly in text details. |
| Soft Jade | `#5caa8b` | `--color-soft-jade` | semantic | Thin card or content-rule border; keep it subtle against the green panel. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Minor measured text occurrence; not a defining page surface. |

### Semantic aliases

`--color-canvas` → `#004f3f` (Flecto Forest) · `--color-surface` → `#f8f7f0` (Warm Paper) · `--color-text` → `#f8f7f0` (Warm Paper) · `--color-text-muted` → `#8bb2a2` (Sage Haze) · `--color-text-subtle` → `#004f3f` (Flecto Forest) · `--color-border` → `#0e694e` (Fern Rule) · `--color-accent` → `#004f3f` (Flecto Forest) · `--color-accent-2` → `#a7f4cb` (Mint Light) · `--color-accent-3` → `#52e69a` (Signal Mint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f7f0` | `#004f3f` | 8.93:1 | AAA |
| `#8bb2a2` | `#004f3f` | 4.1:1 | AA-large |
| `#8bb2a2` | `#f8f7f0` | 2.18:1 | fail |
| `#004f3f` | `#f8f7f0` | 8.93:1 | AAA |
| `#004f3f` | `#f8f7f0` | 8.93:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 600, 530, 650, 520 | All page typography, from display headline and supporting copy to uppercase labels. | Inter |

- **Geist:** Use tight negative tracking on display text; vary weight and color for hierarchy. Small nav and eyebrow labels are uppercase and widely tracked.

### Type scale — Custom (ratio ≈ 1.809, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 106.5px | 530 | 0.91 | -0.065em | — | Geist | Oversized two-line farewell headline, with mint emphasis on the second line. |
| h1 | 43px | 520 | 1.5 | -0.05em | — | Geist | Primary page heading when used outside the display treatment. |
| h2 | 31.5px | 500 | 1.5 | -0.035em | — | Geist | Secondary message headings and content titles. |
| body | 18px | 400 | 1.55 | 0 | — | Geist | Introductory farewell copy and explanatory paragraph. |
| caption | 17.5px | 400 | 1.45 | 0 | — | Geist | Compact supporting message in the right-side note. |
| nav | 12px | 600 | 1.5 | 0.16em | uppercase | Geist | Small uppercase header date and footer labels. |
| eyebrow | 12px | 650 | 1.5 | 0.18em | uppercase | Geist | Uppercase introductory label above the main headline. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 16, 18, 22, 24, 26, 38, 40, 42, 58, 60, 80, 115, 130 px.
- Section rhythm 58px · element gap 60px · card padding 6px · max content width 1392px.

A light outer canvas frames one broad inset feature panel, with a compact header above and small footer labels below. Inside the panel, content follows an asymmetric two-column composition: the left column carries the eyebrow, headline, and main copy; the right holds a numbered thank-you note. Align text to the left, preserve generous breathing room around the content, and keep the page density spacious. The measured maximum page width is 1392px; use the provided spacing scale rather than introducing arbitrary dimensions.

## Shape & elevation

- No box shadows measured: the page is flat.

The design reads as flat and editorial, with no measured shadows or gradients. Separate the cream outer canvas from the green panel through color and silhouette rather than elevation. Fine green rules and very subtle outlined circles create layering while preserving a calm, low-contrast finish.

## Imagery

The screenshot is typography-led, not photography-led. The brand wordmark is the main visible image asset; subtle circular outlines appear as low-contrast decoration inside the green panel. Keep imagery sparse and secondary, with no invented product mockups or decorative illustration competing with the farewell message.

## Components

### Header

Minimal cream header with the Flecto wordmark aligned left and a small, uppercase date range aligned right.

### Feature panel

Large deep-green rounded panel set within the cream page canvas; the measured page uses a spacious inset composition.

### Eyebrow

Small uppercase mint label above the display headline, tracked to read like an editorial kicker.

### Display headline

Oversized, tightly tracked Geist headline on the left; highlight the second line in bright green.

### Farewell copy

A prominent cream introductory sentence followed by smaller muted sage supporting text and a brief sign-off.

### Thank-you note

Right-side note separated by a thin horizontal rule, with a small index, muted copy, and a crisp cream closing phrase.

### Footer labels

Small uppercase location and brand labels on the cream canvas beneath the main panel.

### Measured component styles

- **Card** (“01 To everyone who trusted us with their”): transparent background · text #f8f7f0 · border 1px solid #5caa8b · radius 0px · padding 18px 0px 4px 0px · 400 16px Geist
- **Navigation item** (“2016 — 2026”): transparent background · text #004f3f · radius 0px · padding 0px 42px · 400 16px Geist

## Do

- Use the measured palette hex values exactly.
- Keep the warm-paper frame visible around the green panel.
- Make the main message the strongest typographic element.
- Use mint for selective emphasis, not large areas.
- Separate the message into a broad left column and compact right note.
- Keep secondary copy muted and comfortably readable.

## Don't

- Do not add gradients or shadows.
- Do not turn the page into a conventional product landing page.
- Do not introduce bright colors beyond the measured palette.
- Do not crowd the panel with extra cards or controls.
- Do not replace the editorial layout with centered text.
- Do not use prominent stock photography or decorative mockups.

## Agent prompt

Build a new editorial brand page in Flecto’s visual style. Frame a large, inset Flecto Forest (#004f3f) panel with a Warm Paper (#f8f7f0) canvas. Use Geist or a close free substitute, with an oversized tightly tracked headline, a small uppercase eyebrow, cream body copy, and restrained Mint Light (#a7f4cb) emphasis. Place the main message in a broad left column and a smaller ruled note on the right; retain generous negative space and subtle green-on-green line details. Keep header and footer labels small, uppercase, and widely tracked. Use Sage Haze (#8bb2a2) for secondary copy. Avoid shadows, gradients, excess decoration, and prominent imagery. Follow measured spacing values and preserve the calm, personal editorial tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Cream canvas frames a large green panel; the main message sits left and a compact ruled note sits right. | clear message hierarchy, editorial side note, brand framing | oversized highlighted headline, uppercase eyebrow, thin horizontal rule, subtle circular outlines |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/flecto-io