Flecto

Flecto

Preview image. Unlock full-res

Rounded emerald portal

Industrysaas
Palette
#004737
#56f09f
#fffbec
#032019
#d4ffe8
#99b5af
#faf2d5
#8f37ff
#000000
#ffffff
#222222
#ccdad7

Flecto employs a high-contrast dark green canvas accented by a vibrant, energetic lighter green for key interactive elements. Rounded corners are ubiquitous, creating a soft, approachable aesthetic for sections and components. Typography is crisp and modern, featuring custom sans-serif fonts with subtle letter-spacing variations to enhance legibility and visual rhythm. The overall impression is one of structured friendliness, with clear visual hierarchy driven by color and shape rather than complex elevation. Prioritize Emerald Canvas (#004737) as the dominant background color for full-bleed sections to establish brand identity. Use Mint Accent (#56f09f) exclusively for primary calls to action, active indicators, and key highlights to maintain its impact. Apply a default border-radius of 19px for most card-like elements and content containers for a consistently soft appearance. Use the Aeonik font with varied letter-spacing as outlined in the typography section for all headings and prominent text. Ensure interactive components primarily use rounded shapes, with specific radii like 10px for buttons and 40px for larger section containers. Design for a 'compact' density, using 10px as the default element gap to group related items closely. Prefer outlined buttons using brand colors (Emerald Canvas or Soft Mint) over filled neutral buttons for secondary actions or links. Avoid using multiple vivid accent colors; restrict strong chromatic accents to Mint Accent (#56f09f). Do not break the established rounding pattern; avoid sharp corners for interactive elements or cards unless explicitly part of a decorative shape. Do not use generic system fonts for headings; always use Aeonik for brand consistency and its distinct letter-spacing. Avoid excessive use of shadows; stick to the rgba(0, 0, 0, 0.04) 0px 3px 2px 0px for discrete card elevation only. Do not introduce large, open whitespace between elements; maintain the 'compact' density for optimal information display. Avoid using Cream Card (#faf2d5) as a primary background; reserve it for specific card surfaces to provide subtle variation. Do not use Emerald Canvas (#004737) for body text on light backgrounds; use Dark Wolf (#222222) instead for readability.

More like this