Brand Guidelines
01 — Logo
Logo Variations
The Gildra logo is the GILDRA wordmark. Set in Cormorant Garamond Bold. That's it — by default, no tagline, no Gem alongside it. The wordmark stands alone wherever Gildra is already known: inside the product, on returning surfaces, anywhere the audience has already met the brand. The Gildra Gem is a separate icon (app icon, favicon, watermark) and never sits beside the wordmark.

When the audience hasn't met Gildra yet — billboards, App Store, press, partner decks, first-time visitors — bring in the tagline "Your Beauty App" beneath the wordmark in Josefin Sans, uppercase, wide letter-spacing. See Introduction Lockup below.
Logo — wordmark only (the default)
Primary
GILDRA
Secondary
GILDRA
White
GILDRA
Introduction Lockup — wordmark + tagline
Use this lockup when the surface needs to explain who Gildra is: outdoor advertising, App Store listings, press boilerplate, partner one-pagers, landing-page heroes. The tagline always sits beneath the wordmark and never visually exceeds its width.
Primary
GILDRA
Your Beauty App
Secondary
GILDRA
Your Beauty App
White
GILDRA
Your Beauty App
Width Rule
"YOUR BEAUTY APP" must never be wider than the GILDRA wordmark above it.
Scale the tagline's font-size and letter-spacing together with the wordmark. When the wordmark gets smaller, the tagline gets smaller; when the wordmark gets larger, the tagline gets larger — but it stops at the wordmark's edge. Visual containment, not optical equality.
✓
GILDRA
Your Beauty App
Tagline contained
✕
GILDRA
Your Beauty App
Tagline overruns
02 — The Mark
The Gildra Gem
The Gildra Gem — a square rotated 45° with sharp, clean points — is used independently as an app icon, favicon, or watermark. Its sharp points convey precision and clarity; its rotation creates dynamic energy. A gem in motion.

Color rule (different from the wordmark): the Gem is teal on black, white on teal, and teal on white. Never black. The Gem is not associated with black as a color — it lives in a teal-and-white duotone, even where the wordmark would render in black on light surfaces.
Primary — teal on black
Secondary — white on teal
White — teal on white
03 — Color
Color Palette
The primary palette is teal on black. The secondary palette inverts to black on teal. Neutral grays provide hierarchy in UI and text.
Brand Colors
Teal
Teal — Primary Brand
#14B8A6
rgb(20, 184, 166)
hsl(173, 80%, 40%)
Black
Black — Primary Background
#09090B
rgb(9, 9, 11)
hsl(240, 10%, 4%)
White
White
#FAFAFA
rgb(250, 250, 250)
hsl(0, 0%, 98%)
04 — Typography
Type System
Cormorant Garamond for the wordmark and display text. Josefin Sans for the tagline. Inter for UI, body text, and functional elements.
Wordmark / Display Cormorant Garamond — Google Fonts — Free
GILDRA
Find your space. Build your craft.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789
Tagline Josefin Sans Light — Google Fonts — Free
Your Beauty App
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789
UI / Body Inter — Google Fonts — Free
Welcome to Gildra
Browse available chairs, connect with salon owners, and book your next appointment — all in one place. Gildra brings the beauty industry together.
Button Label   |   Navigation   |   Caption Text
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789
05 — Usage
Do's and Don'ts

Do

  • Use the teal-on-black logo as the default
  • Maintain clear space equal to the wordmark's cap-height around the logo
  • Use the Gem alone when space is limited
  • Use black-on-teal as the secondary treatment
  • Keep the sharp points and 45-degree rotation consistent
  • Always use black on teal, never white on teal
  • Use white for paragraph text on black — gray hurts readability at body size
  • Keep "YOUR BEAUTY APP" contained within the width of the GILDRA wordmark above it — always

