High-Contrast Lime & Charcoal — Dark-First Design System & Template

Overview

This design system is built on a high-contrast, dark-mode-first aesthetic. It pairs a deep, warm charcoal background with stark white text and a single, vivid lime accent. The result is a bold, modern, and unapologetically digital feel—like a developer tool or a technical framework. The visual language is defined by its crisp geometry, strong typographic hierarchy, and a signature accent color that is used sparingly but decisively for calls to action and focus states.

Colors

The color palette is built on a foundation of warm, dark neutrals with a single, high-energy accent. This creates a stark, high-contrast interface that feels both technical and vibrant.

• background / dark-900: The deepest layer, a warm charcoal that serves as the base for the entire interface.
• background-2 / dark-800: A slightly lighter charcoal used for elevated surfaces like cards and panels, creating subtle depth.
• text / light-100: Pure white is used for primary text, ensuring maximum readability against the dark background.
• text-2 / docs-muted: A semi-transparent white is used for secondary text, labels, and muted metadata, providing a clear visual hierarchy.
• border / docs-hairline: A low-opacity white hairline used for subtle dividers and outlines, defining structure without adding visual noise.
• accent / brand-500: A vivid, electric lime green. This is the signature color, used for primary buttons, active states, and key highlights to draw immediate attention.
• accent-contrast / brand-text: The deep charcoal used as text on top of the lime accent, ensuring legibility and a strong, graphic contrast.
• docs-variable: A soft, muted purple used to highlight code variables and special tokens in documentation.
• docs-success / docs-danger / docs-caution: Restrained semantic colors for inline callouts and status indicators.

Typography

Typography is the backbone of this system. It is set in the Inter typeface, a clean and highly legible geometric sans-serif. The type scale is fluid, using clamp() to scale smoothly from mobile to desktop. Headings are set with tight letter-spacing and a medium weight, giving them a strong, confident presence. Body text is light and airy with a generous line-height for comfortable reading.

• display / h1: The largest type, used for hero headlines. It is bold, tight, and designed to make an immediate impact.
• h2 / h3: Section and subsection headings that maintain the same tight tracking and medium weight, creating a clear and consistent hierarchy.
• body: The primary reading size, set with a comfortable line-height for long-form content.
• body-small: Used for UI labels, captions, and secondary information, providing a compact but readable alternative.
• mono: A monospace font is used for code blocks, terminal commands, and keyboard shortcuts, reinforcing the technical nature of the system.

Layout

The layout is built on a flexible, container-based system. A central content column is used for readability, with a maximum width that keeps line lengths comfortable. The system uses a fluid spacing scale based on clamp(), ensuring that padding and margins scale proportionally with the viewport. Sections are given generous vertical padding to create a sense of space and allow content to breathe. The layout is primarily a single-column experience, with a persistent header and a multi-column footer for navigation.

Elevation & Depth

Depth is communicated through subtle layering and shadows. The background uses a three-tier system of dark charcoals to create a sense of foreground and background. Cards and panels use a soft, dark shadow (0 12px 32px lab(0% none none / .45)) to lift them off the page. The sticky header uses a backdrop blur to create a frosted glass effect, allowing content to scroll underneath while maintaining legibility.

Shapes

The shape language is soft but precise. The primary border radius is a subtle 0.5rem (8px), used for buttons, cards, and inputs. Smaller elements like search triggers and tabs use a smaller 0.375rem (6px) radius. The theme toggle is a fully rounded pill. Borders are always thin, 1px hairlines, in a low-opacity white or charcoal, depending on the surface. This creates a clean, modern, and slightly technical aesthetic.

Components

Buttons

Buttons are a key part of the visual identity. The primary button is a solid block of the vivid lime accent with dark text, making it impossible to miss. The secondary button is a ghost button with a subtle border and white text, which fills with white on hover. Both use a 0.5rem corner radius and a smooth color transition.

Header

The sticky header is a critical component. It features a translucent, blurred background that keeps navigation accessible without obscuring content. It contains the logo, primary navigation links, a search trigger, a theme toggle, and a GitHub link. The theme toggle is a pill-shaped switch that animates between light and dark modes.

Code Blocks

Code blocks are a central part of the documentation experience. They feature a dark, slightly desaturated background with a subtle border. The code itself is displayed in a monospace font with syntax highlighting. A "Copy" button appears in the top-right corner, providing a clear and convenient action.

Cards

Cards are used to group related content, such as the navigational tiles on the homepage. They have a slightly lighter charcoal background, a soft shadow, and a 1px hairline border. On hover, the background lightens, providing a clear interactive affordance.

Search Trigger

The search trigger is designed to be a prominent but unobtrusive part of the UI. It is a rounded rectangle with a subtle border, containing a search icon, the word "Search," and a keyboard shortcut hint (Ctrl+K). It uses a muted text color that brightens on hover.

Do's and Don'ts

Do

• Use the vivid lime accent sparingly for primary actions, active states, and key highlights.
• Maintain a high contrast ratio between text and background for readability.
• Use the fluid spacing scale to ensure consistent rhythm across all screen sizes.
• Apply the 0.5rem border radius to all primary UI elements for a cohesive shape language.
• Use the Inter font family for all text, reserving the monospace font for code and technical labels.
• Leverage the dark charcoal background tiers to create subtle depth and hierarchy.

Don't

• Don't introduce new, saturated colors outside of the defined accent and semantic palettes.
• Don't use large or dramatic shadows; depth should be subtle and purposeful.
• Don't use border radii larger than 1rem on standard surfaces.
• Don't use pure black (#000) for backgrounds or text; always use the defined charcoal and white tokens.
• Don't use the accent color for large background areas; it is meant for focal points.
• Don't use multiple font families; stick to Inter and the mono variant.