Astryx Neutral

---
version: "alpha"
name: "Astryx Neutral"
description: "Tema neutro e minimalista do Astryx Design System. Estética muda com Figtree e paleta monocromática."
colors:
  primary: "#15110C"
  secondary: "#4E606F"
  tertiary: "#111112"
  neutral: "#F8F4ED"
  surface: "#FFFFFF"
typography:
  h1:
    fontFamily: Figtree
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Figtree
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Figtree
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  sm: 1.0rem
  md: 1.5rem
  lg: 2.0rem
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 12px
---

## Overview
Astryx Neutral é o tema fundacional do design system da Meta. Prioriza legibilidade absoluta com uma paleta monocromática aquecida e tipografia system-first usando Figtree. Projetado para interfaces onde o conteúdo é protagonista.

## Colors
- **Background:** #F8F4ED (light) / #111112 (dark)
- **Surface:** #FFFFFF (light) / #1F1F22 (dark)
- **Text:** #15110C (light) / #DFE2E5 (dark)
- **Accent:** #15110C (light) / #DFE2E5 (dark)
- **Secondary:** #4E606F
- **Border:** rgba(5,54,89,0.1)

## Typography
- **Heading:** Figtree 600/700
- **Body:** Figtree 400/500
- **Code:** SF Mono
- **Scale:** base 14px (0.875rem), ratio 1.2
- **Weights:** 400, 500, 600, 700

## Layout
- **Spacing scale:** 0/2/4/6/8/12/16/20/24/28/32/36/40/44/48 px
- **Radius:** inner 8px, element 12px, container 16px, page 32px
- **Element sizes:** sm 28px, md 32px, lg 36px

## Elevation & Depth
- Sem sombras pesadas. Profundidade comunicada por borders sutis e diferença de superfície.
- Border padrão: rgba(5,54,89,0.1)

## Shapes

Base corner radius: 8px. See rounded tokens in front matter for the full scale.

## Components
- Buttons com radius 12px e padding consistente
- Cards com surface #FFFFFF e border sutil
- Inputs com height md 32px e radius 8px

## Do's and Don'ts
- ✓ Use contraste alto para texto principal
- ✓ Mantenha hierarquia com peso tipográfico
- ✗ Não adicione cores saturadas
- ✗ Não use sombras dramáticas

## Use Case
Dashboards corporativos, ferramentas de produtividade, editores de texto, painéis administrativos e qualquer interface que priorize conteúdo sobre decoração.

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:** Astryx Neutral
- **Tipo:** Minimalista neutro com tipografia system-first e contraste calibrado para máxima legibilidade
- **Keywords:** neutral, minimal, system-font, monochrome, clean, figtree, muted, accessible, meta, astryx
- **Era:** 2026 Meta
- **Light/Dark:** ✓ Full / ✓ Full

## Paleta de Cores

- **Primárias:** Background #F8F4ED, Surface #FFFFFF, Text #15110C, Accent #15110C
- **Secundárias:** Secondary #4E606F, Border rgba(5,54,89,0.1), Dark BG #111112, Dark Surface #1F1F22

## Efeitos Visuais

Transições suaves com cubic-bezier(0.24, 1, 0.4, 1), motion fast 175ms, medium 410ms. Sem sombras pesadas, foco em borders sutis.

## Direção Visual para IA

neutral minimal design system, muted monochrome UI, system font interface, clean corporate dashboard, warm paper-white background

## CSS Technical

```css
font-family: 'Figtree', sans-serif; border-radius: 12px; transition: all 410ms cubic-bezier(0.24, 1, 0.4, 1); background: #F8F4ED; color: #15110C;
```

## Design System Variables

```css
--bg: #F8F4ED, --fg: #15110C, --accent: #15110C, --radius: 12px, --spacing: 1.5rem, --font-display: 'Figtree', --font-body: 'Figtree'
```

## Checklist de Implementação

- 1. Importar Figtree do Google Fonts 2. Configurar escala tipográfica base 14px ratio 1.2 3. Aplicar radius scale (8/12/16/32px) 4. Implementar tokens de spacing (0-48px) 5. Configurar motion tokens (175ms/410ms/975ms) 6. Testar contraste WCAG AA 7. Validar modo light e dark 8. Aplicar border sutil rgba(5,54,89,0.1)

## 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.