---
version: "alpha"
name: "Astryx Butter"
description: "Tema dourado e amanteigado com superfícies golden, acentos azuis e tipografia display expressiva."
colors:
  primary: "#E2A400"
  secondary: "#0064E0"
  tertiary: "#D69804"
  neutral: "#FFFFFF"
  surface: "#FBCE03"
typography:
  h1:
    fontFamily: Sarina
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Outfit
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Outfit
    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.secondary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 12px
---

## Overview
Astryx Butter é o tema quente e expressivo do design system da Meta. Superfícies douradas criam calor visual enquanto acentos azuis fornecem pontos de ação claros. A fonte display Sarina adiciona personalidade em headlines.

## Colors
- **Primary Gold:** #E2A400
- **Bright Yellow:** #FBCE03
- **Dark Gold:** #D69804
- **Blue Accent:** #0064E0
- **Light Blue:** #2694FE
- **Surface:** Warm whites

## Typography
- **Display:** Sarina (cursive, apenas títulos grandes)
- **Body:** Outfit 400/500/600/700
- **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 sutis com tom dourado. Profundidade por camadas de saturação.
- Cards elevados com background mais claro sobre superfície golden.

## Shapes

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

## Components
- Buttons primários em azul #0064E0 sobre fundo dourado
- Cards com superfície branca e border dourada sutil
- Headlines em Sarina para impacto visual

## Do's and Don'ts
- ✓ Use Sarina apenas para display/hero text
- ✓ Mantenha azul para CTAs e ações
- ✗ Não use Sarina em corpo de texto
- ✗ Não combine múltiplos tons de amarelo sem hierarquia

## Use Case
Landing pages criativas, portfólios, sites de gastronomia e lifestyle, e-commerce premium com identidade calorosa.
<!-- Source: https://designmd.app.br/library/astryx-butter · designmd.app -->