Don't

  • Don't round the Gem's corners or change the rotation angle
  • Don't use the logo on busy or low-contrast backgrounds
  • Don't stretch, squish, or add effects to the Gem
  • Don't use white text on teal backgrounds
  • Don't set paragraph text in gray on a black background
  • Don't change the brand colors
  • Don't set the wordmark in a different typeface
  • Don't let "YOUR BEAUTY APP" extend wider than the GILDRA wordmark above it
06 — In Context
Color Pairings
GILDRA Your Beauty App
Find your chair. Build your craft. Book your look.
GET STARTED
Primary — Teal on Black
GILDRA Your Beauty App
Find your chair. Build your craft. Book your look.
GET STARTED
Secondary — Black on Teal
07 — Motifs
Background Gems
The Gem also appears throughout the product as an ambient pattern — faded teal squares, rotated 45°, scattered behind heroes, drifting in corners of cards, and flanking dividers. They should whisper, never shout: low opacity, never overlapping primary content, always pointer-events: none.
AMBIENT LAYER
Content lives above. Gems live behind.
Opacity Scale
3%
Oversized watermark
5%
Hero fill
10%
Outline watermark
20–30%
Card corners
100%
Bullets & dividers
Size Scale
S
8–16px · bullets, dividers
M
48–96px · card corners
L
128–192px · section accents
XL
256–384px · hero watermarks

Do

  • Keep fill opacity ≤ 10%, border opacity ≤ 30% for ambient layers
  • Scatter 3–5 Gems of varying sizes behind hero content
  • Offset corner accents with negative positions (e.g. -right-4 -top-4)
  • Layer two nested Gems on a corner for depth (e.g. 128px @ 5% + 64px @ 10%)
  • Use solid teal Gems (100%) only at small sizes — bullets and dividers
  • Wrap background layers in pointer-events: none

Don't

  • Don't let a watermark Gem rise above ~15% opacity — it becomes foreground
  • Don't tile Gems in a repeating grid — they're scattered, not a pattern fill
  • Don't place watermarks behind body text where contrast suffers
  • Don't use anything but teal for the ambient layer
  • Don't add blur, glow, or drop shadow — Gems stay flat and sharp
