uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
← All design systems
Dark Bold Kinetic Accessible

# Redline

A high-energy near-black system with a crimson edge.

Download system Open full preview
Live preview
Concept

Redline runs hot. A crimson accent cuts across a true near-black field, type stays tight and confident, and motion is quick. Made for gaming, launches, and any interface that should feel kinetic without losing its footing.

Palette / 14 tokens
Canvas`#080808` Page and app background 1.0:1
Surface`#101010` Cards, panels, and form fields 1.05:1
Elevated`#1b1b1b` Modals, popovers, and the highest tier 1.16:1
Border`#2b2b2b` Hairline dividers and outlines 1.41:1
Ink`#f2f2f2` Headlines and primary foreground 17.89:1
Body`#b5b5b5` Paragraph and reading text 9.77:1
Muted`#797979` Secondary text, captions, and hints 4.6:1
Primary`#dd3e59` Primary action, focus, and accent 4.68:1
Primary Active`#ce2441` Pressed and active state of the accent 3.77:1
On Primary`#0a0a0c` Text and icons on the accent 1.01:1
Success`#5ede9e` Success, positive metrics, and confirmation 11.84:1
Warning`#deb85e` Warning and caution 10.61:1
Danger`#de6f5e` Error, destructive, and critical signal 6.24:1
Info`#5e9ade` Information and neutral data 6.82:1
Typography
Display headlines and UI labels / Inter
Ag 1234

The quick brown fox jumps over the lazy dog.

Metrics, code, and tabular data / JetBrains Mono
Ag 1234

The quick brown fox jumps over the lazy dog.

Accessibility / WCAG AA by construction
ink on canvas 17.89:1 AA
body on canvas 9.77:1 AA
muted on canvas 4.6:1 AA
primary on canvas 4.68:1 AA
on primary on primary 4.62:1 AA
body on surface 9.28:1 AA
Files
DESIGN.md tokens.css metadata.json preview.html Download all (zip)

    ---
    version: 1
    name: redline
    description: "A high-energy near-black system with a crimson edge."
    theme: dark
    colors:
      canvas: "#080808"
      surface: "#101010"
      elevated: "#1b1b1b"
      border: "#2b2b2b"
      ink: "#f2f2f2"
      body: "#b5b5b5"
      muted: "#797979"
      primary: "#dd3e59"
      primary-active: "#ce2441"
      on-primary: "#0a0a0c"
      success: "#5ede9e"
      warning: "#deb85e"
      danger: "#de6f5e"
      info: "#5e9ade"
    typography:
      display-xl:
        fontFamily: "Inter"
        fontSize: 64px
        fontWeight: 600
        lineHeight: 1.05
        letterSpacing: -1.5px
      display-lg:
        fontFamily: "Inter"
        fontSize: 48px
        fontWeight: 600
        lineHeight: 1.1
        letterSpacing: -1px
      display-md:
        fontFamily: "Inter"
        fontSize: 34px
        fontWeight: 600
        lineHeight: 1.15
        letterSpacing: -0.5px
      body:
        fontFamily: "Inter"
        fontSize: 16px
        fontWeight: 400
        lineHeight: 1.6
        letterSpacing: 0px
      body-sm:
        fontFamily: "Inter"
        fontSize: 14px
        fontWeight: 400
        lineHeight: 1.55
        letterSpacing: 0px
      button:
        fontFamily: "Inter"
        fontSize: 15px
        fontWeight: 600
        lineHeight: 1
        letterSpacing: 0.1px
      caption:
        fontFamily: "Inter"
        fontSize: 12px
        fontWeight: 400
        lineHeight: 1.4
        letterSpacing: 0.2px
      code:
        fontFamily: "JetBrains Mono"
        fontSize: 13px
        fontWeight: 400
        lineHeight: 1.5
        letterSpacing: 0px
    spacing:
      xxs: 4px
      xs: 8px
      sm: 12px
      md: 16px
      lg: 24px
      xl: 32px
      xxl: 48px
    rounded:
      sm: 6px
      md: 10px
      lg: 16px
      pill: 9999px
    components:
      button-primary:
        backgroundColor: "{colors.primary}"
        textColor: "{colors.on-primary}"
        rounded: "{rounded.md}"
        padding: 10px 18px
      button-secondary:
        backgroundColor: "{colors.surface}"
        textColor: "{colors.ink}"
        border: "1px solid {colors.border}"
        rounded: "{rounded.md}"
      input:
        backgroundColor: "{colors.canvas}"
        textColor: "{colors.ink}"
        border: "1px solid {colors.border}"
        rounded: "{rounded.md}"
      card:
        backgroundColor: "{colors.surface}"
        textColor: "{colors.body}"
        border: "1px solid {colors.border}"
        rounded: "{rounded.lg}"
    ---

    # Redline

    Redline runs hot. A crimson accent cuts across a true near-black field, type stays tight and confident, and motion is quick. Made for gaming, launches, and any interface that should feel kinetic without losing its footing.

    ## Accessibility

    Every text pair meets WCAG AA, enforced at synthesis time:

    - Ink on canvas: 17.89:1
    - Body on canvas: 9.77:1
    - Muted on canvas: 4.6:1
    - Text on primary: 4.62:1

    ## How to use

    Drop this folder into your project and point your coding agent (Claude Code, Cursor, Codex) at `DESIGN.md`. Load `css/tokens.css` for the variables, open `preview.html` to see the system applied. Generated by ux-skill: deterministic, offline, never calls an LLM.

How to use

Download the folder and point your coding agent (Claude Code, Cursor, Codex) at `DESIGN.md`. Load `css/tokens.css` for the variables and open `preview.html` to see it applied. Generated by the ux-skill engine: deterministic, offline, never calls an LLM. Free under MIT.