---
version: "alpha"
name: "Astryx Matcha"
description: "Tema verde terroso com acentos vibrantes sobre superfícies neutras quentes. Fresco, orgânico e equilibrado."
colors:
  primary: "#0D8626"
  secondary: "#0B991F"
  tertiary: "#24BB5E"
  neutral: "#F8F5F0"
  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 Matcha é o tema verde e terroso do design system da Meta. Combina verdes vibrantes como cor de accent com superfícies neutras aquecidas, criando interfaces que transmitem frescor e naturalidade sem sobrecarregar.

## Colors
- **Primary Green:** #0D8626
- **Bright Green:** #0B991F
- **Light Green:** #24BB5E
- **Background:** Earthy warm neutrals
- **Surface:** #FFFFFF (light)
- **Text:** Escuro sobre claro

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

## 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
- Sombras neutras com leve tom quente.
- Cards elevados com superfície branca sobre background cream.
- Borders sutis para separação.

## Shapes

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

## Components
- Buttons primários em verde #0D8626 com texto branco
- Cards com superfície branca e accent verde em ícones/badges
- Progress bars e indicadores em gradiente verde

## Do's and Don'ts
- ✓ Use verde como accent para ações e destaques
- ✓ Mantenha superfícies neutras como base
- ✗ Não faça backgrounds inteiros em verde
- ✗ Não misture verdes frios com a paleta quente

## Use Case
Apps de saúde e wellness, dashboards de sustentabilidade, produtos naturais, finanças verdes e interfaces de meditação.
<!-- Source: https://designmd.app.br/library/astryx-matcha · designmd.app -->