Builder26 · CardSnacks Design System

Foundations · 01

Principles

Six principles that set the tone for every screen in Builder 26 — from the eco-footer to the colourful stickers.

01

Warm, never naive

Mint radii, pastel gradients, no harsh shadows. The interface should feel like a card held in your hand.

02

The celebration lives inside the card

Saturated colour, animations and illustrations belong on the card canvas. The UI chassis stays calm and quiet.

03

Step by step

Every complex flow (Pages → Envelope → Gift → Music → Send) is broken into clear, bite-sized steps. No overload.

04

Works for an 8-year-old and an HR director

The same system runs B2C gifting and B2B admin. Tone is friendly; copy is human.

05

Eco in the details

The forest footer, soft tree illustrations and pastel palette quietly remind users that an e-card replaces a paper one.

06

Fast without feeling rough

Motion stays between 120–320ms, no scroll springs. The UI feels alive, but predictable.

Foundations · 02

Brand & Logo

The logo is the word “CardSnacks” set in Avenir Next Semibold, in our signature mint #26B2A4.

CardSnacks

Clear space & minimum size

Keep clear space around the logo equal to the height of the capital “C”. Minimum wordmark size is 24px — below that, use the C-mark on its own.

Foundations · 03

Color

Mint teal is the only primary. Warm honey-yellow carries celebration and seasonal moments. A precise greyscale built on #3F3F3F handles structure. Red survives only as the Warning semantic.

The primary

Mint

Every CTA, focus ring, selected state, and link uses this exact value. No substitutions.

#20B2A4

Brand palette

Source of truth — the exact colours every screen should sample from. Four families: mint (the only primary), honey (warm accent & celebration), red (warning only — use sparingly), greyscale (text, surfaces, borders).

Mint

deep#36696B

primary#20B2A4

hover#39C4BD

soft#B6E4E6

tint#ECFEFF

Honey

500#F2B441

400#FFC966

300#FFD98A

200#FFE6B0

100#FFF1D4

Red warning only

warning#EB5757

soft#FFE0DE

tint#FFF7F5

Greys

ink#3F3F3F

500#868686

400#ADADAD

300#CDCDCD

100#F2F2F2

50#FBFBFB

white#FFFFFF

Primary — Brand Mint

#26B2A4 — the base 500. Hover step is 600 (#1FA092). Step 50 (#ECFEFF) powers soft backgrounds and hover fills.

Signature gradient

The single brand gradient — mint → sky → cream on a 135° axis. Used as the default surface for hero blocks, modals, stages, cards and panels. Avoid alternative pastel gradients; this is the one.

--signature-gradient · #E8F7F5 → #F0F9FF → #FFF7ED

--surface-gradient · alias

footer · forest (only exception)

Semantic tokens

Success#2BBF7C

Warning#EB5757

Danger#EB5757

Info#3AA0E5

Greyscale

Foundations · 04

Typography

Avenir Next everywhere: 400, 500, 600, 700. JetBrains Mono for code. Web fallback is Nunito Sans — the closest free stand-in by geometry and metrics.

Scale

displaySendSnack72 / 800 / −3%

h1Card Builder56 / 800 / −2.5%

h2Customize everything40 / 800 / −2%

h3Pick a theme32 / 600

h4Add message24 / 600

h5Section heading20 / 600

body-lgThe best way to send a thinking-of-you note.18 / 400 / 1.5

bodyParagraph body — comfortable reading size.16 / 400 / 1.55

body-smSecondary helper copy14 / 400 / 1.5

captionMetadata · tooltips · tags12 / 500

mono#26B2A4 · padding: 16pxJetBrains Mono

Weights

Aa

Regular400

Aa

Medium500

Aa

Demi600

Usage rules

DO

Display / H1 — 800 with tightened letter-spacing (−2…−3%).
UI-labels, buttons, inputs — 500–600.
Body — 400, 16px, line-height 1.55.
Always use text-wrap: pretty on headlines.

DON'T

Don't mix more than two type families on a single screen.
Don't use weights below 400 — Avenir gets too thin.
Don't stretch or condense the type.
Don't use ALL-CAPS on body copy.

Foundations · 05

Radius

Core: 8, 16, 32. Secondary: 4, 12. Rare: 2. Pill (999) for CTAs and chips.

r-2 · rare

r-4 · inputs inner

r-8 · base

r-12 · controls

r-16 · cards

r-32 · hero

r-full · pill CTA

Foundations · 06

Spacing

A 4px base grid. Tight densities inside blocks (16/24), generous rhythm between them (48/64/80).