Implementation — Tailwind
{/* Hero ambient layer — wrap in pointer-events-none */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
  <div className="absolute top-20 left-10 w-64 h-64 border border-teal-500/10 rotate-45" />
  <div className="absolute top-40 right-20 w-96 h-96 border border-teal-500/10 rotate-45" />
  <div className="absolute bottom-20 left-1/4 w-48 h-48 border border-teal-500/5 rotate-45" />
</div>

{/* Nested corner accent */}
<div className="absolute -right-8 -top-8 w-32 h-32 bg-teal-500/5 rotate-45" />
<div className="absolute -right-4 -top-4 w-16 h-16 bg-teal-500/10 rotate-45" />

{/* Inline bullet — full opacity, tiny */}
<div className="w-2 h-2 bg-teal-500 rotate-45" />
08 — Clear Space
Clear Space & Minimum Size
Give the logo room to breathe. The minimum clear space on all sides equals the cap-height of the wordmark (x). Never let text, buttons, or photos encroach inside that zone.
x
x
x
x
GILDRA
Your Beauty App
Clear space equals the wordmark's cap-height on all four sides.
Minimum Sizes
GILDRA
Your Beauty App
120px wide min
Wordmark lockup
16px min
Gem alone (favicon floor)
44px min
App icon (iOS touch target)
09 — Misuse
Don't Do This
The logo is a precision instrument. The treatments below break it — rounded edges, skewed proportions, wrong palette, added effects. If it's not shown in section 01, it's not a logo.
✕
GILDRA
Don't pair the Gem with the wordmark
✕
GILDRA
Your Beauty App
Don't tilt or rotate
✕
GILDRA
Your Beauty App
Don't stretch or squish
✕
GILDRA
Your Beauty App
Don't recolor
✕
GILDRA
Your Beauty App
Don't use white on teal
✕
GILDRA
Your Beauty App
Don't add glow or shadow
10 — Accessibility
Contrast & Readability
Both teal-on-black and black-on-teal pass WCAG AAA — those are our two real pairings. White-on-teal is the trap: it looks fine at hero size and fails at body size. Plan pairings accordingly.
GILDRA
Body text sample
Teal on Black
8.7 : 1  ·  AAA ✓ all sizes
GILDRA
Body text sample
White on Black
20 : 1  ·  AAA ✓ all sizes
GILDRA
Body text sample
Black on Teal
8.7 : 1  ·  AAA ✓ all sizes
The required pairing on teal surfaces — never use white.
GILDRA
Body text sample
White on Teal
2.4 : 1  ·  Fails AA body ✗
Never use — even at display size, prefer black.
GILDRA
Body text sample
Black on White
20 : 1  ·  AAA ✓ all sizes
GILDRA
Body text sample
Teal on White
2.4 : 1  ·  Fails AA body ✗
Use --teal-dark (#0D9488) for body text on white.
GILDRA
Body text sample
Teal-Dark on White
3.9 : 1  ·  AA large text ✓
Preferred body-text teal on light surfaces.

Do

  • Lead with teal-on-black — it's the safest, highest-contrast pairing
  • Use black-on-teal for the secondary pairing — text, icons, and buttons all sit in black on a teal background
  • Switch to --teal-dark (#0D9488) for teal text on white
  • Keep body text ≥ 4.5:1 against its background (WCAG AA)

Don't

  • Don't put white text on a teal background — it's the trap pairing (2.4 : 1)
  • Don't set small body text in base teal on white
  • Don't rely on color alone to convey state — pair with icon or label
  • Don't drop below 44×44px for interactive touch targets
  • Don't use --zinc-400 or lighter on the page black background for paragraphs
11 — Iconography
Icon Style
Icons are custom inline SVG, outlined, stroke-width 2, rounded caps and joins, colored via currentColor. Fills are reserved for active/selected states.
Default
zinc-400 stroke
Interactive
teal-500 on hover/active
Active
filled, teal-500
Alert
red-400 / amber-400

Sizes

  • 16px (w-4) — inline with body text, dense UI
  • 20px (w-5) — buttons, nav, primary UI
  • 32px (w-8) — section icons, feature blocks

Rules

  • strokeWidth={2} unless the icon is larger than 32px
  • stroke-linecap="round" and linejoin="round" always
  • Use currentColor so icons pick up text color
  • Fill only when an item is toggled/active — heart, bookmark, star
12 — Imagery
Photography Direction
Photography should feel like the brand looks: dark, high-contrast, a little cinematic. Real artists in real spaces — not stock-photo smiles.

Yes

  • Artist-at-work close-ups — hands, tools, craft
  • Empty-space portraits — chair, suite, station as the subject
  • Confident direct-gaze portraits, natural light
  • Flat-lays of tools arranged geometrically
  • Cool color temperature, deep shadows, teal-leaning highlights
  • Mid-tones pulled down for drama

No

  • Clichéd stock: hair-flip, fake laughter, white-background product shots
  • Warm/gold filters, "Instagram boomer" presets, heavy skin retouch
  • Crowded compositions — give subjects negative space
  • Mixed color temperatures in the same campaign
  • Low-contrast, washed-out, hazy backlight
Treatment
When in doubt, push contrast up, saturation down, and temperature cool. A teal color-grade in the shadows ties imagery back to the brand without tinting skin tones.
13 — Voice & Tone
How We Talk
Glamorous, empowering, boujee, direct. Every word should make someone feel like a boss. Lead with benefits, speak to ambition, use "you." No fluff, no corporate speak, no real-estate language.
Glamorous
We're in beauty. Everything we write should feel polished, aspirational, a little luxe.
Empowering
Speak to self-made success, independence, entrepreneurship. Build empires, not accounts.
Boujee
Confident, elevated, a little luxurious — never pretentious or precious.
Direct
No fluff. Every word earns its place. Active voice, short sentences.

On-brand

  • "Build your empire, one chair at a time"
  • "Your space. Your rules. Your success."
  • "Where beauty pros become business owners"
  • "Elevate your craft. Expand your clientele."
  • "Find your chair. Build your craft. Book your look."

Off-brand

  • "Sign up for our platform" — too generic
  • "Manage your appointments" — feature-focused, not benefit
  • "Connect with service providers" — corporate
  • "Browse available listings" — real-estate, not beauty
  • "Our product helps you…" — it's about them, not us
Techniques — from Chris Voss
Voss's negotiation toolkit works the same way marketing does: make the reader feel understood before you ask them for anything. Five techniques map cleanly to Gildra.
Calibrated Questions
Open-ended "how" and "what" questions that make the reader answer for themselves. Pain becomes their own insight, not our claim.
"What would your week look like if your chair booked itself?"
"No"-Oriented Questions
Phrase the ask so a "no" feels safe. People engage when saying "no" costs them nothing — that's when the real conversation starts.
"Is it ridiculous to think your chair could pay for itself?"
Labeling (Tactical Empathy)
Lead with "It seems like…", "Sounds like…", "Looks like…". Name the feeling before the pitch so the reader feels seen.
"Sounds like you've been carrying the whole salon."
"That's Right" Headlines
The line the reader silently agrees with. Aim for a hero headline that earns a "that's right" — not a polite "you're right."
"You didn't become an artist to chase invoices."
Accusation Audit
Name the objection before the reader does. Disarms skepticism on signup flows, pricing pages, and sales emails.
"You're going to say it's another app. We know. Read two more lines."
Slogan Library
Ready-to-use lines by audience. Each is tagged with the technique it leans on. Use as-is or adapt to the surface — hero, email subject, push notification, button label.
For Artists
"You didn't become an artist to chase invoices."
That's Right
"How much of your day is actually the craft?"
Calibrated
"The chair pays you, not the other way around."
That's Right
"Sounds like everyone wants a piece of your chair but you."
Labeling
"Is it a bad idea to own your rent?"
No-oriented
For Place Owners
"Empty chairs are rent you're paying twice."
That's Right · Loss aversion
"How long can your studio afford to stay half-full?"
Calibrated
"You built the place. Now fill it."
That's Right · Direct
"Looks like you're running a business instead of a salon."
Labeling
"Is it crazy to think your studio could book itself?"
No-oriented
For Clients
"How long since a salon actually felt like yours?"
Calibrated
"You don't need a loyalty card. You need a better chair."
That's Right
"Would it be weird to book the artist, not the salon?"
No-oriented
"Sounds like you've outgrown your last stylist."
Labeling
"The right chair is already on your map."
That's Right
Litmus Test
"Would this make someone feel like a boss?"
If the answer is no, rewrite it.
14 — Naming
Writing the Brand
Capitalization matters. The wordmark lives in all caps; prose doesn't.
GILDRA
In the logo
Uppercase, Cormorant Garamond 700, wide letter-spacing. Only ever in brand lockups.
Gildra
In prose & headlines
Title case. Treat it like a proper noun in running text, emails, decks, support replies.
gildra.xyz
In URLs & code
Lowercase. Matches domain, package name, social handles (@gildra).

Do

  • "Gildra helps salon owners fill their spaces."
  • "Download Gildra on the App Store."
  • "Visit gildra.xyz"

Don't

  • "GILDRA helps salon owners…" — shouting
  • "gildra is the beauty app" — lowercase in prose
  • "GilDra", "gilDra", "Gil-Dra" — no camelCase, no hyphens
  • "The Gildra" — no article
15 — Dictionary
Brand Dictionary
The names we give our own components. Use these terms in design files, code, and conversation so everyone is pointing at the same thing.
The Gem
Gildra Gem
A square rotated 45° with sharp points. Our standalone icon: favicon, app icon, watermark, and ambient motif. Never paired alongside the wordmark.
The Background
Gildra Glitz
Tiny Gildra Gems twinkling across the viewport on staggered delays — a fixed, hero-only flourish that fades to black as you scroll past it. Glamour, never noise.
Yes
The Moment
Spotlight Moment
The four-layer affirmation beat — pulsing flanking Gems, breathing teal halo, twinkling sparkles, and a wide teal bloom behind the text. One per page, on the line that earns it. See §16.
GILDRA
Your Beauty App
The Logo
Wordmark
GILDRA set in Cormorant Garamond Bold with the tagline stacked beneath in Josefin Sans. The full lockup. The Gem never sits beside it.
Your Beauty App
The Line
Tagline
"Your Beauty App" — Josefin Sans 500, uppercase, wide letter-spacing. Optional, contextual. Not part of the logo by default. Brought in beneath the wordmark only when the surface needs to introduce who Gildra is — billboards, App Store, press, first-time visitors. Always smaller than the wordmark above it.
Muse
The Concierge
Muse
Gildra's AI concierge. Title case in prose, never "the Muse" with an article. Always frames suggestions, never dictates them.
16 — Motion
Spotlight Moments
For affirmation beats — a hero reveal, a celebration, the line you most want the eye to land on — surround the moment with four layered effects: pulsing flanking Gems, a breathing teal halo around the text, twinkling sparkle accents, and a wide teal bloom that breathes behind the text. Subtle on each axis, glamorous in combination. Use sparingly: one spotlight per page, on the moment that earns it. Honors prefers-reduced-motion by stilling all four layers.
Yes
The Four Layers
01 · Pulse
Flanking Gems breathe — scale 1 → 1.45 → 1 with a 15% opacity dip. Drives the rhythm. 2.4s
02 · Glow
Three-layer teal text-shadow on the headline pulses from 18px → 96px halo. Carries the warmth. 3s
03 · Sparkle
Four small teal-light Gems twinkle on staggered delays (0 / 0.6 / 1.2 / 1.8s). Reads as glitter, not strobe. 2.4s
04 · Bloom
A wide teal radial halo breathes behind the text — scale 0.92 → 1.12, opacity 0.7 → 1.0. Four soft gradient stops, no hard edge. Sits behind the text where the tighter Glow halo lives in front of it. 4s
The four durations are intentionally non-synchronized so the eye keeps catching new motion without it feeling busy.

Do

  • Reserve for one moment per page — the line you most want remembered
  • Use on a short phrase: an affirmation, a milestone, a hero word
  • Pair with Cormorant Garamond display weight for the text
  • Keep the four animation durations un-synchronized (2.4s / 3s / 2.4s / 4s)
  • Honor prefers-reduced-motion — stop all four layers when set

Don't

  • Don't apply to body paragraphs or repeating UI — the glow becomes noise
  • Don't run two spotlight moments simultaneously on one screen
  • Don't speed up the animations — calm is the brand register
  • Don't replace teal with another hue — this is the brand pairing, not a mood
  • Don't add additional drop-shadow or blur on top of the glow
Implementation — HTML
<div class="spotlight">
  <span class="spotlight-gem" aria-hidden></span>

  <span class="spotlight-text-wrap">
    <span class="spotlight-shine" aria-hidden></span>
    <span class="spotlight-text">Yes</span>
    <!-- 4 sparkles, staggered delays 0 / 0.6 / 1.2 / 1.8s -->
    <span class="spotlight-sparkle" style="top:-18px; left:18%; animation-delay:0s;"></span>
    <span class="spotlight-sparkle" style="top:6px; right:20%; animation-delay:.6s;"></span>
    <span class="spotlight-sparkle" style="bottom:-18px; left:32%; animation-delay:1.2s;"></span>
    <span class="spotlight-sparkle" style="bottom:0; right:24%; animation-delay:1.8s;"></span>
  </span>

  <span class="spotlight-gem" aria-hidden></span>
</div>
Implementation — CSS
/* container + Gems */
.spotlight              { position: relative; display: inline-flex; align-items: center; gap: 24px; }
.spotlight-gem      { width: 16px; height: 16px; background: var(--teal); animation: spotlight-pulse 2.4s ease-in-out infinite; }

/* text + halo */
.spotlight-text-wrap    { position: relative; display: inline-block; }
.spotlight-text         { position: relative; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--white); line-height: 1; animation: spotlight-glow 3s ease-in-out infinite; }

/* teal bloom — breathing radial halo behind the wordmark */
.spotlight-shine        { position: absolute; inset: -60% -35%; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.32) 0%, rgba(20,184,166,.14) 30%, rgba(20,184,166,.05) 55%, transparent 75%); pointer-events: none; animation: spotlight-bloom 4s ease-in-out infinite; }

