Design System v1.0

Penster UI Kit

Complete visual reference for all components, tokens, and patterns — light mode, dark mode, and mobile screens.

Typography
DM Serif Display + DM Sans
Display XL — DM Serif Display / 72px
The marketing team
your practice never had to hire.
font-family: 'DM Serif Display' · size: clamp(48px, 6vw, 80px) · weight: 400 · tracking: -0.025em · line-height: 1.03
Display L — Section heading
Three autonomous engines.
Zero headcount.
size: clamp(36px, 4vw, 56px) · tracking: -0.02em · line-height: 1.08
Display M — Card / sub-section
Better marketing. Fraction of the cost.
size: clamp(24px, 3vw, 36px) · tracking: -0.015em
Body scale — DM Sans
UI Heading — 22px Bold
700 weight · -0.01em
Body Large — 18px, long-form descriptions and hero subtext that needs room to breathe.
400 weight · 1.7 line-height
Body Regular — 16px, the standard reading size for card content, feature descriptions, and general paragraph text.
400 weight · 1.65 line-height
Body Small — 14px, secondary information, help text, and supplementary content inside compact components.
400 weight · 1.6 line-height
Caption — 12px, metadata, timestamps, image captions, and fine print.
500 weight · 1.5 line-height
Special treatments
Section label
DM Sans 600 · 11px · uppercase · tracking: 0.12em · color: --accent
+367%
DM Serif Display · 56px · tracking: -0.03em · color: --primary
--primary: #0D5C2E
border-radius: 999px
font-weight: 800
Monospace · 13px · used for code and token display
Snap a photo.
Answer 3 questions.
Get a post.
Serif/sans mix technique — emotional word in italic serif, factual in sans 800
Colours
22 tokens across 5 groups
Brand greens — 5–10% of UI surface
Forest Dark
#0D2818
Dark hero sections
Primary
#0D5C2E
CTAs, nav, key actions
Forest Mid
#1A6B40
Hover, secondary
Accent
#3DA86A
Icons, labels, links
Bright
#4ADE80
Dark bg text only
Warm backgrounds — 70–80% of UI surface
Warm Base
#F4F0EA
Page background
Warm Alt
#EDE8E1
Section variation
Surface
#FFFFFF
Cards, modals
Green Tint
#EAF2EC
Success, AI output
Text scale
Ink
#1A1A18
Headings, labels
Ink Light
#3D3D3A
Body copy
Text 2
#5C5C58
Subtext
Muted
#8A8A85
Captions, hints
Ghost
#AEAE9F
Placeholders
Borders & Structure — structural tokens only, not semantic
Border Warm
#E0D9D0
Cards, dividers
Border Dark
#C8C2B8
Emphasis borders
Semantic — status states only, never decorative
Warning Bg
#FEF9C3
Draft states
Warning Text
#854D0E
Draft label
Error Bg
#FEE2E2
Error states
Error Text
#DC2626
Error label
Info Bg
#EFF6FF
Fitness tag bg
Info Text
#1D4ED8
Fitness tag text
Buttons
All states and variants
Primary CTAs — pill shape
Navigation buttons
Small — card actions
Button with contextual size comparison
XS
SM
MD — default
LG
Tags & Badges
Status + category labels
Healthcare · Fitness · F&B Published Draft Failed Fitness Healthcare F&B Content Engine SEO Engine Growth Engine MOST POPULAR Active ⏸ Paused ✕ Disconnected
Cards
All card variants
Engine cards — hover to see accent line
Content Engine
FeedGen
Creates your entire social calendar — posts, carousels, reel scripts, stories — tailored to your specialty.
30+ posts/mo
5 min approval
24hr calendar
SEO Engine
WebGen
Generates procedure pages and blog posts. Captures search intent before competitors rank.
840+ keywords
8+ pages/mo
Growth Engine
AdGen
When a post performs, ads fire automatically. Meta, Google, retargeting — geo-targeted.
8.2x ROAS
$4.20 CPC
Proof / metric cards
+367%
Consult requests/mo
8.2x
Average ROAS
#6
Page 1 in 90 days
840+
Page-1 keywords
Pricing cards
Free
Get started, see what's possible.
$0
forever free
5 posts/month
1 social channel
Basic templates
MOST POPULAR
Starter
Everything you need to grow.
$299
per month
30+ posts/month
FeedGen + WebGen
4 social channels
AI canvas editor
Analytics dashboard
Growth
Full stack — content, SEO, ads.
$599
per month
Everything in Starter
AdGen — paid campaigns
Priority support
Pain / stat cards
$3–5K
Average monthly agency cost
For a basic social + SEO package. Most practices can't justify it.
$60K+
Cost of a marketing hire
Salary, benefits, training — and they still can't do it all.
11 PM
When you finally look at Instagram
After a full day of patients. You know you need to post. Nothing gets done.
Nothing
What your competitors are doing
Most are in the same boat. First to fix it wins the local market.
Card surface variants
surface
#FFFFFF · default card
warm-alt
#EDE8E1 · secondary card
green-tint
#EAF2EC · AI output, success
forest-dark
#0D2818 · dark moments
Forms & Inputs
All input states
Email address
Used for your account and notifications.
Practice name — focused
Error state
Please enter a valid email address.
Success state
Specialty
About your practice
Search
Borders & Dividers
All border treatments
Border styles
border-warm — #E0D9D0 · 1px solid · cards, inputs
border-dark — #C8C2B8 · 1px solid · secondary buttons
accent — #3DA86A · 1px solid · card hover state
primary — #0D5C2E · 2px solid · featured plan
bright — #4ADE80 · 1px · dark card borders
accent top — 3px top · card hover reveal
Divider variants
border-warm · #E0D9D0
border-dark · #C8C2B8
accent 2px · #0D5C2E
forest tint · rgba(bright, 0.15)
or
Border radius scale
6px
sm
8px
md
12px
lg
16px
xl
999px
pill
Dark Mode
Forest dark #0D2818 — used for hero + CTA sections
The shift
What if your entire
digital presence ran itself?
Penster runs in the background — creating, publishing, and optimising — while you focus entirely on patient care.
Healthcare Fitness F&B
Content Engine
FeedGen
30+ posts/month. Zero effort. Your calendar fills itself.
SEO Engine
WebGen
840+ page-1 keywords. Procedure pages written and ranked.
Growth Engine
AdGen
8.2x ROAS. When a post hits, ads follow automatically.
+367%
Consults/mo
8.2x
Avg ROAS
840+
Keywords
$299
From/month
Dark input
Dark tags
Published Draft Failed
Dark dividers
Mobile Screens
Light + dark mode · all 4 key screens
Light mode — all 4 screens
DC
Good morning
DermaCare
Clinic
24
Posts
6.2k
Reach
3
Sched.
Quick actions
Generate post
Templates
Schedule
Analytics
Recent
DC
Skin health tips
Instagram · 2h ago
AI visual
Published248 reach
DC
Consult offer
Facebook · Draft
AI visual
DraftFri
Home
Create
Library
Profile
Home
Canvas
UndoExport
DermaCare Clinic
AI-generated image
Your skin reflects your health. Book a consult today.
Book Now →
Text
Image
Shape
Brand
AI Caption
Your skin reflects your health. At DermaCare, our specialists bring science and care together. Book your consult today.
#skincare #dermatology #health
Regenerate
Home
Create
Library
Profile
AI Canvas
+ New
Search templates...
All Healthcare Fitness F&B
Templates
Dental promo
Dental promo
Instagram square
Healthcare
Fitness challenge
Fitness challenge
Stories / Reels
Fitness
Weekly menu
Weekly menu
Facebook post
F&B
Home
Create
Library
Profile
Library
DC
DermaCare Clinic
Healthcare · Hyderabad
Pro planActive
142
Posts created
28.4k
Total reach
94%
On-brand score
12
Scheduled
Brand settings
Brand colors
3 configured
Edit
Tone of voice
Professional, warm
Edit
Logo & assets
2 uploaded
Edit
Posting schedule
Mon, Wed, Fri
Edit
Home
Create
Library
Profile
Profile
Dark mode — home + canvas
penster
DC
Good morning
DermaCare
Clinic
24
Posts
6.2k
Reach
3
Sched.
Quick actions
Generate post
Templates
Schedule
Analytics
Recent
DC
Skin health tips
Instagram · 2h ago
AI visual
Published248 reach
DC
Consult offer
Facebook · Draft
AI visual
DraftFri
Home
Create
Library
Profile
Home — dark
Canvas
UndoExport
DermaCare Clinic
AI-generated image
Your skin reflects your health. Book a consult today.
Book Now →
Text
Image
Shape
Brand
AI Caption
Your skin reflects your health. At DermaCare, our specialists bring science and care together.
#skincare #health
Regenerate
Home
Create
Library
Profile
Canvas — dark
penster
UI Kit v1.0 · April 2025 · All tokens from the final palette