Wordmark — Dark
Design System · v1.0
A warm, premium design system built around growth, clarity, and a more human rhythm of work. A healthier way to grow work.
Berry red
Seed gold
Dusk · Cream
Bely typeface
Dark + Light mode
Foundation
Brand & logos
Wordmark, symbol, and favicon — each with a light and dark variant. The name refers to the surface it's drawn on: use the dark variant on dark surfaces, the light variant on light ones.
Wordmark — Light
Symbol — Dark
Symbol — Light
Favicon
Foundation
Color families
Four purpose-built color families provide the full tonal range for Berry. Hover any swatch to inspect — click to copy the hex value.
Berry
Primary reds — brand, CTAs, active states
Seed
Accent golds — highlights, emphasis, premium moments
Dusk
Warm darks — surfaces, text, overlays
Cream
Warm neutrals — light mode backgrounds and text on dark
Foundation
Design tokens
Semantic tokens map raw palette values to meaningful roles. Always reference these in code — never raw hex values directly.
Brand tokens
Core identity
--color-brand
berry-600
#8B1819
--color-brand-bright
berry-500
#AB2022
--color-accent
seed-500
#E3AF45
--color-accent-soft
seed-400
#F5C25A
Usage guide
When to use which token
Primary brand
Nav logo, active indicators
Primary CTA
Buttons, links, focus rings
Premium accent
Stars, ratings, highlights
Dark background
App shell, dark sections
Light background
Light mode, footer card
Dark mode tokens
Surface and text roles for dark backgrounds
--dark-bg-app
dusk-900
#080506
--dark-bg-surface
dusk-800
#100A09
--dark-bg-elevated
dusk-700
#1A1211
--dark-border-subtle
dusk-600
#2E1B1A
--dark-text-primary
cream-100
#F9F4EE
--dark-text-secondary
cream-400
#D6C2B0
Light mode tokens
Surface and text roles for light backgrounds
--light-bg-app
cream-50
#FFFDFC
--light-bg-surface
cream-100
#F9F4EE
--light-bg-elevated
white
#FFFFFF
--light-border-subtle
cream-200
#F1E8DD
--light-text-primary
dusk-700
#1A1211
--light-text-secondary
dusk-400
#6F5852
Click any hex value to copy it to clipboard.
Foundation
Typography
Bely gives Berry its warm editorial character — reserved for titles and headings. Soleil handles everything else: body, UI, nav, buttons, labels. Bely Display only for the largest moments (h1–h3, stat numbers).
Aa
Bely Display
h1, h2, h3, stat numbers
font-display · weight 400
font-display · weight 400
Aa
Bely
h4, serif accents, editorial moments
font-heading · weight 400 & 700
font-heading · weight 400 & 700
Aa
Soleil
Body, UI, nav, buttons, labels
font-sans · weight 400 & 700
font-sans · weight 400 & 700
h1 — Display
A healthier way
h2 — Section
Grow your work
h3 — Card / subsection
Expert guidance at your pace
h4 — Card title
Feature highlight
Body large
Efficient problem-solving, insightful market analysis, and actionable plans made the consulting invaluable to our business's success.
Body
Berry is a project management tool built for teams who want a healthier way to grow work. Plan, track, and ship with clarity and calm.
Body small
Smart notifications that respect focus time. One-click integrations with your stack.
Caption / eyebrow
Brand resource
Button / CTA
Sign Up Log in Get started
Nav link
Home Features About Pricing FAQ Blog Contact
Stat number
$1.3b+
Tailwind mapping
CSS class → font stack
font-sans
"soleil", system-ui, sans-serif
Body, UI, nav, buttons, labels
font-heading
"bely", Georgia, serif
h4, serif accents
font-display
"bely-display", "bely", serif
h1, h2, h3, stat numbers
Layout
Spacing
Built on a 4px base unit. These are the most-used steps in Berry layouts — map directly to Tailwind's default scale.
Spacing scale
4px base unit · Tailwind default
--space-14px · p-1 / gap-1
--space-28px · p-2 / gap-2
--space-312px · p-3 / gap-3
--space-416px · p-4 / gap-4
--space-520px · p-5 / gap-5
--space-624px · p-6 / gap-6
--space-832px · p-8 / gap-8
--space-1040px · p-10 / gap-10
--space-1248px · p-12 / gap-12
--space-1664px · p-16 / gap-16
--space-2080px · p-20 / gap-20
--space-2496px · p-24 / gap-24
Layout
Border radius
Generous rounding reinforces Berry's warm, premium character. Use the scale consistently — never introduce one-off values.
--radius-sm
8px · rounded-lg
Chips, tags
8px · rounded-lg
Chips, tags
--radius-md
16px · rounded-2xl
Buttons, inputs, cards
16px · rounded-2xl
Buttons, inputs, cards
--radius-lg
24px · rounded-3xl
Panels, sections
24px · rounded-3xl
Panels, sections
--radius-xl
32px · rounded-[32px]
Hero containers
32px · rounded-[32px]
Hero containers
--radius-full
999px · rounded-full
Badges, avatars, pills
999px · rounded-full
Badges, avatars, pills
Layout
Shadows & elevation
Shadows communicate depth hierarchy. Glow variants add brand presence to high-priority interactive moments.
--shadow-xs
Chips, small inputs
Chips, small inputs
--shadow-sm
Tooltips, dropdowns
Tooltips, dropdowns
--shadow-card
Feature cards, panels
Feature cards, panels
--shadow-soft
Heroes, floating elements
Heroes, floating elements
--shadow-modal
Modals, dialogs
Modals, dialogs
--shadow-glow-brand
CTA buttons, brand moments
CTA buttons, brand moments
Layout
Motion & animation
Motion reinforces the premium feel. Use spring for interactive elements, ease-out for entrances, ease-in-out for complex transitions. Hover any row to preview.
Easing curves
Hover any row to preview
ease-out
cubic-bezier(0.16, 1, 0.3, 1)
ease-in-out
cubic-bezier(0.76, 0, 0.24, 1)
ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Duration scale
--dur-fast
120ms
Hover states, micro-interactions
--dur-base
220ms
Most transitions (default)
--dur-slow
400ms
Page transitions, modals, reveals
Layout
GSAP animation patterns
Five patterns, one ease, subtle travel. Motion supports hierarchy without ever being the center of attention. All demos are live — click Replay to re-run.
Motion contract
One ease, short durations, subtle travel. Yucca-tier restraint.
--easecubic-bezier(0.22, 1, 0.36, 1)Every Berry animation. No exceptions.
micro0.15sHover states, icon flips
base0.28sUI feedback, dropdowns
reveal0.6sScroll-triggered fade + 24px rise
line-mask0.85sSplit-line headline rise
hero0.8sHero entrance — staggered children
loader0.55sPage-loader veil fade on first paint
GSAP ease library
Preferred eases for Berry animations — hover to preview
power3.out
Entrances — fast in, smooth land
power2.in
Exits — gentle acceleration out
power2.inOut
Crossfades, modal open/close
elastic.out(1, 0.5)
Delight moments — badge pop, success
back.out(1.7)
Buttons, interactive spring feel
Scroll reveal —
data-revealClick "Replay" to re-run the animation
Work item — Design new onboarding flow
Work item — Fix navigation bug on mobile
Work item — Write Q2 retrospective doc
Work item — Ship Cycle 4 release
gsap.fromTo('[data-reveal]',
{ opacity: 0, y: 24 },
{ opacity: 1, y: 0, duration: 0.6,
ease: 'cubic-bezier(0.22, 1, 0.36, 1)',
scrollTrigger: { trigger: el, start: 'top 90%', once: true },
clearProps: 'transform' })
Line-mask headline —
<SplitHeading>The signature motion — lines rise from inside their own mask
<SplitHeading :lines="['Line one', 'Line two']" class="font-display ..." />
// plugin — one tween per headline, each line staggers 80ms
gsap.set(inners, { yPercent: 110 })
ScrollTrigger.create({ trigger: el, start: 'top 88%', once: true,
onEnter: () => gsap.to(inners, {
yPercent: 0, duration: 0.85, stagger: 0.08,
ease: 'cubic-bezier(0.22, 1, 0.36, 1)' })
})
Stagger grid —
data-reveal-staggerChildren animate in sequence as the container enters the viewport
gsap.fromTo(container.children,
{ opacity: 0, y: 24 },
{ opacity: 1, y: 0, duration: 0.6, stagger: 0.06,
ease: 'cubic-bezier(0.22, 1, 0.36, 1)',
scrollTrigger: { trigger: container, start: 'top 88%', once: true },
clearProps: 'transform' })
Hero entrance
Fires on mount — staggered sequence from badge → heading → sub → CTA
A healthier way to grow work
Work that grows.
Teams that thrive.
Teams that thrive.
Berry is the calm, human project management tool for teams who want to build without burning out.
Start growing →
See demo
// onMounted() — hero wrapper cloaked via style="opacity:0"
const tl = gsap.timeline({ delay: 0.15 })
tl.set(heroRef.value, { opacity: 1 })
tl.fromTo('[data-hero]',
{ opacity: 0, y: 28 },
{ opacity: 1, y: 0, duration: 0.8, stagger: 0.08,
ease: 'cubic-bezier(0.22, 1, 0.36, 1)',
clearProps: 'transform' })
Page loader —
.page-loaderNo route transitions. A single brand-colored veil fades on first paint.
Work that grows.
// layouts/default.vue
<div class="page-loader"><div class="page-loader-mark" /></div>
// gsap plugin — app:mounted
requestAnimationFrame(() => requestAnimationFrame(() => {
loader.classList.add('is-hidden') // fade 0.55s
}))
loader.addEventListener('transitionend', () => loader.remove())
Visual
Gradient recipes
Curated combinations for consistent visual language across dark sections, CTAs, and decorative backgrounds.
App shell
Page background, main dark sections
linear-gradient(180deg, #180707, #080506)
Hero background
Landing hero, feature banners
radial berry + radial seed + app shell base
Primary button
CTAs, primary actions
linear-gradient(180deg, berry-400, berry-600)
CTA banner
Full-width CTA sections
linear-gradient(135deg, berry-700, berry-900)
Gold / accent button
Premium moments, secondary CTAs
linear-gradient(180deg, seed-400, seed-600)
Glass panel
Hero cards, elevated feature panels
145deg: berry/12% → white/2% → seed/6%
Light surface
Light mode cards, footer panel
linear-gradient(180deg, cream-50, cream-200)
Footer / deep dark
Footer backgrounds, deep sections
dusk-800 → dusk-900 + berry radial at bottom
Newsletter / promo
Newsletter banners, dark promo blocks
linear-gradient(135deg, dusk-900, berry-900, dusk-900)
Visual
Component patterns
Core interactive patterns with all variants and states. Build from these — extend, never diverge.
Buttons
Hover to preview interactive states
Inputs
Focus any input to see the focus ring · Error state shown below
Chips & badges
Status indicators and labels
Berry
Premium
Active
Pending
Archived
Live
New
Beta
Visual
Sign-in — both modes
Real sign-in flow rendered in dark and light with the full token system. Same components, inverse contrast — both should feel equally premium.
This is a living internal design system reference for visual consistency across product, marketing, and design work.
App
App atoms
Tracker-specific primitives. Built on the foundation tokens — never introduce one-off colors, sizes, or radii outside this set.
Avatars
Circular initials · sizes xs / sm / md / lg · brand-tinted palettes
D
D
D
D
L
F
M
A
K
+
Status icons
Issue state — Todo · Backlog · In progress · Done · Canceled
Todo
Backlog
In progress
Done
Canceled
Icon component
Single source for sizing + centering. Wraps any Lucide SVG.
<span class="icon icon-sm"><i data-lucide="search"></i></span>
icon-xs · 12px
icon-sm · 14px
icon-md · 16px
icon-lg · 20px
icon-xl · 24px
Type tiles
Issue type badge — Task · Bug · Feature · Improvement. Replaces Huly's green ✅ with brand-warm palette.
Task
Bug
Feature
Improvement
Tool buttons
28px square icon buttons for toolbars · default · hover · active · rec indicator
Browser-style tabs
Top window tabs with colored type-dot, label, and close — replaces the Huly tab bar at the top of the screen
Settings
Inbox
Tracker
Tracker
Segmented · Split · Filter
Selection group · primary CTA with dropdown · filter trigger
Carets · Counts · Group labels
Collapse caret (open/closed) · inline counts · sidebar uppercase section captions with project-color dot
1
19
3
Default
L42 Tasks
Test
Untitled
Issue IDs · Meta pills
Monospace ID label · subtle metadata pills for duration and date
L42TA-6
L42TA-58
Priority tiles
Compact square indicator on kanban cards — Urgent · High · Medium · Low · No priority. Click to set.
Urgent
High
Medium
Low
No priority
Action pills
Empty-state pills for unset card fields — clicking opens the field picker
App
App components
Composed patterns made from the atoms above. Use these as drop-in building blocks across the Tracker app.
Sidebar nav item
Icon + label · default · hover · active · plus indented project leaf
Issue row
ID · status · type · title · meta pills · assignee — default · hover · active
L42TA-6
Recipients Dropdown
D
L42TA-58
Dark mode screenshots
A
L42TA-55
Unsubscribed page — fix render race
K
L42TA-52
EmailBuilder: Image fix
D
L42TA-40
Error message
+
List group
Collapsible section header with status icon · label · count
Todo
1
Backlog
19
Kanban card
Board-view issue card — status · ID · title · priority · component · milestone · assignee. Default · hover · active.
L42TA-53
D
Custom tags with custom colors
L42TA-58
A
Dark mode screenshots
Detail row
Label + clickable value pattern used in the task side panel — every row is a quick-edit field with hover state
Status
Priority
Assignee
Task type
Estimation
0h
Labels
Mini calendar
Sidebar month view — 7-col weekday grid, today highlighted in berry red, faded cells for adjacent months
Mayo 2026
Due date
Scheduled
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
Day column header
Schedule grid column header — large day number + uppercase tag. Today variant uses berry red for both lines.
12
13
14
15
Kanban column header
Column header strip — status · label · count. Done variant has a soft cream gradient so finished work feels lifted, not dimmed.
Backlog19
Todo1
Done38
App
Tracker — Issues list
Full screen composed entirely from the atoms and components above. Berry's warm palette in place of the cold default — every element references a token, no one-off values.
Todo
1
L42TA-6
Recipients Dropdown
D
Backlog
8
L42TA-58
Dark mode screenshots
A
L42TA-55
Unsubscribed page
K
L42TA-52
EmailBuilder: Image fix
D
L42TA-51
Users apps
A
L42TA-50
Eyedropper to color selection
F
L42TA-45
Define max amount of image generations per user
M
L42TA-40
Error message
+
L42TA-39
Missing label
D
App
Tracker — Kanban board
Same data, grouped by status into columns. Drops into the Tracker shell exactly like the list view — pure CSS, every value references a token, and the active card uses Berry red as a clear focus ring.
Backlog
19
L42TA-58
A
Dark mode screenshots
L42TA-55
K
Unsubscribed page
L42TA-52
D
EmailBuilder: Image fix
L42TA-51
A
Users apps
Todo
1
L42TA-6
D
Recipients Dropdown
Done
38
L42TA-57
D
Importing contacts
L42TA-56
F
"List view" for media gallery
L42TA-54
K
Maildrill template "Campaign sent"
L42TA-53
D
Custom tags with custom colors
App
Tracker — Task detail panel
Focused issue view with the inline metadata panel on the right. Every detail row is a quick-edit field — click any value to change status, priority, assignee, time tracking, and so on.
UNTIT-6
Vacaciones
Add description…
Activity
L
New issue: Vacaciones
App
Planner — Calendar & schedule
Three-column day planner: sidebar with mini calendar, unplanned action items in the middle, schedule grid on the right. Today's date is locked in berry red across the mini-cal cell, the day-column header, and the now-indicator on the timeline.
Add Action Item, press Enter to save
Unplanned
1
Untitled
UNTIT-6
Vacaciones
GMT-6
12
13
14
15
All day
12 pm
1 pm
2 pm
3 pm
4 pm
5 pm
6 pm
7 pm
8 pm
3:40 pm
App
Chat — Channels & messages
Channel-based chat with a left rail of channels, documents, and linked Tracker issues. Reuses every atom we already have — avatars, side items, status icons, group labels, the comment input — so it slots straight into the existing system.
#
general
General Channel
mar, 12 de mayo
App
Contacts — Persons table
Tabular view of the Persons type — sidebar filters the contact kind, the main column header bar holds quick filters and a cream "+ Person" CTA, and each row uses existing atoms (avatar, person name, modified date, action buttons).
| Person | Location | Files | Modified date | Role | Contact info |
|---|---|---|---|---|---|
|
TT
test test
|
test | 55 minutes ago |
|
||
|
AB
Andrea Benavides
|
Mexico City | 3 | 2 hours ago | Founder |
|
|
MR
Maria Rodríguez
|
Querétaro | 1 | Yesterday | Product designer |
|
|
DC
Daniel Caballero
|
Guadalajara | — | 3 days ago | Engineer |
|
|
LF
Lopez Familia
|
Monterrey | 2 | Last week | Client |
|