---
version: "alpha"
name: "Astryx Gothic"
description: "Dark-only atmospheric theme from Meta Astryx Design System. Deep blue-gray surfaces with distressed display typography."
colors:
  primary: "#5A7A9A"
  secondary: "#3A4A5C"
  tertiary: "#1E2830"
  neutral: "#C8CDD3"
  surface: "#141A22"
typography:
  h1:
    fontFamily: Gothic Display
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Inter
    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

Dark-only atmospheric theme from Meta Astryx Design System. Deep blue-gray surfaces with distressed display typography. Astryx Gothic is the only dark-only theme in the system. Its deep blue-gray palette and distressed type create an atmospheric, editorial mood for products that reject conventional light-mode design.



## Colors
- **Background:** #0A0E14 (deep navy-black)
- **Surface:** #141A22 (raised dark)
- **Text:** #C8CDD3 (muted white)
- **Accent:** #5A7A9A (steel blue)
- **Secondary:** #3A4A5C (muted blue-gray)
- **Border:** #1E2830


## Typography
- **Display:** Tipografia distressed/gótica para impacto
- **Body:** Sans-serif limpa para legibilidade
- **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
- Gradientes escuros sutis para separação de camadas.
- Glow mínimo em elementos interativos.
- Sem sombras tradicionais — usar diferença de luminosidade.


## Shapes

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


## Components
- Buttons com accent steel blue e texto claro
- Cards com surface #141A22 e border #1E2830
- Display text com tratamento distressed


## Do's and Don'ts
- ✓ Mantenha contraste suficiente para acessibilidade
- ✓ Use tipografia distressed com moderação (apenas display)
- ✗ Não implemente modo light
- ✗ Não use cores saturadas brilhantes


## Use Case

Gaming platforms, music apps, dark-mode-first products, creative tools, nightlife brands, and atmospheric interfaces.

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