# Railtown Design System

> High-contrast monochrome utility anchored by deep obsidian surfaces and electric blue functional accents.

**Source:** https://railtown.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Railtown utilizes a strict monochrome foundation of absolute black (#000000) and pure white (#ffffff), punctuated by a single high-voltage accent color, Signal Blue (#4967ef). The system favors sharp geometry (0px radii) for structural containers, while reserving soft corners (10px) and pill-like buttons for interactive elements. Typography is dominated by Helvetica in a range of weights from 400 to 700, creating a utilitarian, developer-centric aesthetic. Layouts use generous vertical spacing and thin 1px borders to define content boundaries without heavy elevation.

## Signature DNA
1. **The Signal Blue Accent** (#4967ef) is used exclusively for functional indicators, text links, and thin component borders, providing a sharp contrast against the #000000 and #ffffff base.
2. **Sharp/Soft Hybrid Geometry** uses 0px radius for section-level containers and footer blocks, but switches to 10px or 3px for interactive cards and buttons to signal clickability.
3. **Obsidian Footer Block** (#232529) creates a heavy visual anchor at the page base, utilizing white Helvetica text for high-legibility navigation.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | `#000000` | Primary text, primary button background | 67 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page canvas, button text, secondary text | 29 | 1.0 | `--wp--preset--color--white` |
| `{color.obsidian}` | `#0c0c0c` | Alternative button background | 4 | 0.6 | Computed Style |
| `{color.deep-surface}` | `#232529` | Footer background | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.signal-blue}` | `#4967ef` | Text links, card borders, active states | 21 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Helvetica | 400, 600, 700 | Heading, Body, UI | Inter | System |
| SegoeUI | 500 | Navigation, Buttons | Open Sans | System |
| Poppins | 300 | Secondary UI labels | Poppins | SIL Open Font |
| Creato Display | 400 | Captions | Montserrat | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 50px | 50px | normal | 400 | Hero display | `a.elementor-icon` |
| `{text.h2}` | 18px | 18px | normal | 600 | Section headings | `h2.elementor-heading-title` |
| `{text.body-lg}` | 16px | 24px | normal | 600 | Feature titles | `p.elementor-icon-box-title` |
| `{text.body}` | 16px | 24px | normal | 400 | Standard prose | `header.elementor` |
| `{text.nav}` | 16px | 20px | normal | 500 | Top navigation | `a.elementor-item` |
| `{text.button}` | 16px | 16px | normal | 500 | CTA labels | `a.elementor-button` |
| `{text.body-sm}` | 14px | 21px | normal | 700 | Bold labels | `p` |
| `{text.caption}` | 12px | 18px | normal | 400 | Legal/Footer | `p:nth-of-type(1)` |

### Principles
1. **Heading weight is restrained.** Primary display headings use weight 400; emphasis is achieved through size (50px) rather than heavy weights.
2. **Navigation uses SegoeUI.** Interactive menu items are distinguished from content by a font-family shift to SegoeUI at weight 500.
3. **High contrast ratios.** Text is almost exclusively #000000 on #ffffff or #ffffff on #232529, ensuring 21:1 or 12:1 contrast.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 10px | 4 |
| `{space.md}` | 14px | 14 |
| `{space.lg}` | 15px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Main sections, footer | 105 occurrences |
| `{radius.button}` | 3px | Primary CTA buttons | `Rounded Button` component |
| `{radius.card}` | 10px | Interactive feature cards | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.accent}` | `rgb(73, 103, 239) 0px 0px 3px 0px` | Active/Hovered cards | Component: Card |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary action (Learn More, Contact Us)
**Pages observed:** https://railtown.ai
**Spec:** Background `#0c0c0c` / Text `#ffffff` / Border `none` / Radius `3px` / Padding `8px 9px` / Typography `16px 500`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (Outlined)
**Role:** Highlighting product capabilities
**Pages observed:** https://railtown.ai
**Spec:** Background `transparent` / Text `#000000` / Border `1px #4967ef` / Radius `10px` / Padding `10px` / Shadow `#4967ef 0px 0px 3px 0px`
**States observed:** Default: Captured

#### Product Card (Dark)
**Role:** Sub-brand product grouping
**Pages observed:** https://railtown.ai
**Spec:** Background `#232529` / Text `#4967ef` / Border `none` / Radius `10%` / Padding `0px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max content width | ~1140px |
| Section padding | 80px - 100px (vertical) |
| Grid columns | 3-column (feature grid) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |

## Imagery & decoration
Railtown uses technical, blue-tinted iconography and line-art illustrations of trains and conductors to reinforce the "Rail" metaphor. Visuals are strictly monochromatic or blue-scale.

## Do's
- Use `#4967ef` for all interactive text links and primary card borders.
- Apply `0px` border-radius to large layout sections to maintain a structural, architectural feel.
- Use Helvetica weight 400 for large display text (50px).
- Ensure all buttons have at least a `3px` radius to distinguish them from static containers.
- Maintain a white background (`#ffffff`) for all primary content areas.

## Don'ts
- **Wrong:** Using `#4967ef` as a button background. **Right:** Use `#000000` or `#0c0c0c`. **Reason:** Railtown uses blue as an accent/indicator, not a primary fill.
- **Wrong:** Mixing `#4967ef` with other saturated colors like vivid red or green. **Right:** Stick to the monochrome + blue palette.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use a 1px border or a subtle blue glow shadow.
- Do not use Poppins for primary body copy; it is reserved for secondary UI labels.
- Do not use bold weights (700) for display headings; keep them at 400.

## Similar brands
- Sentry (developer utility focus)
- Vercel (monochrome + sharp geometry)
- Linear (high-contrast technical UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-signal-blue: #4967ef;
  --color-deep-surface: #232529;
  --font-main: "Helvetica", sans-serif;
  --radius-card: 10px;
  --radius-button: 3px;
}
```

## Agent prompt examples
- "Create a feature card with a 1px border in #4967ef, a 10px border radius, and a subtle 3px blue glow shadow."
- "Generate a primary button using #0c0c0c background, white Helvetica 16px text, and a 3px border radius."
- "Design a footer section with a #232529 background and 14px Helvetica bold text in white."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed styles.
- Form input field styles (focus states) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://railtown.ai | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://railtown.ai | Mobile 390px | 2026-06-06 |