/* sparkle accents — set width/height/position inline per node */
.spotlight-sparkle      { position: absolute; background: #5eead4; transform: rotate(45deg); opacity: 0; animation: spotlight-twinkle 2.4s ease-in-out infinite; }

@keyframes spotlight-pulse {
  0%, 100% { transform: rotate(45deg) scale(1);    opacity: 1; }
  50%      { transform: rotate(45deg) scale(1.45); opacity: 0.85; }
}
@keyframes spotlight-glow {
  0%, 100% { text-shadow: 0 0 18px rgba(20,184,166,.35), 0 0 36px rgba(20,184,166,.15); }
  50%      { text-shadow: 0 0 32px rgba(20,184,166,.75), 0 0 64px rgba(20,184,166,.35), 0 0 96px rgba(20,184,166,.15); }
}
@keyframes spotlight-twinkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(0.4); }
  50%      { opacity: 1; transform: rotate(45deg) scale(1);   }
}
@keyframes spotlight-bloom {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-gem,
  .spotlight-text,
  .spotlight-shine,
  .spotlight-sparkle    { animation: none !important; }
  .spotlight-sparkle    { opacity: 1; }
}
17 — Email Signature
Apple Mail Signature
A drop-in HTML signature that keeps the GILDRA wordmark + tagline intact in a recipient's inbox. Table-based, inline styles only, system serif fallback for the wordmark — what you see is what every mail client renders. Copy it once, paste it into Mail's signature editor.
Inbox preview
Justin Nutting
Founder
 
