Cooper’s Coffee

Small-batch coffee, roasted down the street.

This design system is generated from bitkit.kit.json and edited in Claude. The live site is https://coopers.coffee; this reference lives at https://kit.coopers.coffee.

Content

Voice: more casual, more playful, more reserved.
Say: Name the origin and the roast date.
Say: Greet regulars by their usual.
Avoid: Coffee puns in every post.
Avoid: Discount-first language.
Bio: Small-batch coffee roasted in the back room and poured out front. Beans roasted Tuesday and Friday, open daily from 6.

Color

paper is the page; raised holds cards and panels; text is ink, secondary text ink-muted.
primary is the one strong color: primary buttons, links, the mark, focus rings. Text on it is on-primary.
accent highlights and always travels with a word.
Light and dark themes define the same tokens. Ink on paper: 15.9:1 light, 17.3:1 dark.

Type

DM Serif Display for headings (hero, title), Work Sans for text (lede, body, label, fine), mono for handles and identifiers.
Sentence case everywhere. Handles stay as written: @cooperscoffee.

Shape and space

Radii: radius-s chips, radius-m buttons and cards, radius-l panels.
Spacing: space-2 inside controls, space-4 card padding, space-6 between cards, space-10 sections.

Iconography and mark

The mark is a seal monogram reading “C” in primary (assets/Logos/mark.svg). Never redraw or recolor it.

Where the brand lives

Platform	Handle
Instagram	@cooperscoffee
Threads	@cooperscoffee
X	@cooperscoffee
TikTok	@cooperscoffee
Bluesky	@cooperscoffee
Facebook Page	@cooperscoffee
Mastodon	@cooperscoffee
Reddit	@cooperscoffee
LinkedIn Page	@cooperscoffee
YouTube	@cooperscoffee
Twitch	@cooperscoffee
Pinterest	@cooperscoffee
GitHub	@cooperscoffee
Etsy shop	@cooperscoffee

Tokens

Color

Token	Light	Dark	Use
`paper`	`#f2f5f9`	`#0c1622`	Page background.
`raised`	`#fafbfd`	`#1a242f`	Cards, panels, and menus on paper.
`ink`	`#0f1b2a`	`#f7f9fb`	Text and icons on paper and raised.
`ink-muted`	`#5e6772`	`#a5aaaf`	Secondary text on paper; keep it at 4.5:1 or more.
`line`	`#d0d4da`	`#363f49`	Borders and dividers.
`primary`	`#1f4e79`	`#577a9b`	Primary buttons, links, the mark, focus rings.
`on-primary`	`#ffffff`	`#ffffff`	Text and icons on primary.
`secondary`	`#88b4d8`	`#a0c3e0`	Supporting fills and illustrations.
`accent`	`#f2c14e`	`#f2c14e`	Highlights and badges; pair with text, never alone.

Type

hero · Cooper’s Coffee

title · Cooper’s Coffee

lede · Cooper’s Coffee

body · Cooper’s Coffee

label · Cooper’s Coffee

fine · Cooper’s Coffee

handle · Cooper’s Coffee

Spacing and radius

`space-2`	`8px`	Gaps inside controls.
`space-4`	`16px`	Card padding, gaps between controls.
`space-6`	`24px`	Gaps between cards.
`space-10`	`40px`	Section padding.
`radius-s`	`5px`	Chips and small controls.
`radius-m`	`10px`	Buttons, inputs, cards.
`radius-l`	`16px`	Panels and dialogs.

Components

Button

Buttons start an action and name it with a verb in sentence case.

Primary: primary fill, on-primary text, radius-m. One per view.
Secondary: raised fill, line border, ink text.
The consumer provides the label and the click handler.

ProfileCard

A profile card previews how the brand appears on one platform: mark, name, handle, and the bio at that platform's limit.

raised card, line border, radius-l.
Handle in mono; bio in body, trimmed at a word break.
The consumer provides the platform name, handle, and bio.

Generated from the bitkit kit; build it out in Claude. Served by bitkit.