System
OneMoreGood Design Guide
Design Source of Truth
Live reference for palette, type scale, spacing, interaction states, and reusable UI patterns used across the site.
Color palette
Ink
colors.ink
#151515 • Primary text, borders, shadows
Paper
colors.paper
#FAF7F0 • Page background, cards
Sand
colors.sand
#EFE4CF • Secondary surfaces, strips
Accent
colors.accent
#2B6E74 • Primary actions, highlights
Clay
colors.clay
#C7783A • Emphasis text, warning chips
Muted Ink
colors.muted
rgba(21,21,21,.78) • Secondary text
Typography
Primary font stack
ui-sans-serif, system-ui, sans-serif
Weight system: regular body with heavy emphasis on font-black (900) for branding, labels, and key CTAs.
text-[10px]
Micro label
Dense admin chips
text-[11px]
Utility label
Badges / status
text-xs
Caption / kicker
Kickers and tags
text-sm
Small body
UI body text
text-base
Base body
Default paragraphs
text-lg
Lead copy
Section intros
text-xl
Card title
Card headings
text-2xl
Feature title
Callouts
text-4xl
Section display
Large headings
text-5xl
Hero heading
Primary hero
text-6xl
XL display
404 / big moments
Layout and spacing
max-w-7xl
~80rem
Main content container
px-6
1.5rem
Page side padding
py-14
3.5rem
Section vertical rhythm
gap-6
1.5rem
Standard grid gap
gap-8
2rem
Large two-column gaps
p-3 / p-4 / p-5
0.75 / 1 / 1.25rem
Card internals
Borders and elevation
border: 2px solid ink
Default frame for cards, buttons, inputs
inner border: 1.5px solid ink
Nested frame on featured cards
box-shadow: 2px 2px 0 ink
Small controls / chips
box-shadow: 3px 3px 0 ink
Buttons and product cards
box-shadow: 6px 6px 0 ink
Modal shell
Components
Reusable UI Patterns
These examples mirror the buttons, containers, tags, cards, form controls, and modal shell used across home, shop, and admin screens.
Buttons and tags
Trust
In stock
Purpose-backed
Container and card
Product
Card title
Short supporting copy with a purpose-led product message.
$8.00
Form controls
Modal shell
Dialog title
Modal content area with high-contrast framed header, strong shadow, and action strip.
Interaction and motion
.btnInk
Lift + slight rotate on hover, pressed state on click
.chipPop
Micro rotation hover for chips and compact tags
.reveal
Fade + translate reveal used on section entry
Accessibility baseline: high contrast text on paper/sand surfaces, large tap targets, uppercase utility labels for quick scanning, and clear visual feedback on interactive controls.
Use this page as the source for future UI decisions.