How to build a UI in the Railway style

:root {
  /* Railway style — extracted from railway.com by taste-skill */
  --canvas: #13111C;
  --surface: #1B2132;
  --text: #FFFFFF;
  --text-muted: #9593A8;
  --accent: #8B5CF6;
  --border: rgba(255, 255, 255, 0.1);
  --font-heading: 'IBM Plex Serif', Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 54px;
  --h1-tracking: -0.036em;
  --h1-weight: 500;
  --radius-button: 8px;
  --radius-common: 8px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset;
  --ease: cubic-bezier(0.4, 0, 1, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Railway style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#13111C",
        surface: "#1B2132",
        ink: "#FFFFFF",
        muted: "#9593A8",
        accent: "#8B5CF6",
        line: "rgba(255, 255, 255, 0.1)",
      },
      fontFamily: {
        heading: ["IBM Plex Serif", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["IBM Plex Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["54px", { letterSpacing: "-0.036em", fontWeight: "500" }] },
      borderRadius: { button: "8px", card: "8px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 1, 1)" },
    },
  },
};

---
name: railway-style
description: Build UI in the Railway visual style (Deep Cosmic Violet Infrastructure & IBM Plex Serif Editorial). Use when the user asks for a Railway-like look.
---

# Railway Style — Quick Rules (source: railway.com, extracted by taste-skill)

## Tokens
- canvasBg: #13111C — Primary Railway page canvas
- surfaceElevated: #1B2132 — Primary elevated card & bento surface
- surfaceSecondary: #553F83 — Secondary interactive container / hover fill
- borderPrimary: rgba(255, 255, 255, 0.1) — Primary structural divider (1px rgba(255,255,255,0.1))
- borderSecondary: #33323E — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: #9593A8 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #8B5CF6 — Primary interactive CTA & brand highlight (8px)
- accentSecondary: #553F83 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: IBM Plex Serif; body: Inter; mono: IBM Plex Mono
- Hero H1: 54px | line-height 60.5px (leading-[1.12]) | letter-spacing -1.96px (tracking-[-0.036em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font IBM Plex Serif
- Section H2 (Primary): 40px | line-height 48px (leading-[1.2]) | letter-spacing -0.8px (tracking-[-0.02em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font IBM Plex Serif
- Card / Feature H3: Subheading with crisp line-height
- Body Copy (Paragraph): 20px | line-height 28px (leading-[1.4]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color rgba(255, 255, 255, 0.8) (text-white/[0.8]) | font Inter

## Components
- Primary button: height 32px, padding 0px 0px, radius 8px, bg #291839, text #F7F7F8, 16px / 400
- Card: bg #1B2132, border 1px solid rgba(255, 255, 255, 0.1)

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Railway’s exact #13111C canvas and #1B2132 surface pairing.
- NEVER replace IBM Plex Serif display typography or ignore its signature scale (54px / -0.036em (w500)).
- NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.1) (1px rgba(255,255,255,0.1)).
- NEVER deviate from the signature button geometry (8px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with IBM Plex Mono.

Full 120-line spec: https://taste-skill.pages.dev/taste/railway/

npx taste-skill add railway