Neon Bracket Technical Dark — High-Contrast Technical Dark Design System & Template

Overview

This design system presents a dark, high-contrast technical interface built for a developer-facing product. It pairs a variable-width grotesque family with a variable-width monospace family to create a precise, engineering-oriented voice. The mood is confident, sober, and slightly cybernetic: near-black backgrounds, near-white text, and a single saturated cyan accent that carries interaction and emphasis. Visual structure is reinforced through a signature corner-bracket border motif and generous, mathematically consistent spacing, giving pages a measured, editorial rhythm.

Colors

The palette is anchored by a very dark desaturated indigo-charcoal background and layered text tones that step down in opacity-derived lightness for hierarchy.

• background: The base canvas, a very dark indigo-charcoal that defines the entire dark mode surface.
• background-blur: A translucent variant of the background used behind sticky headers and floating controls, paired with a 12px backdrop blur.
• surface-1: A slightly elevated translucent surface used for overlays such as cookie banners and floating panels.
• text-primary: Near-white used for headings and primary body copy, ensuring maximum legibility on dark backgrounds.
• text-secondary: A softened off-white for supporting text, subtitles, and secondary prose.
• text-tertiary: A muted gray-violet for dates, labels, captions, and metadata.
• accent: A saturated cyan-blue used for interactive emphasis, active states, and key iconography.
• accent-bg / accent-bg-hover / accent-bg-active / accent-bg-pattern / accent-bg-surface: Translucent cyan layers used for primary button fills, hover and active states, decorative patterns, and low-emphasis surface tints.
• secondary: A warm coral-orange used as the secondary semantic accent in charts and security iconography.
• tertiary: A magenta-pink used as the tertiary semantic accent in charts and decorative surfaces.
• border: A semi-transparent gray used for input borders, corner brackets, and structural lines.
• border-subtle: An even fainter gray used for form field backgrounds and low-emphasis dividers.
• kermit-green / coral / pumpkin-orange / blue-universal: Additional accent hues used sparingly in illustrations, checkboxes, and data visualization.

The system also supports a light theme via inverted values, but the primary expression is dark.

Typography

Typography is the strongest carrier of the design's identity. Two variable-font families are used: a grotesque sans for prose and headings, and a monospace for technical labels, values, and code-like content. Variable width and weight axes are actively used to differentiate roles.

• h1: The largest headline, set in a wide, heavy grotesque at 3.75rem with 1.1 leading. Used for hero statements.
• h2: Section headings at 2.8125rem, wide and semi-heavy, used to open major content blocks.
• h3: Compact sub-headings at 1.5625rem for card titles and testimonial headlines.
• h4: A lighter-weight heading variant at the same size, used for subtitles and author names.
• body-sans-m: Primary prose at 1.09375rem with generous 2.125 line-height, used for paragraphs and descriptions.
• body-sans-s: Smaller sans for UI labels, captions, tags, and metadata.
• body-mono-l: Large monospace for prices and numeric callouts.
• body-mono-m: Medium monospace for counters and tabular text.
• body-mono-s: Small monospace for input values, dimension readouts, and URL fields.
• ui-sans / ui-sans-bold: Interface-scale sans for buttons and navigation.
• ui-mono: Interface-scale monospace for editable technical text.

Headings use condensed-to-wide variable widths and weights in the 800–860 range on desktop, relaxing to narrower widths and slightly lighter weights on mobile. The monospace family is used with deliberate width and weight variation (e.g., 112.5% width, 300 weight for large body; 87.5% width, 400 weight for small labels).

Layout

The layout is centered, grid-driven, and generous with whitespace.

