Skip to content

DESIGN.md

Latest commit

 

History

History
102 lines (84 loc) · 3.43 KB

DESIGN.md

File metadata and controls

102 lines (84 loc) · 3.43 KB
version alpha
name noCode.media Visual System
description Editorial-to-terminal marketplace UI with monochrome structure, dense dark modules, and a red neon highlight accent.
colors
primary secondary surface on-surface background foreground terminal-bg terminal-surface terminal-surface-raised terminal-border muted muted-dark accent accent-deep success
#ff2a2a
#6b6b6b
#0a0a0a
#ffffff
#f7f7f7
#000000
#050505
#0a0a0a
#1a1a1a
#222222
#6b6b6b
#888888
#ff2a2a
#8b0000
#00ff9d
typography
hero-cycle label-mono body-sm
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
80px
400
1.3
0em
fontFamily fontSize fontWeight lineHeight letterSpacing
Space Mono
10px
400
1.4
1px
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
12px
400
1.5
0em
spacing
xs sm md lg xl xxl
4px
8px
16px
24px
32px
80px
rounded
sm md lg xl
4px
6px
8px
12px
components
terminal-highlight terminal-card terminal-card-hover
backgroundColor textColor rounded typography
{colors.primary}
{colors.terminal-bg}
{rounded.sm}
{typography.label-mono}
backgroundColor textColor rounded
{colors.terminal-surface}
{colors.on-surface}
{rounded.xl}
backgroundColor textColor rounded
{colors.terminal-surface}
{colors.primary}
{rounded.xl}

Overview

noCode.media opens with a quiet editorial white hero, then drops into a dense black terminal marketplace. The structure stays monochrome and restrained; red is the only highlight accent for interactive state, category badges, ratings, tabs, preview affordances, and glowing borders.

Colors

Use #ff2a2a for highlights that used to be blue/cyan. Keep black, white, gray, and dark surfaces unchanged so the current contrast and visual weight stay intact. Skill media may be hue-shifted at render time so cyan artwork aligns with the red accent without editing source assets. Keep #00ff9d only for success/online/copied states.

Typography

Inter owns product copy and titles. Space Mono owns terminal labels, filters, metadata, status text, and code-like UI. Letter spacing stays non-negative.

Layout

Keep the existing split: full-height centered hero, then sticky terminal header and bento grid. Cards, modals, and preview panes keep their current dimensions and responsive behavior.

Elevation & Depth

Depth comes from dark surfaces, thin borders, subtle hover lift, and red glow. Do not add extra shadows, glass panels, or decorative gradients beyond the existing preview content.

Shapes

Small controls use 4-8px radii. Bento cards use 12px. Do not round marketplace cards further.

Components

Active filters, category badges, ratings, modal tabs, loading text, terminal cursors, and hover borders use the red accent token. Status dots and copied states remain green.

Motion

The hero may use one subtle cursor-following ASCII accent. Keep it low opacity, behind content, and off narrow mobile viewports. Respect prefers-reduced-motion; do not add competing hero animations.

Do's and Don'ts

Do preserve the existing composition and spacing. Do swap accent color through tokens when touching app chrome. Do not introduce blue/cyan as a highlight accent. Do not redesign the hero, grid, card anatomy, modal structure, or typography scale for this color update.