← Gallery

extracted · 34 artefacts

railway.app

Live extraction of https://railway.app — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Download brand book PDFOpen in browser ↗Agent promptAll 34 files
18colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 34 artefacts for railway.app and renders 12+ sections below.

See full comparison ↗
4,309 charsbrand book ↗
---
site: "Railway | The all-in-one intelligent cloud provider"
url: "https://railway.app"
generated_at: "2026-06-25T08:29:38.256Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: shadcn/ui
tokens:
  colors:
    primary: "#59497a"
    secondary: "#291839"
    accent: "#1f132a"
    background: "#13111c"
    foreground: "#ffffff"
  typography:
    sans: Inter
    mono: JetBrains Mono
    base: 14
  spacing:
    base: 2
    scale: "[4, 60, 80, 96, 128, 159, 235, 262]"
  radii:
    sm: 4
    md: 8
    lg: 16
    full: 9999
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset"
    xs: "rgb(204, 204, 204) 0px 0px 2px 2px"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **material-you** material (0.45).

Component library appears to be **shadcn/ui** (0.65).

> "Ship software peacefully"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `nav → hero → testimonials → content → content → testimonial → testimonials → testimonial → pricing-table → nav → footer`.

Source: <https://railway.app>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#59497a` | 4 |
| secondary | `#291839` | 1 |
| accent | `#1f132a` | 1 |
| background | `#13111c` | — |
| foreground | `#ffffff` | — |

**Neutrals:** `#33323e` · `#f7f7f8` · `#545260` · `#a1a0ab` · `#609f89`

**Total unique colors detected:** 23.

# Typography

**Families**
- `Inter` · 4769 uses
- `JetBrains Mono` · 186 uses
- `Helvetica` · 38 uses
- `IBM Plex Serif` · 7 uses

**Body size:** `14px` / line-height `20px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `54px` | `500` | `60.48px` |
| h2 | `36px` | `400` | `48px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `4px` · `60px` · `80px` · `96px` · `128px` · `159px` · `235px` · `262px`

**Layout primitives:** 9 grid containers · 101 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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`
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(62, 45, 45, 0.24) 0px 100px 191px 0px, rgba(62, 45, 45, 0.165) 0px 36.5016px 69.7181px 0px, rgba(62, 45, 45, 0.133) 0px 17.7209px 33.8469px 0px, rgba(62, 45, 45, 0.106) 0px 8.6871px 16.5924px 0px, rgba(62, 45, 45, 0.075) 0px 3.43489px 6.56065px 0px`
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset`
- `xs` — `rgb(204, 204, 204) 0px 0px 2px 2px`
- `xl` — `rgba(65, 78, 166, 0.1) 0px -12px 127px 0px, rgba(65, 78, 166, 0.07) 0px -4.38px 46.357px 0px, rgba(65, 78, 166, 0.06) 0px -2.127px 22.506px 0px, rgba(65, 78, 166, 0.04) 0px -1.042px 11.033px 0px, rgba(65, 78, 166, 0.03) 0px -0.412px 4.362px 0px`

**Z-index layers:** 9 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `50px`
- `full` — `9999px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `modals` · `tabs` · `progressBars`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | outline | md, lg, sm | 18 |

# Do's and Don'ts

**Do's**
- Use `close`, `manage`, `accept` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 232 !important rules — prefer specificity over overrides.
- Don't 88% of css is unused — consider purging.
- Don't 3694 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://railway.app>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

Inter
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Agent prompt

One self-contained system prompt with every railway.app token, anatomy slot and voice rule. Drop it into any AI agent and it builds in this brand without hallucinating.

paste into Claude · GPT · Cursor · Windsurf · v0
# You are building UI in the railway.app design system.

Source: https://railway.app
Extracted by designlang on 2026-06-25.

## Brand at a glance

- title         Railway | The all-in-one intelligent cloud provider
- page intent   landing
- material      material-you
- design grade  B

## Colour

- primary     #59497a
- secondary   #291839
- accent      #1f132a
- neutrals    #33323e · #f7f7f8 · #545260 · #a1a0ab · #609f89 · #878593

## Typography

