WITHYN

BY KIKI← Back to Home

Design Stylesheet

This comprehensive design system showcases the visual identity, typography, colors, and layout patterns used throughout the Withyn by Kiki website. Use this as a reference for maintaining design consistency.

Color Palette

Our warm, sophisticated color palette reflects the inviting and elegant nature of our interior design approach.

Primary Warm Brown

#8b7355

Main brand color for accents and highlights

Secondary Dark Brown

#6b5d54

Darker tone for text and contrast

Warm Cream Background

#f8f5f2

Soft background color for sections

Light Taupe Accent

#d4c4b0

Subtle accent for borders and highlights

Semantic Colors

Text Colors

Primary Text Example

text-foreground

Secondary text example

text-muted-foreground

Link/accent text example

text-primary

Background Colors

Main background

bg-background

Card backgrounds

bg-card

Muted backgrounds

bg-muted

Interactive Colors

Hover states example

hover:text-primary

Custom borders

border-[#8b7355]

Error states

bg-destructive

Typography

Our typography system leverages Adobe Typekit fonts: the elegant New Spirit serif family for headings and the professional Aktiv Grotesk family (including condensed variants) for body text and brand elements, creating a sophisticated balance of organic warmth and clean functionality that perfectly reflects our interior design aesthetic.

Available Adobe Typekit Fonts

New Spirit Family (Serif)

Available Variants

New Spirit Regular (400)

New Spirit Medium (500)

New Spirit Bold (700)

New Spirit Condensed (400)

New Spirit Condensed Bold (700)

CSS Classes
.tk-new-spirit.tk-new-spirit-condensed

Aktiv Grotesk Family (Sans-serif)

Available Variants

Aktiv Grotesk Thin (200)

Aktiv Grotesk Regular (400)

Aktiv Grotesk Bold (700)

Aktiv Grotesk Condensed Thin (200)

Aktiv Grotesk Condensed Light (300)

Aktiv Grotesk Condensed Regular (400)

Aktiv Grotesk Condensed Medium (500)

Aktiv Grotesk Condensed Bold (700)

CSS Classes
.tk-aktiv-grotesk-thin.tk-aktiv-grotesk.tk-aktiv-grotesk-condensed

Brand Typography

Brand Title (Primary Wordmark)

Font:New Spirit Medium
CSS:.tk-new-spirit font-medium
WITHYN

Brand Subtitle (Aktiv Grotesk Condensed Medium)

Font:Aktiv Grotesk Condensed Medium
CSS:.tk-aktiv-grotesk-condensed font-medium uppercase brand-subtitle-tracking
BY KIKI

Perfect Implementation: Now using the actual Aktiv Grotesk Condensed Medium (500) font from your Typekit kit. The condensed width and medium weight create the ideal semibold condensed effect for the brand subtitle, providing strong contrast with the serif main brand name while maintaining excellent readability in all caps.

Typography Usage Guidelines

When to Use New Spirit Family (Serif)

  • • Primary brand name (WITHYN) - Medium weight
  • • Page titles and main headings (H1, H2) - Regular/Medium
  • • Section headers for emotional impact - Regular
  • • Decorative quotes and callouts - Regular/Italic
  • • Philosophy statements and taglines - Condensed variants

When to Use Aktiv Grotesk Family (Sans-serif)

  • • Body text and paragraphs (Regular 400)
  • • Navigation and UI elements (Regular 400)
  • • Buttons and interactive elements (Regular/Bold)
  • • Forms and input labels (Regular)
  • • Subsection headings (H3, H4) (Bold 700)
  • • Brand subtitle (Condensed Medium 500)
  • • Technical specifications (Thin 200 for details)
  • • Space-efficient text (Condensed variants)

Typekit Integration Best Practices

Complete Font Family: With the full Aktiv Grotesk Condensed family now available, use the condensed variants for space-efficient layouts, secondary brand elements, and when you need strong typographic contrast. The condensed medium weight (500) is perfect for semibold effects without being as heavy as bold (700).

Logo & Brand Assets

Primary Logo

WITHYN
BY KIKI

Quote & Callout Styles

Philosophy Quote

“Thoughtfully designed, effortlessly lived in.”

Font: New Spirit • Style: italic, text-lg

Layout Patterns

Design System Notes: This stylesheet serves as the single source of truth for all visual elements used across the Withyn by Kiki website. With the complete Aktiv Grotesk Condensed family now available, maintain consistency by referencing these patterns when adding new content or features.

Font: Aktiv Grotesk, text-sm