Nature Inspired Style
superdesignCC0-1.0Prompt onlyLanding · landingBrutalist · brutalistTexture · textureWarm · warmLuxury · luxuryExperimental · experimentalLight · lightLow (display) · lowGreen · greenVivid · vividSerif · serifGeneral · general
A nature-inspired 'Organic Brutalist' design system perfect for wellness, sustainable CPG, eco-friendly lifestyle brands, or high-end nutrition. Characterized by a palette of deep forest greens and earthy sages, the style utilizes massive editorial typography (Anton) paired with functional sans-serifs (Inter). The layout features 'bento-adjacent' rounded grids, floating organic elements with parallax effects, and a subtle film grain noise overlay that gives the digital experience a tactile, premium paper-like feel. Key elements include oversized headings, ultra-rounded corners (up to 5rem), and fluid reveal animations. Category: Design Systems & Styles. Prompt author listed upstream: Shirle…
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Nature Inspired Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/nature-inspired-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "An earthy, high-end editorial style combining bold industrial typography with soft organic colors and fluid, scroll-triggered animations.",
"style": {
"description": "The style uses a high-contrast 'Forest and Sage' color story. Typography is a mix of heavy, condensed display faces (Anton) for impact and clean, tracked-out sans-serifs (Inter) for utility. Visuals are treated with a persistent SVG noise overlay (4% opacity) to add texture. Animations focus on vertical reveals using a custom cubic-bezier for a 'snappy yet smooth' high-end feel.",
"prompt": "Create a design system using an earthy, organic palette: Forest (#01472e), Sage (#ccd5ae), Olive (#e9edc9), Cream (#fefae0), and Moss (#a3b18a). \n\n### Typography\n- **Display/Headings**: Use 'Anton' (sans-serif/impactful). Hero size: 23vw, leading: 0.75, letter-spacing: -0.05em. Section titles: 15vw.\n- **Body/Utility**: Use 'Inter'. Font weights: 400 (regular), 700 (bold). Use uppercase with letter-spacing 0.2em - 0.4em for all labels and buttons.\n\n### Texture & Effects\n- **Noise Overlay**: Apply a fixed SVG fractal noise overlay at 0.04 opacity across the entire viewport.\n- **Corners**: Use extreme rounding: `border-radius: 5rem` for large sections, `border-radius: 2.5rem` for cards/images.\n- **Shadows**: Soft, deep shadows for floating elements: `shadow-2xl` with a tint of the 'Forest' color (rgba(1, 71, 46, 0.2)).\n\n### Animation\n- **Reveal Logic**: Components should slide up from `translateY(100px)` with `opacity: 0` to `translateY(0)` with `opacity: 1` using `cubic-bezier(0.16, 1, 0.3, 1)` over 1.2s.\n- **Floating Parallax**: Foreground images should have a subtle float animation (`@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }`)."
},
"layout_and_structure": {
"description": "A vertically stacked layout with distinct color-blocked sections using ultra-rounded top corners to separate themes. Employs a fixed navigation bar and high-impact hero section.",
"prompts": [
{
"part": "Header/Navigation",
"prompt": "Fixed top navigation. Left: Logo in bold uppercase with a hyphen prefix. Center: Pill-shaped navigation bar with `backdrop-filter: blur(20px)` and semi-transparent background (#ffffff1a). Links should be uppercase, font-size: 10px, bold. Right: Cart button with a numeric counter badge in a white pill."
},
{
"part": "Hero Section",
"prompt": "Full viewport height. Background: #ccd5ae. Centerpiece: Massive 'Anton' text (23vw) with letters revealed via staggered animation (0.05s delay per letter). Surround the text with 2-3 floating organic images (e.g., ingredients) that have parallax scroll behavior and 3rem rounded corners. Bottom: Dual-column descriptive text and location/origin labels."
},
{
"part": "Product/Feature Grid",
"prompt": "Background: #e9edc9. Top-padding with 5rem rounded corner. Heading: Massive 'Anton' display text (15vw) paired with a large circular CTA button. Grid: 3-column layout. Each card features an aspect-ratio [4/5] image with 2.5rem radius. On hover, image scales 1.1x and a 'Quick Add' button reveals from the bottom with a blur overlay."
},
{
"part": "Footer",
"prompt": "Background: #01472e. Text color: #ccd5ae. Structure: 12-column grid. Left 6 cols: Large newsletter signup with an uppercase underline-only input field. Right 6 cols: Two columns of links using bold, tracked-out 11px uppercase text. Bottom: Copyright and legal links with 30% opacity."
}
]
},
"special_ui_components": [
{
"component": "Floating Organic Cards",
"description": "Images with extreme rounding and parallax rotation.",
"prompt": "Implement images with `border-radius: 3rem`. Use a CSS animation named 'float' (translateY -20px and rotate 5deg) running infinitely. Apply a scroll-listener that adds additional translateY based on scroll depth (speed factor 0.05)."
},
{
"component": "Blur-Reveal Button",
"description": "Hover interaction for product cards.",
"prompt": "Card overlay: `background: rgba(1, 71, 46, 0.3)`, `backdrop-filter: blur(2px)`. Inner button: White background, Forest text, uppercase, tracking-widest. Button should translate up 32px on hover while the overlay opacity fades from 0 to 1."
}
],
"special_notes": "MUST: Maintain the noise overlay for the 'analog' feel. MUST: Use the exact cubic-bezier (0.16, 1, 0.3, 1) for all transitions to ensure the 'premium' motion signature. DO NOT: Use standard sharp corners; everything must have at least a small radius, but primary containers must use the 5rem radius. DO NOT: Use standard black text; always use the Forest (#01472e) color for dark text."
}
---
"Nature Inspired Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Nature Inspired Style. \"Nature Inspired Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-nature-inspired-style",
"license": "CC0-1.0",
"attribution": "\"Nature Inspired Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#e9edc9"
},
"foreground": {
"$type": "color",
"$value": "#01472e"
},
"card": {
"$type": "color",
"$value": "#e9edc9"
},
"card-foreground": {
"$type": "color",
"$value": "#01472e"
},
"primary": {
"$type": "color",
"$value": "#01472e"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#ccd5ae"
},
"secondary-foreground": {
"$type": "color",
"$value": "#01472e"
},
"accent": {
"$type": "color",
"$value": "#ccd5ae"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#dbdfbd"
},
"muted-foreground": {
"$type": "color",
"$value": "#5a8777"
},
"border": {
"$type": "color",
"$value": "#c8ccad"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#01472e"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Nature Inspired Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520. */
:root {
--background: #e9edc9;
--foreground: #01472e;
--card: #e9edc9;
--card-foreground: #01472e;
--primary: #01472e;
--primary-foreground: #fafaf9;
--secondary: #ccd5ae;
--secondary-foreground: #01472e;
--accent: #ccd5ae;
--accent-foreground: #1c1917;
--muted: #dbdfbd;
--muted-foreground: #5a8777;
--border: #c8ccad;
--destructive: #dc2626;
--ring: #01472e;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Nature Inspired Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520. */
/** Tailwind theme extend for Nature Inspired Style (superdesign-nature-inspired-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#e9edc9",
"foreground": "#01472e",
"card": "#e9edc9",
"primary": "#01472e",
"primary-foreground": "#fafaf9",
"secondary": "#ccd5ae",
"accent": "#ccd5ae",
"muted": "#dbdfbd",
"border": "#c8ccad",
"destructive": "#dc2626",
"ring": "#01472e"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Nature Inspired Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/nature-inspired-style @ 6c6090694520. */
@layer base {
:root {
--background: #e9edc9;
--foreground: #01472e;
--card: #e9edc9;
--card-foreground: #01472e;
--primary: #01472e;
--primary-foreground: #fafaf9;
--secondary: #ccd5ae;
--secondary-foreground: #01472e;
--accent: #ccd5ae;
--accent-foreground: #1c1917;
--muted: #dbdfbd;
--muted-foreground: #5a8777;
--border: #c8ccad;
--destructive: #dc2626;
--ring: #01472e;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}