Personalize
Personalized Name Mug
Wheel-thrown stoneware
$38.00
Ever Gorgeous design system
Warm, crafted and quietly premium. Kiln-fired clay, dried sage and natural-dye saffron on unbleached linen — with a hand-stitched line as the signature detail.
brand
Brand
Outlined SVG logos live in design/brand/logo and public/brand. Never re-type the wordmark.
handmadeVoice
Warm, specific, unhurried. Talk about hands, materials and time — never “cheap”, “deal” or exclamation marks.
Tagline
made by hand, made for you — always lower-case, set in the script face.
Signature
The stitched line (.eg-stitch / .eg-stitch-frame). Use it to separate, frame and highlight — sparingly.
color
Color
Primitives are raw scales. Components use semantic tokens only (bg-*, text-fg-*, border-line-*). All text pairs pass WCAG AA.
clay
50 · #FBF1EC
100 · #F6DFD4
200 · #EDBDA8
300 · #E1977B
400 · #D07655
500 · #B5573B
600 · #9A4630
700 · #7C3827
800 · #5E2B1F
900 · #3F1D15
sage
50 · #F2F4EE
100 · #E1E6D8
200 · #C4CDB3
300 · #A1AE8A
400 · #7F8E68
500 · #5E6B4E
600 · #4C573F
700 · #3C4532
800 · #2C3325
900 · #1D2218
saffron
50 · #FDF7E8
100 · #F9EBC6
200 · #F2D68D
300 · #E8BE5B
400 · #D9A441
500 · #BE8A2C
600 · #9A6E22
700 · #75531B
800 · #513914
900 · #2F210C
indigo
50 · #EEF2F7
100 · #D5DEEA
300 · #8BA3C2
500 · #3D5A80
600 · #304868
700 · #263A54
moss
50 · #EDF5EF
100 · #D3E7D8
300 · #8DBF99
500 · #3F7D4E
600 · #32653F
700 · #274F31
madder
50 · #FBEDEB
100 · #F5D2CD
300 · #E08E84
500 · #B23A2E
600 · #922F25
700 · #73251D
sand
0 · #FFFFFF
25 · #FFFDF9
50 · #FAF6F0
100 · #F3ECE2
200 · #E7DDD0
300 · #D3C6B5
400 · #B3A492
500 · #8F8170
600 · #6E6255
700 · #52483E
800 · #3A322B
900 · #2B231E
950 · #1C1612
Backgrounds
bg-canvas#FAF6F0bg-surface#FFFDF9bg-subtle#F3ECE2bg-muted#E7DDD0bg-inverse#2B231Ebg-brand#9A4630bg-brand-hover#7C3827bg-brand-soft#FBF1ECbg-accent#D9A441bg-accent-soft#FDF7E8bg-secondary#4C573Fbg-secondary-hover#3C4532bg-secondary-soft#F2F4EEbg-overlayrgba(28, 22, 18, 0.48)
Foreground
fg-default#2B231Efg-muted#52483Efg-subtle#6E6255fg-inverse#FAF6F0fg-on-brand#FFFDF9fg-on-accent#1C1612fg-brand#7C3827fg-secondary#3C4532fg-sale#922F25
Borders
border-default#E7DDD0border-strong#B3A492border-inverse#52483Eborder-brand#B5573Bborder-focus#3D5A80
Status
status-success#32653Fstatus-success-soft#EDF5EFstatus-warning#75531Bstatus-warning-soft#FDF7E8status-danger#B23A2Estatus-danger-soft#FBEDEBstatus-info#304868status-info-soft#EEF2F7
type
Typography
Fraunces (display), Inter (UI & body), Caveat (handwritten accent). Fluid steps scale from 360px to 1440px viewports.
Aa
Fraunces
Headings & editorial. Soft optical sizing.
Aa
Inter
UI, body, prices, forms.
Aa
Caveat
Accent only — max one per view.
text-step-753.75px → 81.06px · Display / hero
Made by hand, made for you
text-step-644.79px → 64.85px · H1
Made by hand, made for you
text-step-537.32px → 51.88px · H2
Made by hand, made for you
text-step-431.1px → 41.5px · H3
Made by hand, made for you
text-step-325.92px → 33.2px · H4
Made by hand, made for you
text-step-221.6px → 26.56px · H5 / card titles
Made by hand, made for you
text-step-118px → 21.25px · Lead paragraph, large UI
Made by hand, made for you
text-step-015px → 17px · Body
Made by hand, made for you
text-step-n112.5px → 13.6px · Captions, meta, badges
Made by hand, made for you
text-step-n210.42px → 10.88px · Legal, micro labels
Made by hand, made for you
Eyebrow · .eg-eyebrow
Heading · .eg-h3
Lead paragraph · .eg-lead
Body copy · .eg-body — linen softens with every wash.
Caption · .eg-caption
space
Spacing
Static 4px grid for component internals (p-4, gap-2). Fluid Utopia steps for layout rhythm (p-fluid-m, gap-fluid-s-l).
Static
00px14px28px312px416px520px624px832px1040px1248px1664px2080px2496px32128pxpx1px0.52px1.56px
Fluid steps
3xs4→5px2xs8→9pxxs12→13pxs16→18pxm24→28pxl32→40pxxl48→64px2xl64→96px3xl96→144px
shape
Radius & elevation
Soft, never sharp. Shadows are tinted espresso, not black.
rounded-none0pxrounded-xs2pxrounded-sm4pxrounded-md8pxrounded-lg12pxrounded-xl20pxrounded-2xl28pxrounded-pill9999pxshadow-eg-xs
shadow-eg-sm
shadow-eg-md
shadow-eg-lg
shadow-eg-xl
motion
Motion & layers
Short and calm. Reduced-motion users get instant transitions.
Duration
duration-instant75msduration-fast150msduration-base250msduration-slow400msduration-slower600msEasing
ease-standardcubic-bezier(0.2, 0, 0, 1)ease-entercubic-bezier(0, 0, 0.2, 1)ease-exitcubic-bezier(0.4, 0, 1, 1)ease-emphasizedcubic-bezier(0.3, 0, 0, 1.15)Z-index
z-base0z-raised10z-dropdown100z-sticky200z-header300z-overlay400z-drawer500z-modal600z-toast700z-tooltip800components
Components
Import from @ds/index (server-safe) or @ds/components/interactive (client).
Buttons
Badges
neutralbrandbrand-softsalenewhandmadepersonalizesuccesswarningdangerinfoinverse
Heads up
Personalized items ship in 7–14 days.
Code applied
AUTUMN20 saved you $33.60.
Low stock
Only 3 left in this glaze.
Payment failed
Please check your card details.
Form fields
We'll send your receipt here.
Please add up to 3 initials.
Selection & quantity
1
File upload (personalization)
100% linen, garment-dyed.
Wash cool, line dry.
Free over $75.
- 1Bag
- 2Details
- 3Shipping
- 4Payment
Empty state
Use for empty bags, no results and missing orders.
commerce
Commerce patterns
$168.00Was $210.00-20%
(64)
You're $21.00 away from free shipping