---
version: "alpha"
name: "Astryx Stone"
description: "Tema em tons de pedra e slate quente. Elegância mineral com Montserrat bold e superfícies sólidas."
colors:
  primary: "#647685"
  secondary: "#8494A3"
  tertiary: "#2C3640"
  neutral: "#F4F2EF"
  surface: "#FFFFFF"
typography:
  h1:
    fontFamily: Montserrat
    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.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 12px
---

## Overview
Astryx Stone é o tema mineral e sólido do design system da Meta. Tons de pedra e slate criam uma atmosfera de autoridade e sofisticação. Montserrat em peso bold traz impacto geométrico às headlines.

## Colors
- **Stone Gray:** #647685
- **Slate:** #8494A3
- **Warm Dark:** #2C3640
- **Light Stone:** #B8C4CE
- **Background:** #F4F2EF (warm white)
- **Charcoal:** #1E272F

## Typography
- **Heading:** Montserrat 600/700 (geométrica bold)
- **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 com tom slate frio-quente.
- Camadas diferenciadas por intensidade de cinza.
- Borders em light stone para separação suave.

## Shapes

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

## Components
- Buttons em charcoal #2C3640 com texto warm white
- Cards com surface branca e sombra stone
- Headlines em Montserrat bold para peso visual

## Do's and Don'ts
- ✓ Use Montserrat bold para impacto em headlines
- ✓ Mantenha hierarquia com tons de cinza
- ✗ Não adicione cores vibrantes à paleta
- ✗ Não use Montserrat light (perde o caráter)

## Use Case
Sites corporativos, portfólios de arquitetura, dashboards executivos, real estate e design de interiores.
<!-- Source: https://designmd.app.br/library/astryx-stone · designmd.app -->