Design skill preview

Open full screen

Forest design skill for AI agents

Overview

Forest is a sustainability-inspired design system skill file for AI coding assistants. It creates modern green interfaces with deep forest surfaces, fresh lime brand accents, rounded cards, clean layouts, and flat components that feel trustworthy and future-focused.

The system is dark-green by default and intentionally focused. It works well when generated UI should feel grounded, ecological, technical, and modern without relying on decorative nature illustrations.

Design Tokens

Color Palette

Forest uses a deep green base with a high-energy lime brand color.

Token Value Purpose
Surface #345401 Primary green page and section background
Deep Surface #1F3400 Secondary panels and darker layout areas
Brand #A1DA02 Primary actions, highlights, active states, and brand moments
Brand Medium #C6ED6B Bright supporting accents and focus states
Heading #F4FAE8 High-contrast headings on green surfaces
Body #C9D6B0 Paragraphs, labels, and supporting UI copy

The palette keeps the same dark-green identity across modes. Depth comes from surface steps and contrast, not from theme switching.

Typography

Forest uses a clean, modern typographic voice designed for practical interfaces. Headings should feel confident and readable, while body copy stays calm against the deep green background.

The system works best when typography is direct and not overly decorative. The lime accent already carries the brand energy, so text should keep the product grounded.

Spacing and Shape

Forest uses an 8px spacing rhythm, equal section spacing, 1152px containers, and generous rounded cards. Components are flat by default: no drop shadows on cards, buttons, inputs, badges, or panels.

Separation comes from green surface steps, borders, spacing, and the bright lime brand token. This keeps generated UI modern and efficient.

Component Language

Cards are rounded, shadow-free panels on deep green surfaces. Buttons should use the lime brand color with clear hover, focus, and disabled states. Layouts should feel minimal and breathable, with enough contrast to make dense product information readable.

Best For

Use Forest for sustainability products, climate tech, finance dashboards with an ecological tone, energy platforms, modern nonprofits, outdoor brands, and SaaS products that need a serious but optimistic green identity.

Comments

Sign in to join the conversation.