• Page width: Content is capped at 1440px and centered with horizontal padding.
• Layout padding: 40px on desktop, 16px on mobile.
• Section padding: 96px vertical rhythm on desktop, reduced to 36px on mobile.
• Section gap: 48px between major blocks on desktop, 36px on mobile.
• Paragraph gap: 24px on desktop, 12px on mobile.
• Content inner padding: 100px for hero-level content, stepping down to 50px and 12px at smaller breakpoints.
• Grid patterns: Multi-column grids are used for feature tables, pricing layouts, and testimonial grids, collapsing to single-column stacks on mobile.
• Flex patterns: Rows are used for header actions, card rows, and testimonial controls, switching to columns on narrow viewports.
• Alignment: Content is left-aligned by default; hero and CTA sections center their primary message.
• Responsive behavior: Breakpoints at 1200px, 1024px, 768px, and 600px drive reductions in padding, logo size, nav density, and column counts.

Elevation & Depth

Depth is expressed through translucency, blur, and layered borders rather than heavy shadows.

• Backdrop blur: A 12px backdrop blur is applied to sticky headers, floating controls, and tab panels, using a background-blur color that matches the page background at 85% opacity.
• Surface hierarchy: The base background is the darkest layer. Translucent surface tints (accent-bg-surface, surface-1) sit above it. Content cards are generally flat with border or corner-bracket treatments instead of shadows.
• Borders: A 2px corner-bracket border is the signature depth cue, creating a frame around interactive elements and panels. A 1px translucent gray border is used for plain structural divisions.
• Layering: Pattern backgrounds, decorative SVGs, and gradient overlays are placed behind content and clipped to avoid bleed.
• No heavy drop shadows: Elevation is communicated through border, blur, and tonal contrast rather than traditional box-shadow stacks.

Shapes

The shape language is predominantly rectangular with small, precise radii, contrasted by a distinctive corner-bracket detail.

• Border radius scale: 3.5px, 4px, 5px, 6px, 7px, 8px, and 14px are used for different UI surfaces. 5px is the default for buttons and navigation; 4px is used for inputs, checkboxes, and small controls; 14px is used for floating control panels; 6–8px for badge and pricing elements.
• Corner brackets: A custom border-corners treatment draws only the corners of a rectangle using a 2px border, with a configurable corner width (12–16px) and radius (4–8px). This motif appears on buttons, inputs, links, cards, and panels.
• Pills: 9999px radius is used for the small plus indicator in comparison tables and for circular markers.
• Borders: 2px is the standard border thickness for the corner-bracket motif. 1px is used for subtle dividers. 4px is used for slider thumbs and resizer handles.
• Buttons: Primary and secondary buttons are rectangular with 5px radius. Promo buttons use an 8px radius. The Get Pro button uses a 6px radius with a corner-bracket border.

Components

Navigation

A sticky top header with a translucent blurred background. Contains a left-aligned logo, a centered/left-aligned main menu of text links, and a right-aligned actions group with a theme toggle and a Get Pro button. Links use the corner-bracket hover treatment and transition color to the cyan accent. On tablet and mobile, the menu collapses into a hidden mobile container with animated reveal.

Buttons

Three primary button variants:

• Primary: Filled with translucent cyan, cyan text, 5px radius, 56px height. On hover, the fill deepens; on active, it lightens. Disabled state uses a universal gray fill and gray text.
• Secondary: Filled with a translucent gray, primary text color, 5px radius, 56px height. Used for tertiary actions like "Get started".
• Get Pro / Promo: Transparent background with a 2px corner-bracket border in the cyan accent, uppercase letterspaced text, 6–8px radius, 48–56px height. The Get Pro variant uses a smaller 48px height.

All buttons use ui-sans-bold typography and are inline-flex centered.

Links

Text links use a custom underline treatment: a 0.23em bottom border in a translucent cyan that deepens on hover and lightens on active. Color transitions to cyan. Focus-visible adds a 2px cyan outline with 4px offset.

Cards

Blog post cards are horizontal rows with a 174px cover thumbnail (6px radius) and a text block containing an h3 title, a tertiary-colored date, and a tag pill. Hovering the card reveals a corner-bracket overlay around the entire card and shifts the title to the cyan accent. On mobile, cards stack vertically.

