Charcoal Cyber-Editorial — Dark-First Cyberpunk Design System & Template

Overview

This design system is a dark, information-dense, and technically-focused aesthetic. It combines a deep charcoal background with high-contrast white text and a singular, vibrant neon-pink accent. The typographic palette is diverse, featuring a distinct pixel font for branding, a clean sans-serif for body content, and a monospace font for metadata and labels. The layout is structured and grid-heavy, suggesting an editorial or data-rich application. The overall feel is modern, precise, and slightly cyberpunk, but with a strong emphasis on clarity and readability.

Colors

The color system is built on a foundation of dark, neutral grays with a single, powerful accent color for interactive and branded elements.

• background & surface: A deep charcoal (#161618) serves as the main page background, with slightly lighter shades like surface (#1d1d20) used for cards, sidebars, and elevated panels.
• primary & secondary: High-contrast white (#ececee) is used for primary text and icons, while a muted gray (#a0a0a8) is used for secondary text, descriptions, and disabled states.
• border: Subtle 1px borders in a dark gray (#303036) are a key part of the layout, separating sections, list items, and grid columns without adding visual weight.
• accent: A bright neon-pink (#ffb1ee) is the sole accent color, used sparingly for branding, interactive states (like focus rings), and highlighting key phrases.
• contrast: A pure white (#ffffff) is used for high-priority buttons and announcement banners, with black (#111111) or a near-black text color for contrast.
• warning & error: Specific colors for semantic feedback are present, such as a warm orange (#f5a623) for warnings and a soft red (#f87171) for errors, often used in badges or text.

Typography

The typography system is a core part of the visual identity, blending three distinct font families to create a functional and aesthetic hierarchy.

• display: The branding and key section titles use a blocky, pixel-like font (GeistPixel-Square) with wide letter-spacing. This choice gives the interface a unique, technical, and slightly retro-futuristic character.
• h1: The main page headings use a clean sans-serif (Geist) at a large size (3rem) with a tight line-height and negative letter-spacing. This creates a bold, impactful statement for hero sections.
• body: All general prose and interface text uses the sans-serif font (Geist) at a comfortable size. The weight is kept at 400-600, ensuring readability against the dark background.
• label: Buttons, links, and small UI elements use a specific label style. This is based on the sans-serif font but with a slightly larger size and medium weight for clear legibility in interactive components.
• mono: A monospace font (Geist Mono) is used for metadata, list indices, column headers in tables, and other small, technical details. This reinforces the system's data-centric feel.

Layout

The layout is highly structured and grid-based, designed to handle a large amount of content in an organized manner.

• Grid: The main content area uses a two-column layout with a fixed-width sidebar (248px) on the left. The main content area then uses various grid patterns (e.g., 2-column, 3-column, or custom fractional columns) to display content blocks and lists.
• Containers & Spacing: The site uses a max-width container (max-w-6xl for content) but allows the main grid to expand on very large screens. Spacing is managed through a consistent scale, with generous vertical padding (py-10, py-14) between sections.
• Headers & Footers: The header is sticky and contains a blurred backdrop, while the footer is a multi-column grid with smaller, less prominent text.
• Density: The layout is moderately dense. Lists of items, such as the catalog, use a compact row structure with small text sizes and tight vertical padding to fit more information on screen.

Elevation & Depth

Depth and elevation are communicated subtly, primarily through background colors and borders rather than shadows.

• Surfaces: Instead of box-shadows, the system uses layered background colors to create a sense of depth. The main background is the darkest tone, with surface and sidebar colors used for elements that sit "on top".
• Borders: Consistent use of 1px borders is the primary method for separating elements. They act as hairline dividers that define the structure without adding visual clutter.
• Backdrop Effects: A strong backdrop blur (blur(12px)) is used on the sticky header, creating a modern "frosted glass" effect over the content that scrolls beneath it.
• Interactive Elevation: On hover, some elements like cards or links may slightly shift or brighten, but there are no dramatic lifting shadows.

Shapes

The design system has a generally angular feel, with small, precise corner radii that soften the sharp edges just enough to feel modern.

• Radii: The most common border radius is small (4px), used for buttons, inputs, and small elements. Larger elements like cards and panels use a medium radius (8px or 10px). Pill shapes (9999px) are reserved for a few specific UI elements like feedback buttons or dots.
• Buttons: Buttons are primarily rectangular with slightly rounded corners (4px or 6px), reinforcing the structured and technical aesthetic.
• Cards & Panels: Cards and other containers use a slightly larger radius (10px), giving them a defined, contained appearance.

Components

The UI is built from several recurring components that follow the established visual language.

Navigation

The primary navigation is a vertical sidebar with a dark background and a distinct right border. Links have a transparent background and a subtle hover state that uses a slightly lighter gray. The active link may have a slightly different background or text color.

Buttons

Buttons come in several variants. The primary button uses the contrast white background with black text, while the secondary button uses a dark muted background with light text and a border. A special "banner" button uses a vibrant orange-yellow color to grab attention. All buttons share the same small border radius and use the label typography style.

Cards

Cards are used to group related content. They have a surface background, a subtle border, and a consistent lg border radius. They are often used to display featured content or as containers for interactive elements.

Table List

A prominent list component is used for the design catalog. It's a grid-based structure where each row functions as a link. The columns have fixed widths, and the row contents are aligned vertically. Hovering over a row changes its background color to a lighter gray. The row includes an icon, title, description, and various metadata points like "Installs" and "Bookmarks", all styled with the mono font.

Do's and Don'ts

Do

• Embrace the dark theme: Use the primary background color for the main canvas and surface colors for elevated panels.
• Use the accent color sparingly: The neon-pink accent should be used for high-impact moments like focus states, key branding, or highlighting a single word.
• Prioritize high contrast: Ensure text has a strong contrast ratio against the dark backgrounds by using the primary and secondary text colors appropriately.
• Maintain a structured layout: Adhere to the grid and use consistent spacing to create a sense of order and precision.
• Utilize the mixed-type system: Use the mono font for data, the sans-serif for content, and the display font for brand identity.

Don't

• Don't introduce large shadows: Avoid using heavy box-shadows for elevation. Rely on background color layering and borders instead.
• Don't overuse the accent color: It should be a highlight, not a primary color. Avoid using it for large backgrounds or as a primary button color.
• Don't use large, soft corner radii: Stick to the defined scale of small-to-medium radii (4px to 10px) to maintain the system's angular feel.
• Don't mix typographic roles: Do not use the display font for body copy or the monospace font for headlines. The specific roles of each font are key to the system's identity.
• Don't ignore the borders: The subtle 1px borders are a fundamental part of the layout structure. Do not remove them without a clear reason.