- families   Inter · JetBrains Mono · Helvetica · IBM Plex Serif
- weights    400 · 500 · 600 · 700 · 800
- base size  16px

## Spacing

- scale      4px · 60px · 80px · 96px · 128px · 159px · 235px · 262px

## Radii

- scale      4px · 8px · 16px · 50px · 9999px

## Motion

- durations  50ms · 100ms · 200ms · 400ms

## Voice

- tone       neutral
- pronoun    you-only
- headings   Sentence case
- CTA verbs  close · manage · accept · reject · product · developers

## Component anatomy

- button     variants: [object Object] · [object Object]  ·  slots: true · true · false

## Accessibility

- WCAG score 100% · failing pairs: 0

## Build rules

1. Use the colours above. **Never invent a new hex.** If you need a
   shade between two existing colours, derive it via HSL adjustment
   from the closest extracted colour and call out the derivation.
2. Use the extracted typography families. If you need a missing weight,
   pick the nearest available weight from the list and note it.
3. Snap spacing values to the scale above. No off-scale paddings or
   margins.
4. Snap border radii to the scale above.
5. Match the voice: same tone, same pronoun stance, same heading
   style. Reuse the listed CTA verbs.
6. Aim for WCAG AA contrast minimum. When the brand colours fail,
   prefer the foreground colour on the background colour rather than
   mid-tone neutrals.
7. Reuse component anatomy when it exists — do not invent novel
   structures for things the site already has.

## Available context files

designlang wrote these alongside this prompt. Reach for them when
you need ground truth:

- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens
- `<host>-tailwind.config.js`  — Tailwind v3 config
- `<host>-tailwind-v4.css`     — Tailwind v4 `@theme` block
- `<host>-tokens.d.ts`         — TypeScript literal-union types
- `<host>-variables.css`       — bare CSS custom properties
- `<host>-reset.css`           — brand-aware base styles
- `<host>-gradients.css`       — `.grad-N` utility classes
- `<host>-anatomy.tsx`         — typed React component scaffolds
- `<host>-shadcn-theme.css`    — shadcn/ui theme
- `<host>-theme.js`            — React / Vue / Svelte theme object
- `<host>-mcp.json`            — MCP server payload (load via stdio)
- `<host>.brand.pdf`           — print-ready 13-chapter brand book

When you reference the system in code, prefer importing from these
files over hard-coding values.

## Output expectations

When asked to "build a pricing page" or "make a card" or any UI:

- Produce a single self-contained component file in the appropriate
  framework (React / Vue / Svelte — match what the user is using).
- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind
  is available; otherwise use the CSS custom properties from
  `variables.css`.
- Write the headline copy using the brand voice; do not invent
  generic Lorem.
- Annotate any choice where you had to bend the system, with a
  one-line `// note:` comment explaining what and why.

## One-line install

```bash
npx designlang railway.app
```

Run this against any other URL to extract its system in the same
shape as the one above.

---