Inputs

Text inputs are wrapped in a corner-bracket container. The inner input is transparent with 16px padding and monospace text. The corner-bracket starts as a translucent gray, turns solid gray on hover, and turns cyan with a translucent cyan background when the input is focused. Placeholder text uses the translucent gray.

Checkboxes

Custom checkboxes are 24px squares with 4px radius and a translucent gray fill. When checked, a cyan checkmark appears and the fill shifts to the accent hover color. Focus-visible adds a 2px cyan outline. Disabled state dims both fill and icon.

Badges

Small inline badges use a 2px cyan border, cyan text, 8px radius, and 4px/8px padding. Used for promotional callouts like "2 months free".

Tabs

Vertical tabs in floating control panels use a 116×104px rectangle with 5px radius, translucent blurred background, and an icon plus label. Active and hover states switch the icon colors to the cyan accent and use a translucent cyan pattern background. On mobile, tabs become a horizontal scrollable row with smaller dimensions.

Sliders

Slider controls consist of a label row with a monospace value readout and a horizontal track. The track is a translucent gray rounded rectangle containing a 16×32px thumb with 3px radius. The thumb turns cyan on hover or focus.

Tables

Feature comparison tables use a CSS grid with labeled OSS and Pro columns. Value cells are padded rounded rectangles; OSS values use a translucent gray background, Pro values use a translucent cyan background with cyan text. A circular "+" indicator separates the columns on wide screens.

Selects

Custom select triggers present a label, a value, and a chevron icon inside a 36px minimum-height rounded rectangle with translucent gray background. Hover and focus shift the background to the accent hover tone.

Testimonials

A testimonial section uses a grid with a large decorative quote-mark SVG on the left, a stacked set of quote slides in the center, and a control row with a counter, a spacer bar, and previous/next buttons. Quote items fade between each other. Author blocks are fixed-width columns on desktop and full-width on smaller screens.

Blog List

A vertical list of blog cards with a fixed-width heading column on desktop and a flexible card column. Cards include cover image, title, date, and tag pill, with hover state transitioning the title to the cyan accent and revealing a corner-bracket frame.

Footer / Contacts

A multi-column grid containing logo, contact info, newsletter subscribe, and community links. The footer uses the translucent cyan surface as its background. Link lists are stacked with 12px gaps and hover to the cyan accent.

Do's and Don'ts

Do

• Use the dark indigo-charcoal background as the default canvas and reserve light mode as a secondary inversion.
• Reserve the cyan accent for interactive states, active emphasis, and key iconography; do not use it as a large flat background.
• Use the corner-bracket border motif on interactive and framed surfaces to reinforce the technical identity.
• Pair Martian Grotesk for prose and headings with Martian Mono VF for labels, values, and URL-like content.
• Maintain the 96px desktop section rhythm and 36px mobile rhythm to preserve pacing.
• Use variable font axes (weight and width) to differentiate hierarchy before reaching for new sizes.
• Apply backdrop blur with the translucent background color for any sticky or floating UI.
• Keep corner radii small (4–8px) for controls and rectangular surfaces; reserve 14px for floating panels.

Don't

• Do not introduce heavy drop shadows; depth should come from borders, blur, and translucency.
• Do not use the coral, magenta, or green accents for primary interaction; they are reserved for data visualization and illustrations.
• Do not mix the monospace family into long-form prose; keep it for technical and numeric contexts.
• Do not apply the corner-bracket treatment to every surface; reserve it for interactive and framed elements.
• Do not replace the variable-width grotesque with a generic system sans; the width axis is part of the identity.
• Do not collapse spacing scales ad hoc; use the defined 4/8/12/16/24/36/40/48/96px steps.
• Do not use solid opaque accent fills for large areas; prefer the translucent accent-bg tones.
• Do not omit focus-visible outlines; the 2px cyan outline with 4px offset is part of the interaction language.