fristydev/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
fristy.dev	Dark Discord-gaming personal hub. Single-column mono-type aesthetic, hairline cards, blurple accents.	void panel blurple blurple-soft mint ink muted faint aqua sky periwinkle violet pink #060913 #0C1222 #5865F2 #8891FF #57F287 #E8ECF6 #A1A1AA #71717A #7EE7D8 #7CCBFF #7F8CFF #B56DFF #F38AD8	display h2 body mono-sm kicker fontFamily fontSize fontWeight letterSpacing Cascadia Mono 3.75rem 900 -0.02em fontFamily fontSize fontWeight Cascadia Mono 1.875rem 700 fontFamily fontSize Cascadia Mono 1rem fontFamily fontSize Cascadia Mono 0.875rem fontFamily fontSize Cascadia Mono 0.875rem	card image pill 16px 12px 9999px	sm md lg section 8px 16px 24px 80px	page header hero-title card button-primary button-primary-hover link-accent status-live backgroundColor textColor {colors.void} {colors.ink} backgroundColor textColor {colors.void} {colors.ink} typography {typography.display} backgroundColor textColor rounded {colors.panel} {colors.ink} {rounded.card} backgroundColor textColor rounded {colors.blurple} #FFFFFF {rounded.pill} backgroundColor textColor {colors.blurple-soft} {colors.void} textColor {colors.blurple-soft} textColor {colors.mint}

Overview

Midnight-terminal personal hub. One idea per screen: a sticky blurred header, a gradient hero, then stacked anchor sections (Discord, Projects, Contact) inside a narrow centered column. Everything is set in Cascadia Mono — the whole site reads like a friendly terminal, warmed up by Discord blurple and a five-stop pastel gradient.

Colors

Near-black blue foundation, hairline borders (white/10), single accent family.

• Void (#060913): Page background, fixed. Two faint radial glows sit on top (blurple top-right, mint top-left).
• Panel (#0C1222): Card fill for Discord, projects, contact, footer-adjacent surfaces.
• Blurple (#5865F2): Primary actions, active language, focus borders. Hover lightens to Blurple-soft.
• Blurple-soft (#8891FF): Kickers (// lanyard), links, mono metadata, gradient midpoint.
• Mint (#57F287): "Live" states only — never body text.
• Ink (#E8ECF6) / Muted (#A1A1AA) / Faint (#71717A): Text hierarchy. Body copy is always Muted on Void.
• Hero gradient: Aqua → Sky → Periwinkle → Violet → Pink, left to right, clipped to the fristy headline only.

Typography

Cascadia Mono everywhere — display, body, labels, buttons. No second typeface.

• Display: fristy hero and 404, weight 900, tight tracking, gradient-clipped (hero) or solid (404).
• H2: Section titles, bold, tight. Always paired with a kicker above.
• Kicker: // <source> in Blurple-soft mono-sm (e.g. // lanyard, // git.fristy.net, // iletisim@fristy.dev).
• Voice: Sentence case, always — first letter capitalized, brand names capitalized (Discord, Gitea, Spotify). Never all-lowercase sentences. Turkish-first, mirrored in English and German.

Layout

Single column, max-w-4xl, horizontal padding 20px, 80px section gaps. Sticky header (blur + hairline bottom border, 64px) with brand left, anchors center, language pill right. Sections carry scroll-mt so anchors land below the header. Footer is centered small-print. 404 reuses header + footer with a centered message block. Loading state is a pulse skeleton in the same column.

Elevation & Depth

Flat surfaces, no drop shadows. Depth comes from layering: hairline white/10 card borders, white/5 inner rows, backdrop-blurred sticky header, and the two fixed background glows. Status is conveyed with color dots and pills, never shadows.

Shapes

Cards are rounded-2xl (16px). Buttons, pills, badges and the language switcher are fully round. Avatars match card radius (large) with circular status dots overlapping the corner. Activity art is small rounded squares with circular overlay icons. Scrollbar is thin, thumb Blurple on hover.

Components

• Language switcher: Pill group (TR/EN/DE), active option filled Blurple. Persists to a locale cookie via client write + window.location.reload() — no URL prefixes, ever.
• Discord card: Avatar (72px) + status dot, display name, @username, status pill (dot + localized status + · Live). Below: custom status, game rows (56px art + name/details/state/elapsed), Spotify row (48px cover), or a quiet-state line. 15s client polling over server-rendered initial data.
• Project card: Mono repo path, bold name (links to website if set, else repo), 3-line description, language dot + stars/forks/updated row, split footer links (website left, Gitea right).
• Contact card: 28px brand icon + label + mono handle, full-card link, arrow on hover. Email card swaps the arrow for mailto + copy button.
• Section heading: Kicker, H2, optional subtitle; optional right-aligned action (e.g. profile link).

Do's and Don'ts

• Do keep every user-facing sentence capitalized and brand names exact.
• Do render data sections on the server first, enhance on the client (polling, clipboard, locale switch).
• Do use next/image with explicit sizes; add remote hosts to next.config.ts image patterns.
• Do keep Turkish, English and German dictionaries in sync — same keys, same structure.
• Don't add locale prefixes to paths (/tr, /en are banned by design).
• Don't use emojis in UI chrome; status color + typography carry meaning.
• Don't put code comments in source files; the design rationale lives here.