Generated by designlang. Re-extract by running `npx designlang railway.app`.
Drop this in any AI agent. It will build UI in the railway.app brand without hallucinating colours, fonts or component shapes.

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://railway.app
{
  "colors": {
    "all": [
      {
        "hex": "#33323e",
        "rgb": {
          "r": 51,
          "g": 50,
          "b": 62,
          "a": 1
        },
        "hsl": {
          "h": 245,
          "s": 11,
          "l": 22
        },
        "count": 5004,
        "contexts": [
          "border",
          "background"
        ]
      },
      {
        "hex": "#f7f7f8",
        "rgb": {
          "r": 247,
          "g": 247,
          "b": 248,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 7,
          "l": 97
        },
        "count": 4888,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#545260",
        "rgb": {
          "r": 84,
          "g": 82,
          "b": 96,
          "a": 1
        },
        "hsl": {
          "h": 249,
          "s": 8,
          "l": 35
        },
        "count": 47,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#13111c",
        "rgb": {
          "r": 19,
          "g": 17,
          "b": 28,
          "a": 1
        },
        "hsl": {
          "h": 251,
          "s": 24,
          "l": 9
        },
        "count": 35,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#a1a0ab",
        "rgb": {
          "r": 161,
          "g": 160,
          "b": 171,
          "a": 1
        },
        "hsl": {
          "h": 245,
          "s": 6,
          "l": 65
        },
        "count": 12,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#609f89",
        "rgb": {
          "r": 96,
          "g": 159,
          "b": 137,
          "a": 1
        },
        "hsl": {
          "h": 159,
          "s": 25,
          "l": 50
        },
        "count": 12,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#c67839",
        "rgb": {
          "r": 198,
          "g": 120,
          "b": 57,
          "a": 1
        },
        "hsl": {
          "h": 27,
          "s": 55,
          "l": 50
        },
        "count": 12,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#878593",
        "rgb": {
          "r": 135,
          "g": 133,
          "b": 147,
          "a": 1
        },
        "hsl": {
          "h": 249,
          "s": 6,
          "l": 55
        },
        "count": 9,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#a667e4",
        "rgb": {
          "r": 166,
          "g": 103,
          "b": 228,
          "a": 1
        },
        "hsl": {
          "h": 270,
          "s": 70,
          "l": 65
        },
        "count": 6,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#dcdce0",
        "rgb": {
          "r": 220,
          "g": 220,
          "b": 224,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 6,
          "l": 87
        },
        "count": 5,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#3d2259",
        "rgb": {
          "r": 61,
          "g": 34,
          "b": 89,
          "a": 1
        },
        "hsl": {
          "h": 269,
          "s": 45,
          "l": 24
        },
        "count": 5,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#59497a",
        "rgb": {
          "r": 89,
          "g": 73,
          "b": 122,
          "a": 1
        },
        "hsl": {
          "h": 260,
          "s": 25,
          "l": 38
        },
        "count": 4,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#853bce",
        "rgb": {
          "r": 133,
          "g": 59,
          "b": 206,
          "a": 1
        },
        "hsl": {
          "h": 270,
          "s": 60,
          "l": 52
        },
        "count": 3,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#42946e",
        "rgb": {
          "r": 66,
          "g": 148,
          "b": 110,
          "a": 1
        },
        "hsl": {
          "h": 152,
          "s": 38,
          "l": 42
        },
        "count": 3,
        "contexts": [
          "background",
          "text"
        ]
      },
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 0.45
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 2,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#1b2132",
        "rgb": {
          "r": 27,
          "g": 33,
          "b": 50,
          "a": 1
        },
        "hsl": {
          "h": 224,
          "s": 30,
          "l": 15
        },
        "count": 2,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#180d43",
        "rgb": {
          "r": 24,
          "g": 13,
          "b": 67,
          "a": 1
        },
        "hsl": {
          "h": 252,
          "s": 68,
          "l": 16
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#1f132a",
        "rgb": {
          "r": 31,
          "g": 19,
          "b": 42,
          "a": 1
        },
        "hsl": {
          "h": 271,
          "s": 38,
          "l": 12
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#291839",
        "rgb": {
          "r": 41,
          "g": 24,
          "b": 57,
          "a": 1
        },
        "hsl": {
          "h": 271,
          "s": 41,
          "l": 16
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#bf93ec",
        "rgb": {
          "r": 191,
          "g": 147,
          "b": 236,
          "a": 1
        },
        "hsl": {
          "h": 270,
          "s": 70,
          "l": 75
        },
        "count": 1,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#9c7016",
        "rgb": {
          "r": 156,
          "g": 112,
          "b": 22,
          "a": 0.2
        },
        "hsl": {
          "h": 40,
          "s": 75,
          "l": 35
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#eab38a",
        "rgb": {
          "r": 234,
          "g": 179,
          "b": 138,
          "a": 1
        },
        "hsl": {
          "h": 26,
          "s": 70,
          "l": 73
        },
        "count": 1,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#ed852f",
        "rgb": {
          "r": 237,
          "g": 133,
          "b": 47,
          "a": 0.12
        },
        "hsl": {
          "h": 27,
          "s": 84,
          "l": 56
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      }
    ]
  },
  "regions": [
    {
      "role": "nav",
      "tag": "nav",
      "bounds": {
        "x": 333.828125,
        "y": 72,
        "w": 540.09375,
        "h": 32
      },
      "heading": null,
      "buttonCount": 4,
      "cardCount": 10,
      "className": "relative z-50 flex justify-center"
    },
    {
      "role": "hero",
      "tag": "section",
      "bounds": {
        "x": 0,
        "y": 124,
        "w": 1280,
        "h": 1716
      },
      "heading": "Ship software peacefully",
      "buttonCount": 5,
      "cardCount": 27,
      "className": "px-4 pt-0 pb-4"
    },
    {
      "role": "testimonials",
      "tag": "section",
      "bounds": {
        "x": 16,
        "y": 1840,
        "w": 1248,
        "h": 1711.9375
      },
      "heading": "Deploy anything\nwithout the complexity",
      "buttonCount": 0,
      "cardCount": 7,
      "className": "relative"
    },
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 0,
        "y": 3551.9375,
        "w": 1280,
        "h": 764.625
      },
      "heading": "Instant networking.\nZero setup.",
      "buttonCount": 0,
      "cardCount": 9,
      "className": "-mx-4 relative"
    },
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 0,
        "y": 4316.5625,
        "w": 1280,
        "h": 761.078125
      },
      "heading": "Grow big\nwithout the growing pains",
      "buttonCount": 0,
      "cardCount": 9,
      "className": "-mx-4 relative border-t border-white/15"
    },
    {
      "role": "testimonials",
      "tag": "section",
      "bounds": {
        "x": 16,
        "y": 5077.640625,
        "w": 1248,
        "h": 1740.734375
      },
      "heading": "Logs, metrics, and alerts in one place. Clarity without the chaos.",
      "buttonCount": 0,
      "cardCount": 7,
      "className": "relative"
    },
    {
      "role": "testimonials",
      "tag": "section",
      "bounds": {
        "x": 16,
        "y": 6818.375,
        "w": 1248,
        "h": 1421.15625
      },
      "heading": "Finally, a development workflow that actually flows.",
      "buttonCount": 0,
      "cardCount": 7,
      "className": "relative"
    },
    {
      "role": "pricing",
      "tag": "section",
      "bounds": {
        "x": 0,
        "y": 8239.53125,
        "w": 1280,
        "h": 1390
      },
      "heading": "Trusted by the best in business",
      "buttonCount": 0,
      "cardCount": 15,
      "className": "px-4"
    },
    {
      "role": "pricing",
      "tag": "section",
      "bounds": {
        "x": 0,
        "y": 9629.53125,
        "w": 1280,
        "h": 1688
      },
      "heading": "0+ deploys per month (and counting)",
      "buttonCount": 0,
      "cardCount": 9,
      "className": "pt-24 bg-oatmeal"
    },
    {
      "role": "nav",
      "tag": "header",
      "bounds": {
        "x": 0,
        "y": 9725.53125,
        "w": 1280,
        "h": 88
      },
      "heading": "0+ deploys per month (and counting)",
      "buttonCount": 0,
      "cardCount": 0,
      "className": "text-center mb-12 px-4 flex flex-col items-center"
    },
    {
      "role": "footer",
      "tag": "footer",
      "bounds": {
        "x": 0,
        "y": 11318.53125,
        "w": 1280,
        "h": 801
      },
      "heading": null,
      "buttonCount": 1,
      "cardCount": 5,
      "className": "max-w-7xl mx-auto pt-12 pb-24 px-12 2xl:px-0"
    }
  ],
  "componentClusters": [
    {
      "kind": "button",
      "structuralHash": "button>svg",
      "instanceCount": 2,
      "variants": [
        {
          "css": {
            "background": "rgb(19, 17, 28)",
            "color": "rgb(19, 17, 28)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "50%",
            "border": "2px solid rgb(19, 17, 28)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        },
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(255, 255, 255)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "50%",
            "border": "2px solid rgba(0, 0, 0, 0)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "div>button>button>button",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(255, 255, 255)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "0px",
            "border": "0px solid rgb(51, 50, 62)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button",
      "instanceCount": 5,
      "variants": [
        {
          "css": {
            "background": "rgb(89, 73, 122)",
            "color": "rgb(255, 255, 255)",
            "padding": "8px 12px 8px 12px",
            "borderRadius": "4px",
            "border": "1px solid rgb(51, 50, 62)",
            "fontSize": "16px",
            "fontWeight": "700"
          },
          "instanceCount": 3
        },
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(247, 247, 248)",
            "padding": "0px 12px 0px 12px",
            "borderRadius": "6px",
            "border": "0px solid rgb(51, 50, 62)",
            "fontSize": "14px",
            "fontWeight": "500"
          },
          "instanceCount": 2
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>div",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(255, 255, 255)",
            "padding": "6px 0px 6px 0px",
            "borderRadius": "6px",
            "border": "1px solid rgba(0, 0, 0, 0)",
            "fontSize": "14px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>span>div",
      "instanceCount": 4,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(247, 247, 248)",
            "padding": "6px 12px 6px 12px",
            "borderRadius": "6px",
            "border": "0px solid rgb(51, 50, 62)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 4
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>div>div",
      "instanceCount": 5,
      "variants": [
        {
          "css": {
            "background": "rgb(41, 24, 57)",
            "color": "rgb(247, 247, 248)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "8px",
            "border": "0px solid rgb(51, 50, 62)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        },
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(247, 247, 248)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "8px",
            "border": "0px solid rgb(51, 50, 62)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 4
        }
      ]
    }
  ],
  "accessibility": {
    "remediation": []
  },
  "cssHealth": {
    "sheets": [
      {
        "url": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&display=swap",
        "totalBytes": 2541,
        "usedBytes": 0,
        "unusedBytes": 2541,
        "unusedPercent": 100
      },
      {
        "url": "https://railway.com/assets/globals-Byew77gB.css",
        "totalBytes": 322425,
        "usedBytes": 34443,
        "unusedBytes": 287982,
        "unusedPercent": 89
      },
      {
        "url": "https://railway.com/assets/split-board-C_KX9iBm.css",
        "totalBytes": 3276,
        "usedBytes": 0,
        "unusedBytes": 3276,
        "unusedPercent": 100
      },
      {
        "url": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap",
        "totalBytes": 2335,
        "usedBytes": 0,
        "unusedBytes": 2335,
        "unusedPercent": 100
      },
      {
        "url": "https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap",
        "totalBytes": 2535,
        "usedBytes": 0,
        "unusedBytes": 2535,
        "unusedPercent": 100
      },
      {
        "url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap",
        "totalBytes": 9930,
        "usedBytes": 0,
        "unusedBytes": 9930,
        "unusedPercent": 100
      },
      {
        "url": "https://railway.com/assets/ReactSelect-BMrDa4_Q.css#",
        "totalBytes": 730,
        "usedBytes": 0,
        "unusedBytes": 730,
        "unusedPercent": 100
      },
      {
        "url": "https://railway.com/",
        "totalBytes": 312,
        "usedBytes": 312,
        "unusedBytes": 0,
        "unusedPercent": 0
      },
      {
        "url": "https://railway.com/",
        "totalBytes": 10441,
        "usedBytes": 7036,
        "unusedBytes": 3405,
        "unusedPercent": 33
      },
      {
        "url": "https://railway.com/assets/split-board-C_KX9iBm.css",
        "totalBytes": 3276,
        "usedBytes": 849,
        "unusedBytes": 2427,
        "unusedPercent": 74
      }
    ],
    "totalBytes": 357801,
    "usedBytes": 42640,
    "unusedBytes": 315161,
    "unusedPercent": 88,
    "importantCount": 232,
    "duplicates": 3694,
    "vendorPrefixes": {
      "webkit": 81,
      "moz": 28,
      "ms": 1,
      "o": 6
    },
    "keyframes": [],
    "specificity": {
      "max": [
        1,
        8,
        4
      ],
      "average": [
        0.03,
        1.84,
        0.09
      ],
      "count": 5929
    },
    "issues": [
      "232 !important rules",
      "3694 duplicate declarations",
      "88% unused CSS"
    ]
  }
}

All artefacts

Every file designlang produced for railway.app — 34 in total. Download anything.

Spec3 files
Tokens & emitters7 files
MCP / Agent rules1 file
Other23 files

Run designlang on your own URL.

Same 34-artefact depth as the railway.app extraction above. No signup, no API key.

npx designlang yoursite.comTry it live