Brand Guidelines
Girly Talk
Charm & Elegance in Every Cup
So here's the thing — when we started building Girly Talk, we knew we wanted something that felt like walking into your favorite cozy café. You know that feeling? Where everything just feels... warm and intentional?
That's what we're going for here. Not corporate. Not cold. Just genuinely pretty and inviting. Every color, every font, every little animation was chosen because it felt right, not because some design trend told us to.
Typography
Our typefaces create a balance between elegance and readability
We spent way too long picking fonts, honestly. But it mattered! Crimson Text for headings because it has that vintage, elegant vibe — like something you'd see on a fancy tea box from the 1920s. And Geist for everything else because it's clean, modern, and super readable. The combo just works. It's fancy but not pretentious, you know?
Headings
Crimson Text
Aa Bb Cc Dd Ee Ff Gg
Weights: Regular (400), SemiBold (600), Bold (700)
Usage: H1-H6, Product names, Brand elements
Body
Geist
Aa Bb Cc Dd Ee Ff Gg
Weights: Regular (400), Medium (500), SemiBold (600)
Usage: Paragraphs, Buttons, UI elements
Type Scale
Headline 1
Headline 2
Headline 3
Headline 4
Body Large - Perfect for introductions
Body Regular - Used for general content and descriptions
Body Small - Captions, labels, and fine print
Primary Colors
The heart of our brand identity - warm, feminine, and inviting
Okay so Blush Rose (#D4A5A5) is basically our whole personality in a color. It's not a screaming pink — it's softer, dustier, more grown-up. Think rose petals that have been sitting in the sun. We use it for everything important: buttons, highlights, anything we want you to notice. Dusty Rose is just a slightly darker version for when you hover over things. Simple as that.
Blush Rose
#D4A5A5
Primary accent, CTA buttons, active states
Dusty Rose
#C89494
Hover states for primary
Secondary Colors
Supporting tones that add depth and sophistication
Antique Gold adds that touch of luxury without being flashy. It's the color of vintage jewelry and afternoon light. The Walnut browns are our anchor — Dark Walnut for headings and important text, Deep Walnut when you hover. We didn't want harsh black text because it felt too stark against our soft backgrounds. These warm browns feel like they belong.
Antique Gold
#C8A882
Accent borders, tertiary actions
Dark Walnut
#6B5444
Primary text, headings
Deep Walnut
#5A4538
Hover state for Dark Walnut
Neutral Text Colors
Warm neutrals for readable, elegant text
Body text doesn't have to be boring gray! Warm Taupe and Muted Taupe are our go-to for paragraphs and smaller text. They're easy on the eyes and have this subtle warmth that keeps everything feeling cohesive. It's like the text is giving you a gentle hug instead of shouting at you.
Warm Taupe
#8B7355
Body text, descriptions
Muted Taupe
#A89080
Secondary text, captions
Background Colors
Soft, warm backgrounds that feel like a cozy teahouse
These are the colors you almost don't notice, but you'd definitely miss them if they were gone. Ivory Cream is our main background — it's basically off-white with a drop of coffee in it. Warm Linen and Sand Beige help create layers. And the Mint Mist and Sage Frost? Those add little pops of freshness so everything doesn't feel too heavy or one-note. It's all about balance.
Ivory Cream
#FAF6F0
Primary background
Warm Linen
#F5EFE7
Card backgrounds
Sand Beige
#E8DDD0
Borders, dividers
Mint Mist
#E8F4F0
Gradient accents
Sage Frost
#D8E8E0
Card backgrounds
Gradients
Smooth transitions that add dimension and movement
Flat colors are fine, but gradients add that extra ✨ something. The Blush Gold gradient is our favorite — it flows from pink to gold like a sunset. We use it for the scroll progress bar at the top. The Cream to Mint gradients help sections breathe and flow into each other naturally instead of harsh color changes.
Blush Gold
Progress bars, highlights
Cream to Mint
Section backgrounds
Mint to Cream
Hero sections
Shimmer
Loading states
UI Components
Interactive elements that bring the brand to life
Everything is rounded. Like, really rounded. Pill-shaped buttons, soft card corners — sharp edges just didn't feel right for this brand. Buttons have shadows that grow on hover because we want you to feel like things are responding to you. It's the little details that make it feel premium without being over-designed.
Buttons
Icon Buttons
Form Inputs
Card Styles
Standard Card
With subtle border
Elevated Card
With drop shadow
Gradient Card
With hover lift
Micro-Interactions
Delightful animations that enhance the experience
This is where the magic happens, honestly. A website without animations feels dead. But too many and it's annoying. We found the sweet spot: hearts that pop when you like something, cards that float up when you hover, a little wiggle on the logo. These tiny moments make people smile (even if they don't realize why). That's the goal.
Hover Float
Cards lift on hover
Heart Pop
Wishlist toggle effect
Badge Bounce
Cart count update
Wiggle
Logo hover effect
Loading States
Cute, on-brand loading animations that keep users engaged
Nobody likes waiting, but if they have to wait, let's make it cute! We designed these loading spinners to match our brand personality. The flower loader blooms and pulses, the teacup steams gently, and the dots bounce playfully. They're all on-brand and way more delightful than a boring spinning circle.
Main Spinner
Rotating ring with petals
Flower Loader
Blooming petals animation
Brewing...
Teacup Loader
Steaming teacup (on-brand!)
Dots Loader
For inline/button loading
Badges & Status Indicators
Visual cues that communicate state at a glance
Status badges need to be instantly readable. We use soft, pastel versions of semantic colors — green for success, blue for info, yellow for pending, red for errors. They all have rounded pills shapes to stay consistent with our soft aesthetic. No harsh, loud badges here!
Status Badges
Notification Badges
Toast Notifications
Feedback messages that slide in gracefully
Toasts appear in the bottom-right corner and slide away after a few seconds. We use them for confirming actions — "Added to cart!", "Order placed!", "Saved!". They're non-intrusive but noticeable enough that users know something happened. The styling matches our cards with soft shadows and rounded corners.
Try the Toasts
Skeleton Loading
Placeholder content while data loads
Skeletons are better than spinners for content-heavy areas! They show users the shape of what's coming, reducing perceived load time. Ours use a gentle shimmer animation with our warm color palette. It feels natural and doesn't flash or flicker uncomfortably.
Product Card Skeleton
Empty States
Friendly messages when there's no content
Empty states shouldn't feel like errors — they're opportunities! Whether it's an empty cart, no search results, or no orders yet, we use friendly illustrations (or icons), encouraging copy, and a clear call-to-action. No sad face emojis allowed. 😊
Your cart is empty
Start adding some beautiful pieces!
No favorites yet
Save items you love for later
No orders yet
Your order history will appear here
That's the vibe ✨
This design system is a living document. As Girly Talk grows, so will this guide. The goal is always the same: create something that feels warm, intentional, and genuinely beautiful. Not trendy for the sake of it, but timeless in its own cozy way.
Made with 🌸 by the Girly Talk team