Forest Ink
#004737Dominant brand surface — hero panels, section backgrounds, thick structural borders, nav header, footer blocks. Deep teal absorbs the page and makes cream text glow
Flecto
flecto.ioWebsite preview
The design language
Flecto is a warm botanical rental platform aesthetic: a cream canvas (#fffbec) replaces pure white, deep forest teal (#004737) anchors hero sections and borders, and vivid mint (#56f09f) punctuates interactive moments. Typography is exclusively Aeonik at weight 400 — no bold, no light — relying on negative letter-spacing (-0.043em at display sizes) to create contrast through tightness rather than weight. The system is flat, border-driven, and color-blocked: large rounded surfaces (40–60px radius) in deep teal sit directly on the warm cream, with thin chromatic borders carrying most of the structural weight instead of shadows. Mint appears sparingly as a functional accent on filled buttons, icons, and decorative shapes, never as large surface area.
Color palette
brand
Mint Pulse
#56f09fGreen outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
accent
Mint Mist
#d4ffe8Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color
Iris Spark
#8f37ffViolet outline accent for tags, dividers, and focused UI edges.
neutral
Cream Canvas
#fffbecPage background — warm off-white replaces pure white. Border-color on teal sections, card fills on light areas, heading text on dark surfaces
Deep Loam
#032019Text color on cream surfaces, subtle dark borders. Near-black with a green undertone that harmonizes with the Forest Ink brand color
Sage Whisper
#99b5afMuted body text and secondary borders — desaturated green-gray that recedes on cream while staying tonally consistent with the brand palette
Stone Mist
#ccdad7Hairline dividers, icon borders, subtle background tints on cards within light sections
Bone
#faf2d5Soft warm card background — slightly warmer and more saturated than cream canvas, used to lift specific content blocks without breaking the tonal family
Charcoal
#222222Body text and standard button borders in neutral contexts. Used when chromatic text is not appropriate
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
74px · 400 · 1 · -3.18px trackingThe quick brown fox jumps
text-66
66px · 400 · 1.2The quick brown fox jumps
text-64
64px · 400 · 1The quick brown fox jumps
text-60
60px · 400 · 1The quick brown fox jumps
heading-lg
56px · 400 · 1.1 · -2.4px trackingThe quick brown fox jumps
heading
36px · 400 · 1.15 · -1.08px trackingThe quick brown fox jumps
text-33
33px · 400 · 1.3The quick brown fox jumps
text-32
32px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aeonik
- Weights
- 400
- Sizes
- 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 24px, 26px, 28px, 32px, 33px, 36px, 56px, 60px, 64px, 66px, 74px
- Line height
- 1.00–2.88 (contextual)
- Letter spacing
- -0.0430em at 56px+ (display), -0.0300em at 32–36px (heading), -0.0100em at 18–24px (subheading), normal to +0.0200em at 8–14px (caption/label)
- Fallback
- Inter, Satoshi, General Sans
- Features
- "tnum" on
Universal typeface — headings, body, UI labels, buttons. Single weight 400 across the entire system; contrast is achieved through size and negative letter-spacing, not weight. This is the signature choice: a monoweight geometric sans where display headlines at 56–74px tighten to -0.043em while body text at 14–16px sits at normal or slightly positive tracking. Tabular numerals ('tnum') are enabled for all instances.
Additional typeface
roobert
- Weights
- 400
- Sizes
- 12px, 16px
- Line height
- 1.40–1.87
- Fallback
- Inter, Söhne, Untitled Sans
Secondary body face — used for longer descriptive copy, list items, and hero subtext. Warmer and more humanist than Aeonik, providing tonal variety in long-form text while staying in the same single-weight, geometric family.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 40-80px
- Card padding
- 12-20px
- Element gap
- 10-12px
Border radius
cards
19pxpills
9999pxbuttons
40pxsmall-chips
10pxicon-squares
5.76pxlarge-panels
60pxSpacing scale
1px2px3px4px5px6px7px8px9px10px11px12px14px15px16px17px18px19px20px21px22px24px25px26px28px29px30px32px36px38px40px42px43px50px55px58px61px70px75px85px88px100px161px170px171px183pxGuidelines
Do
- Use Aeonik at weight 400 for all text — never introduce bold or light weights; let size and negative tracking create hierarchy
- Apply -0.043em letter-spacing at 56px and above; tighten to -0.030em at 32–36px; open up to +0.020em at caption sizes 8–12px
- Use Forest Ink (#004737) for hero backgrounds and primary structural borders; never use it as a small accent — it is a surface color
- Reach for Mint Pulse (#56f09f) only on filled buttons, active icons, and decorative shapes; its rarity is the system
- Set borders at 1–2px using Forest Ink on dark sections and Stone Mist (#ccdad7) on light sections instead of adding shadows
- Set page background to Cream Canvas (#fffbec) — never pure #ffffff for the base canvas
- Use border-radius 40px on all buttons, 19px on cards, and 9999px on pill tags
Don’t
- Don't introduce additional font weights — the monoweight system is the signature
- Don't use Mint Pulse (#56f09f) as a large surface area — it loses punch; keep it to button-sized and icon-sized moments
- Don't add drop shadows beyond rgba(0,0,0,0.04) 0px 3px 2px 0px — the flatness is intentional
- Don't use pure #ffffff as the page background — the cream warmth is load-bearing for the botanical feel
- Don't apply gradients — the system is strictly flat color blocks
- Don't use #8f37ff (Iris Spark) as a functional color — it is decorative only and should appear rarely
- Don't center-align body copy or lists — only headlines; body text stays left-aligned for reading rhythm
Components
Filled Mint Button
Primary call-to-action (Login, Start)Background #56f09f, text in Deep Loam (#032019), Aeonik 14px weight 400, padding 10px 24px, border-radius 40px. No border. Sits on white or cream surfaces.
Outlined Dark Button
Secondary action (Book a Demo)Transparent background, 1px solid #222222 border, text #222222, Aeonik 14px weight 400, padding 10px 20px, border-radius 40px. Inverts to cream-on-teal when on dark hero panels.
Ghost Pill Button
Tertiary action or filterBackground #d4ffe8, text #004737, no border, Aeonik 12px weight 400, padding 6px 14px, border-radius 9999px. Used for tag-like actions and active filter states.
Hero Panel
Full-bleed dark sectionBackground #004737, border-radius 0 at edges but 19–60px on inner cards, generous 80–120px vertical padding, centered headline at 56–74px Aeonik weight 400 in #fffbec.
Light Card
Content card on cream canvasBackground #ffffff or #faf2d5, 1px solid #ccdad7 border, border-radius 19px, padding 20px. Shadow rgba(0,0,0,0.04) 0px 3px 2px 0px when no border present.
Tinted Feature Card
Highlighted content blockBackground #d4ffe8, no border, border-radius 19px, padding 24px, heading at 28px #004737.
Language Selector
Compact utility dropdownWhite background, 1px solid #ccdad7 border, border-radius 10px, padding 6px 12px, text 12px Aeonik, chevron icon in Sage Whisper.
Navigation Bar
Top-level site navWhite background, height ~64px, horizontal flex: logo left, nav links center-left, utility buttons right. No bottom border — separation from hero is achieved by color contrast.
Decorative Shape Module
Brand illustration elementFlat vector shapes in #56f09f on dark teal hero — rounded rectangles, connecting lines, organic key/branch motifs. No gradients, no shadows, 100% opaque mint.
Footer Section Block
Dark footer columnBackground #004737, text #fffbec at 14px, section headings at 20px, generous padding 40px, border-radius 0 (full-bleed).
Icon Glyph
UI icon systemOutlined 1.5px stroke, 16–20px size, color Sage Whisper (#99b5af) on cream or #fffbec on teal. Rounded line caps. Filled variant in #56f09f for active states.
Circular Action Button
Floating utility (download, scroll)40px circle, 1px solid #ccdad7 border, white background, centered icon, no shadow.
Surfaces & elevation
Level 0
Page Canvas
#fffbecBase background for all light sections — warm cream replaces pure white
Level 1
Card Lift
#faf2d5Slightly warmer card surface within cream pages — subtle separation without hard borders
Level 2
Tinted Highlight
#d4ffe8Mint-tinted surface for selected cards, tag backgrounds, pill highlights
Level 3
Dark Hero Panel
#004737Full-bleed dark teal sections — hero, footer blocks, feature panels
The system deliberately avoids heavy shadows. Most structural separation is achieved through chromatic borders (1–2px in #004737 or #ccdad7) and background color contrast (cream → mint-tint → deep teal). The single shadow token is a barely-perceptible 4%-opacity lift used only on light-section cards that lack a border. This flat aesthetic keeps the visual language botanical and graphic rather than skeuomorphic.
Card
rgba(0, 0, 0, 0.04) 0px 3px 2px 0px
Layout & imagery
Layout
Page model is max-width 1200px centered, with full-bleed dark teal sections breaking out. The hero is a full-viewport-height dark teal band with centered headline and decorative illustration. Navigation is a white top bar with logo left, links center-left, and utility actions (language, book demo, login) right-aligned. Sections alternate between cream canvas and forest-teal panels, separated by generous 40–80px vertical gaps. Content within light sections is primarily left-aligned text in a single column at 600–800px max width. Cards use a 19px radius and appear in 1- or 3-column grids. The overall rhythm is spacious breathing room between sections, compact information density within them.
Imagery
The site uses flat geometric illustration over photography. The hero features a organic key-and-branch diagram in solid mint (#56f09f) on the deep teal background — rounded rectangles connected by thick lines, evoking a growing plant or network. No product screenshots, no lifestyle photography, no 3D renders. Iconography is outlined 1.5px stroke in a consistent single style. Imagery is decorative atmosphere rather than explanatory content; the brand relies on color and shape language instead of photographs.
Design notes
Agent Guide
## Quick Color Reference - Page background: #fffbec (Cream Canvas) - Primary text on cream: #032019 (Deep Loam) - Dark hero surface: #004737 (Forest Ink) - Text on dark: #fffbec - Filled button / accent: #56f09f (Mint Pulse) - Outlined chromatic action: #d4ffe8 border (Mint Mist ghost pill); primary action: #004737 (outlined action border) ## Example Component Prompts 1. **Hero Section**: Full-bleed #004737 background, border-radius 0, vertical padding 120px. Centered headline at 74px Aeonik weight 400, color #fffbec, letter-spacing -3.18px. Subtext at 16px Aeonik weight 400, color #99b5af. Below: a flat mint (#56f09f) decorative shape composition — rounded rectangles 40–60px radius, connected by 4px-thick lines, 100% opacity, no gradients or shadows. 2. **Navigation Bar**: White (#ffffff) background, height 64px, horizontal flex with 1200px max-width container. Left: Flecto wordmark in Aeonik 20px #004737. Center-left: nav link 'About' in 14px Aeonik #222222. Right group: language pill (12px, 1px #ccdad7 border, 10px radius), outlined 'Book a Demo' button (1px #222222 border, 40px radius, 10px 20px padding), filled 'Login' button (#56f09f background, #032019 text, 40px radius, 10px 24px padding). 3. **Feature Card (Light)**: Background #ffffff, 1px solid #ccdad7 border, border-radius 19px, padding 24px. Heading at 28px Aeonik weight 400, color #004737, letter-spacing -0.56px. Body at 14px roobert, color #032019, line-height 1.40. No shadow. 4. **Ghost Pill Tag**: Background #d4ffe8, no border, border-radius 9999px, padding 6px 14px. Text at 12px Aeonik weight 400, color #004737, letter-spacing +0.024em. 5. **Footer Column Block**: Background #004737 full-bleed, padding 60px top. Section heading at 20px Aeonik #fffbec. Links at 14px roobert #99b5af, 10px row gap.
Similar brands
Linear
Same monoweight sans-serif (Aeonik/Inter at single weight) with negative letter-spacing on display sizes and flat color-block hero sections
Arc browser
Cream/warm canvas with a single vivid accent color, rounded surfaces, and flat illustration over photography
Notion
Light cream backgrounds, generous border-radius, and border-driven separation instead of heavy shadows
Mercury
Deep brand-color hero panels with cream/off-white text, flat surfaces, and single-accent-color interaction moments
Pitch
Monoweight geometric sans, warm off-white canvas, and border-radius-driven soft geometry without gradients or shadows
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
