Neumorphism2020s Digital

NUMBERS, SOFTLY — a wool felt calculator

Neumorphism style inspired by "NUMBERS, SOFTLY — a wool felt calculator". CSS Grid, Flexbox, Blend Modes. With animations.

woolfeltcalculatorneumorphismanimatedgradientgrid-layout

Use case: Neumorphism apps, Creative landing pages, Experimental projects

NUMBERS, SOFTLY — a wool felt calculator

Historical Context

Contemporary style (2020s Digital) combining CSS Grid and Flexbox with Glow and Neumorphism.

When to Use

Use for neumorphism projects that need Glow and Neumorphism effects.

Design Principles

  • Leverage CSS Grid for layout structure
  • Apply Glow consistently across components
  • Maintain visual consistency

DESIGN.md

---
version: "alpha"
name: "NUMBERS, SOFTLY — a wool felt calculator"
description: "Neumorphism style with CSS Grid and Flexbox."
colors:
  primary: "#8b8680"
  secondary: "#98938c"
  tertiary: "#767170"
typography:
  h1:
    fontFamily: Avenir
    fontSize: 2.5rem
    fontWeight: 700
  body-md:
    fontFamily: Avenir
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 1rem
  md: 2rem
  lg: 4rem
---

## Overview

NUMBERS, SOFTLY — a wool felt calculator - Neumorphism style from the 2020s Digital era.

- Density: 5/10
- Variance: 6/10
- Motion: 8/10 — Animated

- **Style:** Neumorphism
- **Keywords:** wool, felt, calculator
- **Era:** 2020s Digital
- **Light/Dark:** ✓ Light / ○ Dark

## Colors

- **#8b8680**
- **#98938c**
- **#767170**
- **#a49e96**
- **#d8cfc0**

## Typography

- **Avenir**
- **inherit**

## Layout

- **Features:** CSS Grid, Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius

## Effects

- Glow
- Neumorphism
- Gradients
- Hover Effects
- Noise/Grain

## Use Case

Neumorphism apps, Landing pages, Experimental projects.
Download DESIGN.md

Technical Specs

CSS

CSS Grid, Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius

Variables

--felt: #8b8680, --felt-hi: #98938c, --felt-lo: #767170, --panel: #a49e96, --stitch: #d8cfc0

Checklist

☐ CSS Grid ☐ Flexbox ☐ Blend Modes ☐ Responsive ☐ Acessibilidade

Colors

Primary

#8b8680
#98938c
#767170

Secondary

#a49e96
#d8cfc0
#efe8d8

Effects

Glow, Neumorphism, Gradients, Hover Effects, Noise/Grain

Light/Dark

✓ Light / ○ Dark

AI Prompt

Act as a Senior Frontend Engineer and Expert UI Designer.
Your task is to code a complete Landing Page on the first attempt.
- Landing Page Theme: <INSERT THEME>
- Sections to add: <INSERT SECTIONS>

Generate the final code immediately following these definitions:

## Style

- **Name:** NUMBERS, SOFTLY — a wool felt calculator
- **Type:** Neumorphism
- **Keywords:** wool, felt, calculator, neumorphism, animated, gradient, grid-layout
- **Era:** 2020s Digital
- **Light/Dark:** ✓ Light / ○ Dark

## Color Palette

- **Primary:** #8b8680, #98938c, #767170
- **Secondary:** #a49e96, #d8cfc0, #efe8d8

## Visual Effects

Glow, Neumorphism, Gradients, Hover Effects, Noise/Grain

## AI Visual Direction

Design a neumorphism landing page inspired by "NUMBERS, SOFTLY — a wool felt calculator". Use: CSS Grid, Flexbox, Blend Modes, CSS Filters. Colors: #8b8680, #98938c, #767170. Effects: Glow, Neumorphism, Gradients.

## CSS Technical

```css
CSS Grid, Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius
```

## Design System Variables

```css
--felt: #8b8680, --felt-hi: #98938c, --felt-lo: #767170, --panel: #a49e96, --stitch: #d8cfc0
```

## Implementation Checklist

- ☐ CSS Grid ☐ Flexbox ☐ Blend Modes ☐ Responsive ☐ Acessibilidade

## Execution Rules

1. Strictly follow the defined visual style.
2. Use high-quality inline SVG icons (Heroicons or Lucide style) — NEVER use emojis as icons.
3. Add `cursor-pointer` and smooth `hover` states (transition-all) on all interactive elements.
4. Required Page Structure:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Impactful Headline + Subtitle + 2 buttons + 3D/Abstract visual element via CSS)
   - Features (3 cards with icons)
   - Testimonials (3 cards)
   - Pricing (3 tiers, highlight the middle one)
   - Final CTA
   - Full Footer with social links, privacy policy, terms of use, contact and SEO links.
5. All text content must be in English.
6. The visual must be CLEARLY distinct — do not create a "default Bootstrap" design. Force the use of the provided design system variables.
7. Use `<style>` tags in the head for custom classes (especially for complex backdrop-filter effects and animations) that Tailwind CDN doesn't cover.
8. Full Responsiveness: Layout must adapt perfectly to Mobile, Tablet and Desktop (vertical stack on mobile).
9. Include basic SEO, Viewport and Open Graph meta tags in `<head>`.
10. Footer must contain: Copyright 2026, Secondary navigation links and Social media icons.
11. Make the creative decisions needed to deliver the complete, functional result now.

Last synced: 8/15/2026