---
version: "alpha"
name: "Astryx Matcha"
description: "Earthy green theme from Meta Astryx Design System. Natural palette with Figtree typography for sustainable brands."
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

Earthy green theme from Meta Astryx Design System. Natural palette with Figtree typography for sustainable brands. Astryx Matcha brings organic energy to the system through earthy greens and warm neutrals. Named after the Japanese tea, it balances vitality with calm — ideal for health-conscious products.



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

Sustainability platforms, health and wellness, organic products, eco-tech, gardening apps, and nature-focused brands.

<!-- Source: https://designmd.app/library/astryx-matcha · designmd.app -->