Jenni and Co

Overview

Jenni and Co is a luxury skincare brand that celebrates inclusive beauty and self-care rituals through thoughtfully formulated products. The design system embodies 'Refined Minimalism with Warmth'—a philosophy that prioritizes clarity, human connection, and timeless elegance over trend-driven aesthetics. The visual language combines a restrained color palette (deep teals, warm golds, and soft neutrals) with generous whitespace and the Assistant typeface, creating an environment that feels both sophisticated and approachable. The brand evokes a sense of calm confidence: users feel they are making an informed, luxurious choice without pretension.

The tone is conversational yet authoritative—Jenni and Co speaks to customers as trusted friends who understand skincare science but never condescend. The vocabulary favors clarity ('healthy, glowing skin' rather than 'luminous complexion'), specificity ('ceramides and hyaluronic acid' rather than 'active ingredients'), and warmth ('gorgeously wrapped' rather than 'premium packaging'). The brand personality is inclusive, evidence-based, and genuinely invested in each customer's skin journey. Example sentence in brand voice: 'Gorgeously wrapped in healthy, glowing skin—that's the Jenni and Co promise.'

Colors

The color system is anchored by three primary roles: a deep teal primary (#108474) used for interactive elements and trust-building CTAs; a warm gold secondary (#d1b939) reserved for accents, badges, and review highlights that celebrate customer testimonials; and a professional blue tertiary (#1773b0) for secondary actions and informational contexts. The primary teal is applied to the 'Check out' button, navigation focus states, and link underlines—it signals action and brand identity without aggression. The secondary gold (#d1b939) appears in the Judgeme review widget (stars, badges, write-review button) and reinforces the brand's celebration of customer voices; it is never used for primary CTAs to maintain hierarchy. The tertiary blue (#1773b0) supports secondary buttons and informationa

Typography

The type system uses a single typeface—Assistant, a humanist sans-serif—across all scales, reinforcing the brand's commitment to clarity and consistency. Display (60px, 400 weight, -0.02em tracking) is reserved for hero headlines and emotional moments; Headline-lg (40px, 400 weight) anchors major sections; Headline-md (28px, 400 weight) introduces subsections; and Title-lg (20px, 400 weight) labels cards and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, 400 weight, 24px line-height) is the default for product descriptions and form labels; Label-md (14px, 400 weight) and Label-sm (12px, 400 weight) handle UI labels, badges, and metadata. All body and label text carries a consistent 0.06rem (approximately 0

Layout

The page layout uses a 12-column grid with a maximum container width of 1280px (120rem), centered with equal margins on desktop. The gutter spacing is 24px (md spacing token) between columns, and section separation uses 40px (lg spacing token) vertically on desktop, reducing to 24px on mobile. Whitespace is treated as a design element: product cards and hero sections are given 40px padding on all sides, creating breathing room that reinforces the luxury positioning. The header uses 20px padding (50px horizontal on desktop) to maintain visual hierarchy without overwhelming the logo. Input fields and form elements use 12px (sm spacing token) internal padding, with 24px margin-bottom between form rows. The grid is fluid on mobile (single column, 12px gutter) and expands to 2–3 columns on tabl

Elevation & Depth

Depth in this system is achieved through subtle, layered shadows rather than color shifts. The base elevation (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, modals, popovers) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests gentle lift. Level 3 (floating action buttons, sticky headers, dropdown menus) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius and vertical offset that conveys greater separation from the base. Buttons and interactive elements do not use shadows in their default state; instead, the

Shapes

The shape language is 'Architectural Clarity'—a philosophy that favors subtle, intentional rounding over extremes. Buttons use 5px border-radius (DEFAULT rounded token), a modest curve that feels modern without appearing playful or overly soft. Cards and containers use 8px (md rounded token) for slightly more breathing room, distinguishing them from buttons while maintaining visual cohesion. Input fields and form elements use 5px (DEFAULT) to align with button styling, creating a unified interaction layer. Badges and pills use 50% border-radius (full rounded token) for their circular, badge-li

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct roles: Primary buttons (teal #108474, 48px height, 12px vertical / 30px horizontal padding, 15px font-size, 400 weight) are used for main CTAs like 'Check out' and 'Add to cart'. On hover, the background transitions to #0d4a38 (darker teal) over 200ms. Secondary buttons (gold #d1b939, same dimensions) are used for secondary actions like 'Learn more' or 'View details'; on hover, they shift to #c4a82a. Tertiary buttons (blue #1773b0, 44px height, 12px vertical / 24px horizontal padding, 16px font-size, 600 weight) support informational or low-priority actions like 'Log in' or 'View all reviews'. All buttons have 5px border-radius and no shadow in default state. Focus state applies a 3px outline at rgba(1

Do's and Don'ts

**Do**

• Do use the primary teal (#108474) exclusively for main CTAs and trust-building elements like 'Check out' and account links—it is the brand's signature accent and must remain visually distinct.
• Do maintain 40px (lg spacing) between major sections on desktop and 24px on mobile to reinforce the luxury positioning through generous whitespace.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel across the interface.
• Do use the Assistant typeface at 400 weight for all body and headline text; reserve 700 weight only for inline emphasis within paragraphs, never for entire headlines.
• Do pair the secondary gold (#d1b939) with review widgets and customer testimonials to celebrate user voices and build social proof without overwhelming the primary teal hierarchy.

**Don't**

• Don't use the secondary gold (#d1b939) for primary CTAs or navigation elements—it is reserved for accents and review highlights to maintain clear action hierarchy.
• Don't apply shadows to buttons or form elements in their default state; use color contrast and typography weight instead to maintain the minimalist aesthetic.
• Don't use border-radius values of 0px (sharp corners) or above 16px (overly rounded) on interactive elements—the 5–8px range is the brand's architectural standard.
• Don't mix typefaces or use system fonts as fallbacks; Assistant is the sole typeface family, and if it fails to load, the fallback is sans-serif only as a last resort.
• Don't reduce letter-spacing below 0.06rem on body text or labels—the brand's readability and open rhythm depend on this consistent tracking across all scales.