GILDRA
Your Beauty App
Copies as rich HTML — paste straight into Mail's signature editor.
Install in Apple Mail
Step 01
Open Mail, then ⌘, for Settings. Click the Signatures tab.
Step 02
Select the account on the left, then click + to create a new signature. Name it Gildra.
Step 03
Hit Copy signature above, then paste into the signature pane with ⌘V.
Step 04
Uncheck "Always match my default message font" — otherwise Mail flattens the wordmark to your compose font.

Customize

  • Change the name and title strings — first two lines above the teal divider
  • Update the website — replace it in both the href and the visible link text
  • Add an email or phone line if you need one — same #0d9488 teal-dark link color, on its own row beside gildra.xyz
  • Don't introduce a third type ramp — match an existing size (14/12/9) when adding lines

Don't

  • Don't drop the Gildra Gem next to the wordmark — the logo is wordmark + tagline only
  • Don't swap teal-dark (#0D9488) for base teal on link text — base teal fails AA on white
  • Don't add a photo, social grid, or banner image — Gildra signatures stay typographic
  • Don't replace the serif fallback chain — Cormorant → Big Caslon → Hoefler keeps the wordmark looking right when Cormorant isn't installed
Source HTML
Auto-generated from the preview above

  










  

    
18 — Assets

    
Downloads

    
Everything you need to put the brand out in the world. Grab the files, don't recreate them.

  


  

    

      
Logo Pack

      
    

    

      
Favicons & App Icons

      
    

    

      
Color & Type

      
    

    

      
Source

      
    

  


  

    Every link above generates a fresh file from this guide. If it isn't here and it isn't generated from index.html, it isn't official.
  







  GILDRA BRAND GUIDELINES — 2026