招牌配方
Roundel mark
The bar-and-circle Underground logotype: a red ring crossed by a blue bar carrying a label.
.roundel {
--ring: #E32017;
--bar: #003688;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border: 14px solid var(--ring);
border-radius: 9999px;
}
.roundel::after {
content: attr(data-label);
position: absolute;
left: -14px;
right: -14px;
padding: 6px 0;
background: var(--bar);
color: #fff;
font-family: 'Railway', 'Johnston', 'Nunito Sans', sans-serif;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
}
Orthogonal-diagonal line rule
Connectors and dividers that obey Beck's 0/45/90 law, drawn as coloured strokes with mitred joints.
.tube-line {
height: 8px;
border-radius: 9999px;
background: linear-gradient(90deg, #003688 0 50%, #E32017 50% 100%);
}
.tube-line--diag {
width: 160px;
transform: rotate(-45deg);
transform-origin: left center;
}
.tube-corner { /* the only permitted turn: a 45° elbow */
width: 48px;
height: 48px;
border-bottom: 8px solid #00782A;
border-right: 8px solid #00782A;
border-bottom-right-radius: 12px;
}
Interchange marker (blob & tick)
The white-filled blob for an interchange, the small tick for a single-line stop.
.station-blob {
width: 18px;
height: 18px;
background: #FFFFFF;
border: 3px solid #1C1C1C;
border-radius: 9999px;
}
.station-tick {
width: 3px;
height: 14px;
background: #1C1C1C;
}