---
name: Silentshark
description: "This site is worth including as a prime example of a dark, atmospheric game interface with a distinctive, non-corporate hand-drawn aesthetic that prioritizes mood over flashy UI."
version: alpha

colors:
  background: "#13202D"
  primary: "#F3F6FA"
  secondary: "#C6CDD5"
  tertiary: "#F9EAC2"
  neutral: "#434A52"
  bg-soft: "#1C2A38"
  bg-quiet: "#1B4747"
  line: "rgba(14, 18, 22, 0.82)"

typography:
  display:
    fontFamily: casual-script
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: casual-script
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.72px"

rounded:
  sm: 4px
  md: 8px
  lg: 14px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A dark, atmospheric tactical simulation game interface with a distinctive hand-drawn aesthetic.

*A submarine's quiet, dark command center with glowing radar displays.*

## Colors

High contrast between dark oceanic backgrounds and warm, glowing accents for critical UI elements.

- **Background (`#13202D`)** — uses `bg` token
- **Primary text (`#F3F6FA`)** — uses `ink` token
- **Secondary text (`#C6CDD5`)** — uses `ink-soft` token
- **Accent (`#F9EAC2`)** — uses `accent` token
- **Muted (`#434A52`)** — uses `muted` token
- **Borders (`rgba(14, 18, 22, 0.82)`)** — uses `line` token

## Typography

- **Display:** casual-script
- **Body:** casual-script
- **Mono:** monospace

- All text uses casual-script families for a hand-drawn feel.
- Menu items use uppercase with increased letter-spacing.
- Accent text uses a warm parchment color for contrast.

## Layout

Centered column layout with a prominent hero image and vertical menu stack.

*Rhythm:* Generous vertical spacing between menu items creates a calm, unhurried interface.

## Elevation & Depth

- rgba(17, 28, 38, 0.2) 0px 10px 20px 0px
- rgba(7, 11, 16, 0.35) 0px 12px 26px 0px
- Borders: Semi-transparent light borders on buttons and cards against dark backgrounds.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 14px
- `pill`: 999px

## Components

- **button:** Full-width rectangular buttons with semi-transparent backgrounds and subtle hover transitions.
- **card:** Large rounded card for the game title with embedded artwork.
- **hero:** Dramatic centered card with atmospheric artwork and the game title.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated primary colors — screenshot shows a dark, desaturated palette.
- Don't use sharp, geometric, or modern sans-serif fonts — screenshot shows hand-drawn, casual-script typography.
- Don't use busy, cluttered layouts with many competing elements — screenshot shows a calm, centered column layout.
- Don't use fast, jarring animations or transitions — screenshot shows smooth, subtle hover effects.
- Don't use loud, aggressive call-to-action buttons — screenshot shows muted, semi-transparent buttons.
- Don't use white or very light backgrounds — screenshot shows a deep, dark oceanic background.

---

## System Prompt (paste into AI agent)

```
Silent Shark is a tactical submarine simulation game with a dark, atmospheric interface. The design uses a deep oceanic background with hex #13202D and ink white #F3F6FA for high contrast. Accent color is a warm parchment #F9EAC2. Typography is exclusively casual-script (Patrick Hand, Special Elite) for a hand-drawn feel. Critical donts: avoid bright saturated colors, avoid modern sans-serif fonts, avoid cluttered layouts, avoid jarring animations, avoid loud CTAs, and avoid light backgrounds. The interface is calm, centered, and atmospheric, focusing on the game's strategic and silent nature.
```