Join the Inner Circle

Early access to archive drops, curator insights, and exclusive invitations to UK gallery events.

<section class="circle">
	<div class="container circle__inner">
		<h1 class="circle__title">Join the Inner Circle</h1>
		<p class="circle__text">Early access to archive drops, curator insights, and exclusive invitations to UK gallery events.</p>
		<form class="circle__form">
			<input class="circle__input" type="email" placeholder="Email address">
			<button class="circle__submit" type="submit">Subscribe</button>
		</form>
	</div>
</section>

/* ═══════════════════════════════════════════════
		   CIRCLE (NEWSLETTER)
		   ═══════════════════════════════════════════════ */

		.circle {
background-color: var(--bg-statement-green);
			padding: var(--space-10) 0;
}

.circle__inner {
text-align: center;
			max-width: 768px;
			margin: 0 auto;
}

.circle__title {
font-size: var(--fs-h1);
			font-weight: var(--fw-bold);
			color: var(--text-on-green);
			line-height: var(--lh-heading);
			margin-bottom: var(--space-5);
}

.circle__text {
color: var(--nw-green-pale);
			font-size: var(--fs-body-lg);
			margin-bottom: var(--space-7);
}

.circle__form {
display: flex;
			gap: var(--space-4);
}

.circle__input {
flex-grow: 1;
			background-color: var(--darkest-green);
			color: var(--text-on-dark);
			padding: var(--space-4) var(--space-5);
			border-radius: var(--radius-md);
			border: none;
			outline: none;
}

.circle__input:focus {
box-shadow: 0 0 0 2px var(--nw-green-light);
}

.circle__input::placeholder {
color: var(--text-on-dark-muted);
}

.circle__submit {
background-color: var(--near-white);
			color: var(--near-black);
			padding: var(--space-4) 40px;
			border-radius: var(--radius-md);
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			letter-spacing: var(--ls-widest);
			transition: background-color 0.2s ease;
}

.circle__submit:hover {
background-color: var(--nw-green-pale);
}

Origin

Prototype TTF2 — NW Homepage Showcase Dark (TN15 — MN19 Converted, 1440px Container)

Styleguide STF2 — Nerdworks \u2014 The Showcase Dark

Tokens Used

--bg-statement-green
--darkest-green
--fs-body-lg
--fs-h1
--fw-bold
--lh-heading
--ls-widest
--near-black
--near-white
--nw-green-light
--nw-green-pale
--radius-md
--space-10
--space-4
--space-5
--space-7
--text-on-dark
--text-on-dark-muted
--text-on-green