skills.rest
canyouseeus
canyouseeusCOMMUNITY
Explore all skills by this author →
GitHub

noir-design

Enforce Noir aesthetic standards on UI components during creation and reviews.

Updated Nov 9, 2025
Search Tags:#typography#design#ui#consistency#aesthetics#color-palette#noir
One-click install
npx skills add https://github.com/canyouseeus/thelostandunfounds --skill noir-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: noir-design
Source: https://github.com/canyouseeus/thelostandunfounds/tree/main/.agent/skills/noir-design
Command: npx skills add https://github.com/canyouseeus/thelostandunfounds --skill noir-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces a cohesive Noir aesthetic across THE LOST+UNFOUNDS UI, ensuring visual consistency and reducing design drift as teams iterate on components.

Core Features & Use Cases

  • Color & Palette: Enforce monochrome scheme with pure black backgrounds and white text.
  • Geometry & Borders: Remove rounded corners; use thin white borders.
  • Typography & Layout: Uppercase headers; left-aligned body text; glassy overlays with defined borders.
  • Use Case: During component creation, design reviews, and UI audits to maintain a signature Noir look.

Quick Start

Apply Noir design rules to a new or existing UI component to align visuals with the Noir aesthetic.

Frequently Asked Questions about noir-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce a monochrome UI color palette with pure black backgrounds and white text?▼

To enforce a monochrome UI color palette with pure black backgrounds and white text, apply Noir aesthetic standards during component creation to constrain color choices and ensure visual consistency.

What are the typography and geometry rules for a Noir UI design?▼

Noir UI design requires uppercase headers, left-aligned body text, glassy overlays with defined borders, and thin white borders with no rounded corners to maintain a signature aesthetic.

Can I use Noir design rules during a UI audit to fix visual inconsistency?▼

Yes, you can use Noir design rules during UI audits and design reviews to identify and correct visual drift by imposing typography, border geometry, and interactive state constraints.

Does removing rounded corners affect interactive states in Noir UI components?▼

Removing rounded corners does not prevent interactive states; the Noir spec imposes both thin white border geometry and specific interactive state rules to ensure consistent component behavior.

Related Skills

Explore More Design & Creative Skills→
lucasloutayflucasloutayf

minimalist-ui

Define a warm monochrome editorial UI design protocol with strict typography.

Community
Advanced
terzigoluterzigolu
37

warp-ui-guidelines

Guide UI teams to follow Warp design guidelines for visual consistency.

Community
Intermediate
elsolalelsolal
1

minimalist-ui

Define editorial UI design protocols with typography, color, and component specs.

Community
Advanced
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced