# Headers and the rail are 56px, with a square top-left corner

> Headers are 56px high and the icons-only rail is 56px wide plus a 1px seam, so the top-left corner stays a 56px square.

Source: https://raft-design.botiverse.build/decisions/0005-56px-headers-and-rail. Generated from the current release; where it differs from what you remember, this page is right.

## Context

The product's brutal theme had 62px headers and a 64px rail, including a 2px border. Review found the rail too wide. The product's owner pinned a rule in code that the top-left cell, which holds the workspace, is always square, whatever else changes; a UI test (`leftrail-square-slot`) enforces it. The product's Elegant theme already used 56px for both.

## Decision

The rail is 56px wide plus a 1px `line-seam`, and every header (rail, sidebar, panel, drawer, phone top bar row) is 56px high, so the top-left corner is a 56px square and the seams under the headers line up.

## Consequences

Narrowing the rail means every header shrinks with it. The labeled rail needs 68px to fit names such as Computers, which makes its top-left corner 68×56 and breaks the square-corner test. Choosing it means changing that test, or making every header 68px high; see [Open questions](https://raft-design.botiverse.build/decisions/open-questions.md).

## Related

- [Spacing](https://raft-design.botiverse.build/foundations/spacing.md#heights)
- [AppRail](https://raft-design.botiverse.build/components/app-rail.md)