The way we build and our patterns

our design language ♡

scroll to read

typography

Fredoka Regular
fredoka

friendly and readable at any size.

we use fredoka for body text, labels, and anything that needs to feel approachable without trying too hard. it's rounded, it's warm, it doesn't yell.

view on Google Fonts
borel

the one that gives us personality.

borel is our headline font. a handwritten serif that feels human without being messy. it's the detail that makes serendipiware recognisable. thanks Rosalie Wagner <3

view on Google Fonts

color palette

ui patterns

the actual components we use, in the wild. every element follows the same logic: soft, rounded, never harsh.

glassmorphism card

frosted glass, subtle border, soft shadow. used in sidebars, modals, info panels across all products.

bg-white/40 backdrop-blur

buttons

input field

rounded-3xl, no border, soft shadow. the claire chat and our contact form input.

tags & badges

cozy privacy-first active canceling #FFCBBE

always rounded-full. status, labels, metadata, hex codes.

border radius

rounded-xl — 12px

hex badges, small icons

rounded-2xl — 16px

buttons, small cards

rounded-3xl+ — 24px+

panels, modals, section cards

motion

default transition 200ms ease
panel / modal 300ms ease-out
page transition astro fade
easing preference ease, ease-out

if you notice the animation, it's probably too much.

built with intention

every choice here, from the fonts to the radius values, is part of the same idea: software that respects you and feels like it was made by someone who cared.

go home
copied ^^