CURATED · OPEN · FREE

Silentshark

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

Dark ModeEditorialCalmCurationTypography

Open in OpenDesign

Visit: https://silentshark.app/alpha/

Identity DNA

submarinetacticalsilentstrategicmaritime

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

Color

#F9EAC2Accent

#F3F6FAInk

#C6CDD5Ink soft

#13202DBG

#1C2A38BG soft

#1B4747BG quiet

#434A52Muted

rgba(14, 18, 22, 0.82)Line

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

Typography

casual-script · monospace

display56px · 600
body16px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 14px

pill · 999px

Semi-transparent light borders on buttons and cards against dark backgrounds.

rgba(17, 28, 38, 0.2) 0px 10px 20px 0px · rgba(7, 11, 16, 0.35) 0px 12px 26px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

160msmicro

260mssmall

800msmedium

cubic-bezier(0.23, 1, 0.32, 1)easing

Smooth transform and opacity transitions on hover. · No flashy animations; subtle and atmospheric.

Subtle background color change and slight transform on menu items. · No visible press state; relies on cursor change.

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.

Voice & Don'ts

Tone Serious, atmospheric, and tactical.
Headlines Hand-drawn, warm, and inviting despite the dark theme.
CTAs Simple, direct, and unobtrusive.

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.
Avoid: Don't use bright, saturated primary colors.
Avoid: Don't use sharp, geometric, or modern sans-serif fonts.
Avoid: Don't use busy, cluttered layouts with many competing elements.
Avoid: Don't use fast, jarring animations or transitions.
Avoid: Don't use loud, aggressive call-to-action buttons.
Avoid: Don't use white or very light backgrounds.

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗

en · zh-CN · zh-TW · ja · ko