Design System

Every token below was measured off the live DOM at 1440px on four pages rather than read out of the stylesheet. On this source the two rankings disagree twelve times, and the render wins every one of them.

Colour

paper#f5f3ee
paper-warm#f1eee6
surface#ffffff
ink#3d3d3d
accent#7b96b0
accent-strong#5b7997
accent-deep#3f4c5b
accent-mid#516071
blush#d3c1c3
utility-bar#303a43

Ink on the bone ground measures 9.80:1. White on the extracted accent measures 3.07:1, which is below AA, so every accent surface that carries text uses accent-strong at 4.54:1 and the extracted tone is kept for borders, dots and rules. Twelve declared colours paint nothing and are not carried, including one at 234 declarations and a complete teal set from a sister brand's skin.

Type

Display · Nunito Sans 700 · 50px at 1440 · sentence case

Home Organization Systems Designed for the Way You Live

Section head · Nunito Sans 600 · 40px at 1440

Taking Home Organization to the Next Level

Sub head · Nunito Sans 400 · 36px at 1440

A Tailored, Customized Closet

Overlay label · Nunito Sans 200 · 34px · the lightest weight in the system

Custom Closets Designed with You in Mind

Card head · Nunito Sans 700 · 18px

Closet Organization

Lede · Nunito Sans 550 · 20px

Please allow at least an hour for our personalized consultation process.

Body · Nunito Sans 300 · 16px · 27px leading

Our expert design team helps you select high-quality cabinet finishes and hardware to bring your home storage design together brilliantly.

Fine · Nunito Sans 400 · 11px

*Virtual consultations are not available at all locations.

Buttons

Extracted: 48px tall, a 3px solid border in the fill colour, radius zero, uppercase 700 at 1.1px tracking, and a transition of all properties over 150ms linear. Hover empties the fill to the bone ground and inverts the label. The hover label uses accent-strong rather than the source's extracted tone, which measures 2.77:1 against the ground.

Signature anchors

The notched hairline card

A white card with a 1px ink rule and an 8 by 16 shadow, pulled 40px up over the hero, carrying an 80 by 50 slate triangle welded to its top edge. Both halves are the source's; the shape only reads correctly when the card overlaps something.

80 by 50 triangle at top: -17px, centred.

Circular photography

The only curve in a system whose radius census is otherwise zero. It appears on the four-up intro grid and on portraits, and nowhere else.

The blush band

#d3c1c3 paints 329,614 square pixels on every page: the newsletter row, the franchise pill and a form hairline. It is the second colour of the system and it is warm, not blue, which is what keeps the palette from reading corporate.

The 200-weight overlay

Photographic tiles carry a display line at the lightest weight the variable axis allows, over a 700-weight uppercase sub-label. The 500-point gap between the two lines is the whole hierarchy: there is no colour change and no rule.

Pantry

Combine Beauty and Function

Assets

logo-ttc-stacked-charcoal.svg logo-ttc-stacked-light.svg logo-ttc-horizontal.svg 11 source photographs
The Tailored Closet horizontal mark
The Tailored Closet stacked mark, light

Only the charcoal mark ships on the source. The light variant is derived here for the slate brand-switcher rail, which is the one dark ground a logo has to sit on.