s-1 · 4

s-2 · 8

s-3 · 12

s-4 · 16

s-5 · 20

s-6 · 24

s-8 · 32

s-10 · 40

s-12 · 48

s-16 · 64

s-20 · 80

Foundations · 07

Elevation

Four shadow steps to separate layers. Tints run slightly cool — bluish, never black.

xs · 0 1 2

sm · 0 2 6

md · 0 8 20

lg · 0 16 48

xl · 0 24 64

Foundations · 08

Motion

Light and warm, no rubber-band bounce. The base curve is cubic-bezier(.2,.8,.2,1).

fast · 120ms

Hover, focus, press — instant feedback.

base · 200ms

Menus opening, popovers, tabs.

slow · 320ms

Stepper transitions, slide-up modals.

Core patterns

/* Slide up (bottom sheets, floating panels) */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }

/* Button press */
.btn:active { transform: translateY(1px); }

Components · 01

Buttons

A single type style — 600. Pills for primary CTAs and navigation. Rounded r-12 squares for secondary actions in forms and toolbars.

Variants

Sizes

Icon & pill group

Usage

DO

One primary per screen — it drives the main step (Send / Next).
Use outline for reverse or secondary actions.
Icon on the left for Back, on the right for Next / Send.

DON'T

Don't build a primary ghost button.
Don't drop-shadow outline buttons.
Don't shrink CTAs below 32px — that's the floor.

Components · 02

Inputs & Forms

Inputs are 44px tall with r-12 corners and a soft focus ring of --primary-soft at 3px wide.

Your name

Recipient's email

Search contacts

Phone

Message0 / 60

With error Please enter a valid email.

Disabled

Components · 03

Toggles & Checks

Switch — to turn a mode on or off (Preview mode, Auto-send). Checkbox and radio are for list selection.

Switch

Preview mode

Schedule send

Checkbox

Add gift card

Include music

Send anonymously

Radio

Email

SMS

Share link

Components · 04

Chips & Badges

Chips — category filters (Birthday / Belated / Love…). Badges — statuses and metadata.

Chips

Family ✕ Belated Romantic Love Mom Dad Funny Sibling Sports Business + New

Badges

New Delivered Pending Failed Draft

Components · 07

Stepper

The builder's main axis: Pages → Envelope → Gift → Music → Send.

Pages

Envelope

Gift

Music

Send

States

Step

Default: icon ink-400, label fg-muted.
Active: primary + label primary (600).
Done: icon ink-700, the rail behind it is primary.
Error: icon and label in danger.

Rules

Steps are only clickable up to and including the current one.
On mobile the stepper flips vertical.
The rail is 40px on desktop, 28px on tablet.

Components · 08

Builder toolbar

The floating panel next to the canvas — it adds elements onto the card page.

Anatomy

Container: bg-white, r-16, shadow-md, padding 8.
Tool: 40px tall, r-8, icon 18 + label 14/500.
Hover / active — primary-soft background + primary text.
On mobile the toolbar collapses to icons only — no labels.

Components · 09

Modals & Popovers

A centered modal over a dim surface; a popover with shadow-lg and r-16.

Components · 10

Cute Color Picker

The signature picker — pastel presets, an SV area, a hue bar and hex / RGB fields. Drag by the header to move it.

Select color

Presets

Rules

Presets stay soft — no neons.
The active preset gets a primary ring with a 1px gap.
Hex / RGB — always lowercase.
Trigger: 36–48px, pill, with the color chip set inside.

Components · 11

Action panel

Right-side editor panel. Used to configure any selected element — button, image, sticker, gift card.

Action Button

Button link

Label

Color

FILL

TEXT

QUICK FELT TONES

Text size (14px)

Corners

Anatomy

Width 360px, slides in from the right edge.
Header 56px, title 16/600, close button 32px.
Body padding 24px, fields stacked with gap 20px.
Micro-labels in caps (11/600, ink-500) for color groups.
Segmented control (Pill / Rounded / Square) for binary-ish choices.

Components · 12

Date & time picker

Schedule a card for later. Calendar in a popover, time as a separate input.

April 2026

SuMoTuWeThFrSa

Pattern

Day cells are 36px circles. Today gets a primary outline. Selected day is a solid primary disc with white text. Adjacent-month days drop to ink-300.

Components · 13

Music list

List of soundtracks. Glassmorphism over a soft mint backdrop. Cover art uses a 48px square with playful blob gradients. Currently-selected row gets a mint fill with a teal stroke.

Beethoven — Für Elise

Ludwig van Beethoven