Neumorphism2020s Digital

NUMBERS, SOFTLY — a wool felt calculator

Estilo Neumorphism inspirado em "NUMBERS, SOFTLY — a wool felt calculator". CSS Grid, Flexbox, Blend Modes. Com animações.

woolfeltcalculatorneumorphismanimatedgradientgrid-layout

Uso: Apps neumorphism, Landing pages criativas, Projetos experimentais

NUMBERS, SOFTLY — a wool felt calculator

Contexto Histórico

Estilo contemporâneo (2020s Digital) que combina CSS Grid e Flexbox com Glow e Neumorphism.

Quando Usar

Use para projetos neumorphism que precisam de Glow e Neumorphism efeitos.

Princípios de Design

Utilize CSS Grid para estrutura de layout
Aplique Glow consistentemente nos componentes
Mantenha consistência visual

DESIGN.md

---
version: "alpha"
name: "NUMBERS, SOFTLY — a wool felt calculator"
description: "Estilo Neumorphism com CSS Grid e 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 - Estilo Neumorphism da era 2020s Digital.

- 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

Apps neumorphism, Landing pages, Projetos experimentais.

Baixar DESIGN.md

Especificações Técnicas

CSS

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

Variáveis

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

Checklist

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

Cores

Primárias

#8b8680

#98938c

#767170

Secundárias

#a49e96

#d8cfc0

#efe8d8

Efeitos

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

Light/Dark

✓ Light / ○ Dark

Prompt para AI

Atue como um Engenheiro Frontend Sênior e UI Designer Especialista.
Sua tarefa é codificar uma Landing Page completa na primeira tentativa.
- Tema da Landing Page: <INSIRA O TEMA>
- Seções a adicionar: <INSIRA AS SEÇÕES>

Gere o código final imediatamente seguindo estas definições:

## Estilo

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

## Paleta de Cores

- **Primárias:** #8b8680, #98938c, #767170
- **Secundárias:** #a49e96, #d8cfc0, #efe8d8

## Efeitos Visuais

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

## Direção Visual para IA

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
```

## Checklist de Implementação

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

## Regras de Execução

1. Siga fielmente o estilo visual determinado.
2. Use ícones SVG inline de alta qualidade (estilo Heroicons ou Lucide) — PROIBIDO usar emojis como ícones.
3. Adicione `cursor-pointer` e estados de `hover` suaves (transition-all) em todos os elementos interativos.
4. Estrutura Obrigatória da Página:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Headline impactante + Subtitle + 2 botões + Elemento visual 3D/Abstrato via CSS)
   - Features (3 cards com ícones)
   - Testimonials (3 cards)
   - Pricing (3 tiers, destaque no central)
   - CTA Final
   - Footer completo com redes sociais, política de privacidade, termos de uso, contato e links SEO.
5. Todo o conteúdo textual deve ser em Português Brasileiro (PT-BR).
6. O visual deve ser CLARAMENTE distinto — não crie um design "padrão Bootstrap". Force o uso das variáveis de design system fornecidas.
7. Use tags `<style>` no head para classes personalizadas (especialmente para os efeitos complexos de backdrop-filter e animações) que o Tailwind via CDN não cobrir.
8. Responsividade Total: O layout deve se adaptar perfeitamente a Mobile, Tablet e Desktop (Stack vertical no mobile).
9. Inclua meta tags básicas de SEO, Viewport e Open Graph no `<head>`.
10. Footer deve conter: Copyright 2026, Links de navegação secundária e Ícones de redes sociais.
11. Assuma as decisões criativas necessárias para entregar o resultado completo e funcional agora.

Última sincronização: 15/08/2026