The Saujana Hotel
saujanahotels.com“The Saujana Hotel projects an atmosphere of refined, tranquil luxury, blending the serenity of a tropical sanctuary with the precision of a high-end business retreat. The brand feels established and sophisticated, prioritizing calm elegance over modern flashiness, creating a sense of timeless exclusivity.”
Color Palette
Colors
Typography
Fonts
Clarice-Book
Clarice-Medium
Clarice-Bold
Clarice-Bold
The quick brown fox
16pxThe quick brown fox
18pxThe quick brown fox
25pxThe quick brown fox
17pxThe quick brown fox
13pxComponents
Design System
rgba(0, 0, 0, 0.3) 0px 0px 20px 0px
rgba(0, 0, 0, 0.15) 0px 3px 6px 0px
Voice & Tone
Personality
Visual Energy
Design Era
classic-editorial
Emotional Tone
calm-premium
Target Audience
Affluent travelers, business executives, and couples seeking a peaceful, high-end escape near urban centers; values privacy, nature, and sophisticated service.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use Clarice-Medium (400/700 weight) for all headings in Title Case to convey authority and elegance.
- Use Clarice-Book (300/400/600 weight) for body copy with a strict 22px line-height for readability and airy spacing.
- Apply primary button styling with #a8996e background, #ffffff text, 0px border-radius (sharp corners), and 13px 24px 12px padding.
- Use secondary buttons with #ffffff background, #a8996e text, 0px border-radius, and a 1px #a8996e border.
- Maintain a strict flat design aesthetic with no gradients; rely on solid color blocks and whitespace for hierarchy.
- Apply subtle, single-layer shadows only to interactive elements like modals (rgba(0, 0, 0, 0.3) 0px 0px 20px 0px) and navigation bars (rgba(0, 0, 0, 0.15) 0px 3px 6px 0px).
- Use #231f20 for all primary text on #ffffff backgrounds to ensure high contrast and a formal tone.
- Incorporate #cc0000 sparingly as an accent color for critical alerts or specific highlights, avoiding it in primary branding elements.
Don't
- Do not use emoji in any marketing copy or UI elements; the brand tone is serious and formal.
- Do not use exclamation marks in headings or body copy; keep punctuation restrained and professional.
- Do not use rounded corners (border-radius > 0px) on buttons or cards; maintain sharp, editorial geometry.
- Do not use gradients or drop shadows on primary content cards or backgrounds; keep the interface flat and clean.
- Do not use sentence case for headings; strictly adhere to Title Case for all section titles.
- Do not use sans-serif or script fonts; the brand identity is anchored in the Clarice typeface family.
- Do not use #cc0000 for primary buttons or large background areas; reserve it for minor accents to maintain the gold/green luxury palette.
- Do not use dense, jargon-heavy technical language; keep vocabulary advanced but accessible and sensory.
Design Assets
Visual Elements
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/saujanahotels.com \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.