---
version: "alpha"
name: "Astryx Chocolate"
description: "Tema em tons marrons quentes e beige acolhedor. Estética orgânica e artesanal com Fraunces e Albert Sans."
colors:
  primary: "#965E03"
  secondary: "#6B2203"
  tertiary: "#D4A574"
  neutral: "#FFFFFF"
  surface: "#F5F1E8"
typography:
  h1:
    fontFamily: Fraunces
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Albert Sans
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Albert Sans
    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 Chocolate é o tema orgânico e acolhedor do design system da Meta. Tons de marrom e beige criam uma atmosfera artesanal sofisticada. A fonte Fraunces com suas formas fluidas reforça a personalidade natural.

## Colors
- **Primary Brown:** #965E03
- **Dark Brown:** #6B2203
- **Beige Surface:** #F5F1E8
- **Cream:** #FFFFFF
- **Amber accent:** tons muted de amber

## Typography
- **Heading:** Fraunces 600/700 (serif orgânica)
- **Body:** Albert Sans 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 quentes com tom marrom. Profundidade por camadas de beige.
- Separação por diferença de temperatura de cor.

## Shapes

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

## Components
- Buttons em marrom #965E03 com texto branco
- Cards com fundo cream sobre superfície beige
- Headlines em Fraunces para elegância orgânica

## Do's and Don'ts
- ✓ Use Fraunces para headlines e destaques
- ✓ Mantenha hierarquia com saturação de marrom
- ✗ Não use tons frios que quebrem a paleta
- ✗ Não combine muitos pesos de Fraunces

## Use Case
Cafeterias, chocolaterias, produtos artesanais, blogs de lifestyle, landing pages orgânicas e interfaces de bem-estar.
<!-- Source: https://designmd.app.br/library/astryx-chocolate · designmd.app -->