high-contrast-skeuomorphic-clean

v2026.09.24

Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.

GitHub
安装命令
npx skhub add mengto/high-contrast-skeuomorphic-clean
Markdown
SKILL.md

High Contrast Skeuomorphic Clean Skill

Use When

  • Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.

Workflow

Scope

  • Apply this as a full design-system direction across page shell, hero, cards, controls, supporting modules, and micro-visualizations.
  • Use it when the interface should feel tactile, premium, and industrial-clean, with real surface depth and contrast rather than flat minimal cards.
  • This is not playful neumorphism and not glossy consumer skeuomorphism. The result should stay sharp, modern, and system-like.

Visual target

  • Build the experience around a strong contrast relationship: a light or neutral outer page framing a deep black or charcoal primary application shell.
  • Use dark premium surfaces with subtle vertical or radial gradients so panels feel molded and dimensional instead of flat.
  • Add true skeuomorphic depth through inset highlights, soft inner shadows, reflective edge cues, and nested object-like modules, but keep everything clean and controlled.
  • Let one restrained signal accent color derived from the design or brand drive status lights, active markers, tiny progress details, and focal emphasis.
  • Pair clean sans-serif typography with occasional mono labels or utility text so the system feels precise, not ornamental.

Implementation guidance

  • Prefer one dominant rounded or softly chamfered master container that holds the whole interface inside a darker, premium shell.
  • Build cards and modules with one-pixel wrappers, top-edge highlights, dark-to-darker fills, inset shadow stacks, and soft outer shadow falloff to create tactile hierarchy.
  • Keep contrast high: white or near-white text on black shells, muted gray support copy, and clear separation between interactive and passive surfaces.
  • Use skeuomorphic objects selectively inside the system, such as browser-like windows, search fields, progress bars, orbit widgets, document tiles, or instrument modules that feel physically assembled.
  • Buttons, inputs, and chips should look touchable: layered fill, subtle bevel or inset edge, clean rounded geometry, and measured hover brightness rather than loud glow.
  • Add fine structural framing with quiet border lines, corner markers, or interior guide rails so the tactile surfaces still sit inside a disciplined layout.
  • Motion should support the material feel: masked reveals, gentle object lift, slow orbiting details, subtle shimmer on highlights, and calm particle drift are appropriate.

Recommended patterns

  • Large dark industrial shell placed on a lighter background with generous radius and premium shadow weight.
  • Rounded cards wrapped in thin white-to-transparent gradient borders with dark inner fills and soft inset lighting.
  • Micro visual modules such as orbit diagrams, search plates, document chrome, or status widgets built as tactile objects rather than flat illustrations.
  • Accent signal dots, progress slivers, or active labels using the chosen brand accent sparingly against a mostly monochrome system.
  • Split compositions where one side carries bold editorial copy and the other side stacks molded product or system modules.
  • Canvas or particle background texture inside the main shell kept faint so it adds atmosphere without weakening the clean surface hierarchy.

Tuning knobs

  • Contrast level: keep the shell dark enough and the text bright enough that the system reads immediately, even when gradients and shadows are subtle.
  • Skeuomorphic depth: increase or reduce bevel, inset shadow, and highlight intensity depending on how tactile versus minimal the system should feel.
  • Accent intensity: let the brand signal color punctuate the composition, but avoid turning the interface into a neon palette.
  • Surface softness: tune radii and shadow blur so components feel premium and manufactured, not puffy or toy-like.
  • Structural framing: add or reduce guide lines, separators, and outer rails depending on how technical the presentation should become.

Avoid

  • Soft washed-out neumorphism with weak contrast and mushy edges.
  • Overly glossy retro skeuomorphism packed with fake materials, leather, or chrome gimmicks.
  • Flat monochrome dark UI that ignores the tactile layered-surface character.
  • Too many accent colors or bright glows that break the clean industrial mood.
  • Overcrowding every module with depth effects until the hierarchy becomes noisy.
发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

2026年9月24日

分类

未分类

许可证

MIT

源路径

agent-skills/web-design/high-contrast-skeuomorphic-clean

默认分支

main

最新提交

a965851

Tree SHA

51ae735