---
id: light-technical-rail-057
title: Limestone Rail
description: A pale stone-grey enterprise system built on hairline cells, dashed page rails, tight grotesk display type and wide-tracked monospace eyebrows.
tags: [light, minimal, professional, enterprise, saas, monospace, monochrome, forms, developer]
colors: ["#F4F4F3", "#FAFAF9", "#1C1B1A", "#8C6F63", "#E2E1DE"]
created: 2026-09-18
---

# Limestone Rail

A pale stone-grey system for enterprise infrastructure and platform marketing, where every section sits inside a hairline-ruled cell framed by dashed vertical rails. Tight grotesk headlines, spaced monospace eyebrows, near-black square buttons and one muted taupe accent give it the feel of an engineering drawing rather than a brochure.

## Color Palette

**Page Surface:** `#F4F4F3` — the body background everywhere. A barely warm grey, never pure white.

**Primary Colors:**
- Ink — `#1C1B1A` — headlines, body text, primary button fill, icon strokes, focus ring
- Announcement Band — `#1F1E1C` — the full-width top notice bar and the floating cookie toast
- Taupe Accent — `#8C6F63` — quote glyphs, the active segment of carousel progress rails, the starburst mark. Never used for text blocks or buttons

**Neutral Colors:**
- Panel — `#FAFAF9` — inputs, feature cards, quote cards, list rows; one step lighter than the page
- Media Well — `#FFFFFF` — hero and feature illustration wells only
- Rail Tint — `#ECECEA` — hatched divider bands, icon tile fills, pressed states
- Text Secondary — `#5E5C59` — supporting paragraphs, attribution lines
- Text Muted — `#706D69` — dates, mono eyebrows, footer group labels (4.7:1 on the page; the minimum for 11px mono)
- Placeholder — `#8E8B87` — input placeholder text only; too light (3.1:1) for any label that must be read
- Hairline — `#E2E1DE` — every cell border, row divider, and input border at rest
- Border Strong — `#CFCDC9` — hovered input borders, icon-button outlines
- Rail Dash — `#B9B6B1` — the dashed vertical page rails and the hatch pattern dots

**Accent/State Colors:**
- Success — `#3E7A55` — confirmation text and a 6px status dot
- Warning — `#A8742A` — inline notices
- Error — `#B3443A` — field error text and a 1px error border on the input
- Focus — `#1C1B1A` — 2px solid outline, 2px offset, on every focusable element

**Inverse Block:**
- Band background `#1F1E1C`, text `#F4F4F3`, secondary `#A9A6A1`, pill button border `#F4F4F3` at 1px

## Typography

**Font Families:**
- **Display & Headings:** tight neo-grotesk sans. Google Fonts equivalent: `Inter Tight`. Fallback: `"Inter Tight", "Helvetica Neue", Arial, sans-serif`
- **Body:** the same family at regular weight
- **Eyebrows, labels and utility text:** monospace. Google Fonts equivalent: `IBM Plex Mono`. Fallback: `"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace`

**Type Scale:**
- Display — `clamp(40px, 8vw, 76px)` / 500 / 1.0 / -0.035em
- H2 Section — `clamp(26px, 4.4vw, 40px)` / 500 / 1.1 / -0.025em
- H3 Card Title — 20px / 500 / 1.25 / -0.015em
- Quote — `clamp(22px, 3.4vw, 30px)` / 500 / 1.2 / -0.02em
- Body — 16px / 400 / 1.5 / -0.005em
- Small — 14px / 400 / 1.45 / 0
- Eyebrow — 11px mono / 500 / 1 / 0.22em / uppercase
- Button — 14px / 500 / 1 / -0.005em

**Hierarchy Rules:**
- Weight never exceeds 500. Hierarchy is carried by size and negative tracking, not bold
- Every section heading is preceded by a mono eyebrow in Text Muted, left-aligned, 16px above the heading
- Headlines break into two or three deliberate lines and are always left-aligned; the only centered text is the tabbed section label and footer copy
- Attribution pairs a name in Ink 14px over a role in Text Secondary 14px, joined by a middle dot for the organization
- Monospace is for labels only. Never set a paragraph or a headline in mono

## Spacing System

**Base Unit:** 4px

**Scale:** 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96

**Common Patterns:**
- Page gutter inside the rails: 20px mobile, 32px tablet, 48px desktop
- Dashed rails sit 6px inside the viewport on mobile and at the edge of a 1200px frame on desktop
- Section rhythm: 64px top / 48px bottom on mobile, 96px / 64px desktop
- Cell padding: 20px mobile, 32px desktop
- Label to input: 8px. Field to field: 20px
- Eyebrow to heading: 16px. Heading to paragraph: 16px

## Component Styles

### Buttons
- **Primary:** fill Ink `#1C1B1A`, text `#FFFFFF`, radius 2px, padding 12px 18px, height 40px (48px in forms, full width). Hover: background `#3A3835`. Active: `#000000`. Transition 150ms ease
- **Text link with arrow:** Ink 14px/500, trailing → glyph that translates 3px right on hover. No underline at rest, underline on focus-visible
- **Icon square:** 32px square, fill Panel, 1px Hairline border, radius 2px, arrow or chevron icon at 14px. Hover: border Border Strong, fill `#FFFFFF`. Used in list-row corners and carousel controls
- **Inverse pill:** used only on the dark band; transparent fill, 1px `#F4F4F3` border, radius 999px, 32px tall
- Never use outlined secondary buttons with color; the system has one filled button

