Techniques
Cream Paper Newsletter Card
The signature Substack content card — a white card on cream background with subtle border, resembling a newsletter laid on a table.
.newsletter-card {
background: #FFFFFF;
border: 1px solid #EBE7DF;
border-radius: 8px;
padding: 24px;
max-width: 720px;
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.newsletter-card:hover {
border-color: #DDD9D0;
}
.newsletter-card__title {
font-family: 'Newsreader', serif;
font-size: 1.5rem;
font-weight: 600;
color: #1F1F1F;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 8px;
}
.newsletter-card__excerpt {
font-family: 'Source Serif 4', serif;
font-size: 1rem;
color: #525252;
line-height: 1.6;
}
Orange Subscribe CTA
The filled-orange primary action button — Substack's most recognizable UI element, used for subscribe and upgrade actions.
.subscribe-btn {
background: #FF6719;
color: #FFFFFF;
border: none;
border-radius: 6px;
padding: 10px 24px;
font-family: 'Source Serif 4', serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.subscribe-btn:hover {
background: #E55A14;
}
.subscribe-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 103, 25, 0.25);
}
Editorial Reading Column
The long-form reading layout — a narrow centered column with generous line-height and serif body text, optimized for sustained reading.
.reading-column {
max-width: 720px;
margin: 0 auto;
padding: 64px 24px;
background: #FFFFFF;
}
.reading-column h1 {
font-family: 'Newsreader', serif;
font-size: 2.5rem;
font-weight: 700;
color: #1F1F1F;
letter-spacing: -0.01em;
line-height: 1.15;
margin-bottom: 16px;
}
.reading-column p {
font-family: 'Source Serif 4', serif;
font-size: 1.125rem;
color: #1F1F1F;
line-height: 1.7;
margin-bottom: 1.5em;
}
.reading-column a {
color: #1F1F1F;
text-decoration: underline;
text-decoration-color: #FF6719;
text-underline-offset: 3px;
}