50% off your first order. Free shipping, always
Sunnycells
Design system reference, version 1

Age is a number.
Cells are the story.

Black type on white paper, big and bold, punctuated by flat blocks of sunny color. Every size assumes a reader who is 35 to 55 and up, on a phone, in daylight.

Color

Black ink on white paper is about 90% of every screen. Color is an event. All four accents carry black text only, and a maximum of two background colors share a screen.

Base. Warm neutrals, never blue gray.
--white
#FFFFFF
--ink
#0D0D0C
--ink-80
#38382F
--ink-60
#6B6B60
--ink-40
#9B9B90
--ink-20
#D8D6CE
--ink-10
#EAE8E1
--shell
#F7F5F0
Accents. Product family codes, not decoration.
--sun
#FFC61E
Brand primary. Ingestibles.
--zest
#FF7A1A
Topical skincare.
--sky
#8CB0E8
Hair and scalp.
--sprout
#79C47E
Wellness.

--ink-40 is not a text color. At 2.8:1 on white it fails AA at every size. It is for hairline furniture, disabled glyphs, and icons on a dark fill. The lightest text on white is --ink-60.

Type

Outfit for display, Figtree for text and micro-labels. Two faces, no third, no monospace. Body is 20px minimum at weight 500 minimum.

Hero
AGE IS A NUMBER
Display
THE INSIDE JOB
H1
CELLS ARE THE STORY
H2
What is actually in it
H3
Three types of collagen
H4
One shot a day
Body, 20px, weight 500, line height 1.55

Ceramides first, collagen second. Barrier before building, because a leaky barrier wastes everything you put on top of it.

Micro-label, sentence case, +0.04em, weight 600
500 ml · 30 servings
In a 12-week study of 84 women, aged 35 to 60

Core

Buttons are 12px corners, never pills, and never below 48px tall. The accent, zest, sky, and sprout fills exist so an add-to-bag button can match its product family.

BestsellerNewIn stock50% off first order50% off first order

Card, white

Hairline, 16px corners, no shadow at rest.

Card, shell

The quiet band between white sections.

Card, ink

Inverted, for a single loud block.

Commerce

Prices are integers. Savings are dollars. Every entry point leads with 50% off the first order, always shown with the ongoing price.

Price
$39$49
Save $10
Star rating
4.712,480 reviews
Quantity
1
Bestseller
50% off first order
Product cutout goes here
Blood orange · 30 servings

SC-12 Liquid Collagen

Three types, one shot, sixty seconds.

12,480 reviews
Then $39 per month
50% off first order
Product cutout goes here
50 ml · unscented

SC-04 Barrier Cream

Ceramides first, then the actives.

3,210 reviews
Then $49 per monthSave $10
50% off first order
Product cutout goes here
60 ml · 90 applications

SC-08 Scalp Serum

Twelve weeks, measured at the root.

1,890 reviews
Then $45 per month
Subscription box. The only buy box in the system.
50% off first order
Choose how often it arrives
$17$35first month
Then $35 per month, and you can change it any time.
Free shipping, alwaysSkip, change, or cancel anytimeThirty-day returns, opened or not

Forms

Every control clears 48px. Errors say what is needed, never 'Invalid input'.

Order updates and nothing else.
We need a full email address to send your order.
Change it any time.

Icons

Lucide at 2px stroke, always --ink, always with a label except in the header utility row. No emoji, no unicode dingbats.

menu
search
user
shopping-bag
chevron-down
chevron-right
x
plus
minus
check
star
truck
repeat
shield-check
arrow-right