---
version: "alpha"
name: "Astryx Y2K"
description: "Playful Y2K pop theme from Meta Astryx Design System. Periwinkle and holographic accents with Poppins + Crimson Text."
colors:
  primary: "#7B61FF"
  secondary: "#F351C0"
  tertiary: "#9081FF"
  neutral: "#F8F5FF"
  surface: "#FFFFFF"
typography:
  h1:
    fontFamily: Poppins
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Crimson Text
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Crimson Text
    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

Playful Y2K pop theme from Meta Astryx Design System. Periwinkle and holographic accents with Poppins + Crimson Text. Astryx Y2K channels the optimistic digital aesthetics of the early 2000s — periwinkle purples, iridescent pink accents, and the playful geometry of Poppins. A nostalgic-futurist theme for bold brands.



## Colors
- **Periwinkle:** #7B61FF
- **Purple:** #9081FF
- **Hot Pink:** #F351C0
- **Background:** #F8F5FF (lavender white)
- **Surface:** #FFFFFF
- **Text:** Deep purple #2D1B69


## Typography
- **Heading:** Poppins 600/700 (geométrica arredondada)
- **Body:** Crimson Text 400/500 (serif elegante)
- **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 purple sutil.
- Efeitos holográficos/iridescentes em hover.
- Gradientes purple-to-pink para profundidade.


## Shapes

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


## Components
- Buttons em periwinkle #7B61FF com hover gradiente
- Cards com sombra lavender e border iridescente sutil
- Badges e chips com gradiente purple-pink


## Do's and Don'ts
- ✓ Use gradientes purple-to-pink com moderação
- ✓ Mantenha Crimson Text para corpo legível
- ✗ Não exagere nos efeitos holográficos
- ✗ Não use todas as cores simultaneamente em um componente


## Use Case

Gen-Z consumer products, social apps, creative platforms, NFT marketplaces, fashion brands, and playful SaaS.

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