MIDSKILLS

Overview

MIDSKILLS is a developer-first marketplace for privacy-preserving Midnight Network skills, designed for AI coding agents (Cursor, Claude Code, Codex) and blockchain developers. The aesthetic is **Minimalist Monochrome with Accent Clarity**: a clean, high-contrast white canvas (#ffffff) anchored by deep charcoal text (#0a0a0a) and punctuated by a single, decisive blue accent (#2563eb) that guides interaction and hierarchy. The brand personality is technical yet approachable—precise, no-nonsense, and built for builders who value clarity over decoration. The UI evokes a sense of professional efficiency: every pixel serves a function, every color choice is intentional, and the interface recedes to let the content (skills, contracts, code) take center stage.

The voice is direct and instructional. Sentences are short, active, and jargon-aware without being gatekeeping. Example: "Install this skill in Cursor. It runs locally. Your data stays yours." The tone avoids hype; instead, it emphasizes control, privacy, and technical depth. Typography pairs a serif headline system (Georgia, 800 weight) for authority with a clean sans-serif body (Montserrat, 400 weight) for readability. The result is a design system that feels both trustworthy and contemporary—suitable for a platform bridging Web3 infrastructure and everyday developer tools.

Colors

The color system is built on **high-contrast minimalism** with a single accent. **Primary (#0a0a0a)** is the deep charcoal used for all body text, UI frames, and interactive states; it provides the visual anchor and ensures accessibility (WCAG AAA contrast on white backgrounds). **On-Primary (#ffffff)** is pure white, reserved for text and icons on dark backgrounds (buttons, modals, dark cards). **Secondary (#2563eb)** is a vibrant, saturated blue—the brand's signature accent—applied exclusively to CTAs, focus states, links, and status indicators. It appears sparingly but decisively, drawing the eye to the most important actions ("Install Skill," "View Repository"). **Tertiary (#6c757d)** is a neutral gray used for secondary text, disabled states, and metadata (timestamps, helper text). Th

Typography

The type system uses a **serif-sans pairing** to balance authority with legibility. **Display and Headline levels** (Georgia, 700–800 weight, -0.04em to -0.01em letter-spacing) establish visual hierarchy and brand voice—serif conveys precision and technical credibility. **Body and Label levels** (Montserrat, 400–600 weight) handle all interface text, ensuring consistent readability at 16px base size and 24px line-height. The serif headlines are reserved for hero sections, section titles, and key messaging; body copy and UI labels use sans-serif exclusively. On small labels over busy backgrounds (e.g., badges, tags), apply `text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)` to ensure legibility. Font weights are strictly enforced: 400 for body, 500 for secondary labels, 600 for primary labels and b

Layout

The layout is **fixed-width, grid-based, and spacious**. Container max-width is 1280px, centered on the viewport with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). The grid uses 12 columns for flexibility; most content blocks span 8–10 columns, leaving breathing room on the sides. **Spacing philosophy**: use the semantic scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to create rhythm. Section separation uses **lg spacing (40px)** for major breaks (hero to features, features to footer); card-to-card gaps use **md spacing (24px)**; internal padding within cards uses **md (24px)** for consistency. White space is generous—never crowd elements. The page rhythm should feel like a well-typeset book: plenty of air, clear visual resting points, and a lo

Elevation & Depth

Depth is conveyed through **subtle shadows and layering**, not color gradients. The elevation system has three levels: **Level 1 (Base)**: flat surfaces with a 1px border in Outline (#cccccc), no shadow. **Level 2 (Cards/Inputs)**: 0 4px 12px rgba(0,0,0,0.1), used for cards, input fields, and standard containers. **Level 3 (Modals/Popovers)**: 0 16px 40px rgba(0,0,0,0.12), used for modals, dropdowns, and floating panels. Focus states add a 3px inset shadow in the secondary color (0 0 0 3px rgba(37, 99, 235, 0.1)) to indicate interactivity without changing the element's size. Hover transitions

Shapes

The shape philosophy is **Functional Precision with Soft Edges**. Buttons and CTAs use **full radius (9999px)** to signal interactivity and create a friendly, approachable feel—the rounded pill shape is instantly recognizable as clickable. Cards and containers use **lg radius (1rem / 16px)** for a modern, slightly softened appearance that avoids harsh corners. Input fields use **DEFAULT radius (0.5rem / 8px)** for a neutral, professional look. Modals and overlays use **xl radius (1.5rem / 24px)** to emphasize elevation and create a distinct visual layer. This graduated scale ensures visual coh

Components

Action Elements

**Button Primary** (`button-primary`): Deep charcoal background (#0a0a0a), white text, full radius (9999px), 44px height, 12px vertical / 32px horizontal padding. Typography: Montserrat 600, 14px. On hover, transition to `button-primary-hover` (background shifts to #171717, text remains white) over 200ms ease. Focus state adds a 3px inset shadow in secondary blue (0 0 0 3px rgba(37, 99, 235, 0.1)). Used for primary CTAs: "Install Skill," "View Repository," "Connect Wallet."

**Button Secondary**: Transparent background, charcoal text, 1px border in Outline (#cccccc), lg radius (1rem), 44px height, 12px vertical / 24px horizontal padding. On hover, background shifts to Surface-Container-High (#e9ecef) over 200ms ease. Used for secondary actions and navigation links.

##

Do's and Don'ts

**Do**

• Do use the secondary blue (#2563eb) exclusively for interactive elements and CTAs—it is the visual signal for "clickable" and must not be diluted by overuse.
• Do maintain 24px gutters and 40px section spacing to create breathing room; white space is a design feature, not wasted real estate.
• Do pair serif headlines (Georgia 700–800) with sans-serif body (Montserrat 400) to establish a clear visual hierarchy and reinforce the technical-yet-approachable brand voice.
• Do use the full-radius pill shape (9999px) exclusively for buttons; it is the primary affordance for interactivity and must remain distinctive.
• Do apply the md shadow (0 4px 12px rgba(0,0,0,0.1)) to cards and containers; it provides subtle depth without visual noise.

**Don't**

• Don't introduce new accent colors or gradients; the system is intentionally monochromatic with a single blue accent—adding a second color breaks the visual hierarchy.
• Don't use rounded corners on input fields beyond DEFAULT (0.5rem); over-rounding inputs signals playfulness, which conflicts with the technical brand voice.
• Don't apply shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) to standard cards; excessive shadow depth makes the interface feel cluttered and reduces contrast.
• Don't mix serif and sans-serif at the same hierarchy level; serif is reserved for headlines, sans-serif for body and UI labels—mixing them creates visual confusion.
• Don't reduce the contrast between text and background below WCAG AAA standards (7:1 for normal text); the minimalist aesthetic relies on high contrast for legibility and accessibility.