### Section Cells
- Every section is a rectangle bounded by 1px Hairline top and bottom borders that run rail to rail
- Grids (logo walls, footer columns) split cells with 1px Hairline internal borders; no gaps, no radii, no shadows
- Illustration wells are `#FFFFFF` rectangles that fill the cell edge to edge with a small icon square pinned to the bottom-right corner

### Eyebrow & Tabbed Label
- Eyebrow: mono 11px uppercase, tracking 0.22em, Text Muted, preceded by nothing, no icon
- Tabbed label: a centered heading sits in a box with Hairline left, right and top borders and no bottom border, so it reads as a tab attached to the content below

### Feature Card with Progress Rail
- Panel fill, Hairline border, 40px icon tile (Rail Tint fill, 1px Hairline, radius 2px) above an H3 and a Small paragraph
- Below the card a 2px progress rail: track Hairline, active segment Taupe Accent, followed by a control row of two icon squares flanking four 4px dots (active dot Ink, others Border Strong)

### Quote Card
- Panel fill, 1px Hairline border, radius 0
- A 32px square holding a taupe “ glyph, set in the display face at 40px, sits flush in the top-left corner overlapping the card border
- Quote in Quote size, then 20px gap, then name/role attribution; optional 48px square grayscale portrait bottom-right
- Case-study variant adds a bottom row separated by Hairline: organization wordmark left, “Read case study →” right

### Input Fields
- Fill Panel `#FAFAF9`, 1px Hairline border, radius 2px, height 48px, padding 0 14px, text 15px Ink, placeholder Placeholder `#8E8B87`
- Label above in 14px/500 Ink, never floating, never inside the field
- Hover: border Border Strong. Focus: border Ink plus 2px Ink outline at 2px offset
- Select: same box with a 14px chevron at 14px from the right edge
- Inline capture: an email input with the primary button nested inside at the right, 4px inset

### List Rows & Accordion
- News rows: date in Small Text Muted, title in 16px/500 Ink, a 32px arrow icon square pinned to the bottom-right corner; rows divided by Hairline
- FAQ rows: 15px/500 question, chevron right, 20px vertical padding, Hairline dividers; expanded answer in Small Text Secondary with 12px top gap, chevron rotates 180° over 200ms

### Hatch Divider
- A 12px band of Rail Dash dots on a 3px grid (`radial-gradient` 0.6px dots) spanning rail to rail, marking the change between major section groups

### Announcement Band & Footer
- Top band: Announcement Band fill, 13px/500 centered text in `#F4F4F3`, 40px tall, trailing → at the right
- Footer: Page Surface, mark plus wordmark top-left, two-column link groups with mono eyebrows for group labels, 14px links in Ink, a full-width mono utility cell, and compliance badges in Small Text Secondary separated by Hairline

## Layout Principles

- One centered frame, max-width 1200px, with dashed 1px Rail Dash borders on both sides running the full page height
- Mobile is a single column; tablet and desktop split feature sections into a 5/7 text-and-media grid and logo walls into 4 columns
- Content aligns hard left inside the gutter; nothing floats free of a cell
- Sections stack without gaps: the bottom Hairline of one cell is the top of the next
- Maximum text measure 560px for paragraphs, 760px for headlines

## Visual Effects

- Radii: 2px on buttons, inputs, icon tiles; 0 on cells and cards; 999px only on the inverse pill
- Shadows: none. Elevation is a one-step background change (Page → Panel → White)
- Borders: 1px solid Hairline for structure, 1px dashed Rail Dash for the page rails, never thicker
- Texture: only the dotted hatch divider; no gradients, no blur, no glass
- Motion: 150ms ease for color, 200ms ease for rotation and arrow nudges; carousel progress fills linearly

## Design Tone

Quietly technical and procedural: an infrastructure product presented like a ruled engineering sheet, where credibility comes from alignment and restraint rather than color. It reads as calm, controlled and enterprise-ready, with the dashed rails and mono labels hinting at blueprints and config files.

## Usage Notes for AI Implementation

1. Keep the page ground `#F4F4F3`. Swapping it to pure white removes the Page → Panel → White elevation ladder and the system goes flat and generic.
2. Never add drop shadows or rounded cards. Lift a surface by stepping its background one tone lighter and giving it a Hairline border.
3. Draw the dashed rails on the frame, not on sections. If each section draws its own rails, dashes misalign at every boundary and the blueprint effect breaks.
4. Every section heading gets a mono eyebrow. Headings without one read as a different system.
5. Cap font weight at 500. Setting headlines at 600–700 turns the tight grotesk into a startup template.
6. Use the taupe accent in at most two small places per screen: quote glyphs and the active progress segment. As a button or link color it cheapens the palette immediately.
7. Only one filled button style exists. Secondary actions are text links with an arrow or icon squares; do not invent a grey or outlined button.
8. Cells share borders. Adjacent grid cells must collapse to a single 1px line; doubled 2px seams are the most common implementation error.
9. Use `clamp()` for display and quote sizes so 76px headlines survive a 393px viewport without a media query, and give grid children `min-width: 0`.
10. Keep monospace to labels, eyebrows and utility cells. Mono body copy turns the page into a terminal theme, which this is not.