Techniques
Ironwork underline input
A text input styled as a bone-plaster inset field with only a bottom border — referencing the hand-forged iron strap hinge.
.input-ironwork {
background: transparent;
border: none;
border-bottom: 2px solid #1A1A1A;
padding: 10px 0;
color: #1A1A1A;
font-family: 'Inter', sans-serif;
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input-ironwork:focus {
outline: none;
border-bottom-color: #3D5A60;
}
Wall-peg rail divider
A horizontal rule that echoes the Shaker wall-peg rail — a thin black line with periodic dot markers suggesting peg positions.
.divider-peg-rail {
border: none;
height: 1px;
background: repeating-linear-gradient(
90deg,
#1A1A1A 0px,
#1A1A1A 48px,
transparent 48px,
transparent 52px
);
position: relative;
}
.divider-peg-rail::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 5px;
background: repeating-linear-gradient(
90deg,
transparent 0px,
transparent 46px,
#1A1A1A 46px,
#1A1A1A 54px,
transparent 54px
);
mask: repeating-linear-gradient(
90deg,
transparent 0px,
transparent 47px,
black 47px,
black 53px,
transparent 53px
);
border-radius: 50%;
}
Oval-box card border
A card with a subtle warm-wood border that references the graduated finger-joint of a Shaker oval box — using a layered border with a slight wood-tone inset.
.card-oval-box {
background: #FFFFFF;
border: 1px solid #A88863;
border-radius: 4px;
padding: 24px;
box-shadow: inset 0 0 0 3px #EDE9DF;
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-oval-box:hover {
box-shadow:
inset 0 0 0 3px #EDE9DF,
0 1px 4px rgba(26, 26, 26, 0.08);
}