Skip to content
DesignMunkDesignMunk Submit a site

Apini Studio

apinistudio.com
Everyday jewelry for playful spirit
Ecommerce Shopify Tailwind Homepage Be Vietnam Gambetta
Share Visit site
apinistudio.com DESKTOP · 1440
Apini Studio

AI Breakdown

Design export

---
version: alpha
name: Apini Studio
description: Everyday jewelry for playful spirit
colors:
  primary: "#fef5ea"
  secondary: "#5c5464"
  tertiary: "#2e0e17"
  neutral: "#97b7c3"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Be Vietnam Pro
    fontSize: 95px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.002em
  headline-md:
    fontFamily: Gambetta
    fontSize: 61px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: -0.031em
  headline-sm:
    fontFamily: Be Vietnam Pro
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Be Vietnam Pro
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Gambetta
    fontSize: 16px
    fontWeight: 400
    lineHeight: 4.33
    letterSpacing: -0.087em
rounded:
  sm: 8px
  md: 30px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 44px
  xl: 114px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 17px 23px
    height: 45px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 17px 23px
    height: 45px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Àpini Studio: Cream Serif Headlines on Wine-Merlot UI

## Overview

A boutique ecommerce system designed to feel intimate and editorial. The palette is soft and tinted rather than stark, with cream text on a blue-gray surface and wine accents for intent. Type mixes a custom serif for statements with a Google sans for interface elements. Spacing is generous and consistent; sections open up with wide vertical rhythm, while actions are unified by a 30px pill shape.

## Colors

- **primary (#fef5ea):** Cream used as the main text color and for light panels like the newsletter popover.
- **secondary (#5c5464):** Muted plum-gray for secondary text, icons, and quiet affordances.
- **tertiary (#2e0e17):** Wine accent for high-intent elements such as CTAs and emphasized links.
- **neutral (#97b7c3):** Sea-glass blue for backgrounds and cards; the calming base of the interface.
- **border (#374151):** Slate hairline for dividers, input outlines, and subtle separators.
- **surface (#97b7c3):** Default surface color; pair with on-surface for accessible contrast.
- **on-surface (#fef5ea):** Text on the surface; use for headlines, body copy, and form labels.

## Typography

- Be Vietnam Pro (Google, free): the system sans for navigation, UI labels, and many headings. headline-lg 95px/1.2/700 for hero statements; headline-sm 39px/1.21 and headline-xs 25px/1.2 for subheads and product titles. Use it by default where clarity and density matter.
- Gambetta (custom, proprietary): editorial serif for statements and longer copy. headline-md 61px/1.56/400 for prominent headings; body-md 16px/4.33/400 with tight letterspacing (-0.087em) for airy paragraphs and legal lines. Since it's not loadable via Google, substitute Spectral, Cormorant Garamond, or Playfair Display for similar contrast and elegance when Gambetta is unavailable.

## Layout

Spacing follows an 8–16–32–44–114 scale. Use xs (8) and sm (16) for intra-component padding and gaps; md (32) for module spacing; lg (44) for section gutters; xl (114) for major section breaks and hero breathing room. Grid layouts can run 1–2 columns on mobile and 3–4 on desktop for products and magazine, with consistent outer margins based on md–lg. Keep copy widths moderate; the generous line-height handles readability.

## Elevation & Depth

Shadows are disabled at all sizes. Depth relies on tonal layering—surface (#97b7c3) vs. panels in primary (#fef5ea)—and on whitespace from the spacing scale. Use border (#374151) for 1px separators and input outlines. Overlays (search, newsletter) dim the page instead of casting component shadows.

## Shapes

Two radii communicate function. rounded.sm (8px) is for cards and small panels. rounded.md (30px) is a pill for primary actions and inputs; it also appears on badges and chips, making high-intent elements instantly recognizable. Keep actions at the pill radius for consistency.

## Components

- Button Primary: textColor primary (#fef5ea); rounded 30px; padding 17x23; fixed height 45px. Use the wine accent (#2e0e17) as the fill to signal primary intent.
- Button Secondary: same dimensions as primary; use a quieter fill or outline while keeping text in primary.
- Button Link: textColor primary with no radius; reserve for low-friction actions.
- Card: background neutral (#97b7c3), text primary (#fef5ea), rounded 8px, padding 16px. Works for product or editorial tiles.

### Announcement Bar
Compact strip cycling service messages. Surface background (#97b7c3), on-surface text (#fef5ea) in body-md 16px; md (32px) vertical padding; no shadow.

### Navigation Header
Logo, menu, search, wishlist, and cart. Use Be Vietnam Pro for labels, primary text on the surface, and md spacing between controls. Currency selector reuses the pill input.

### Newsletter Popover
Two-column modal with imagery and form. Panel background primary (#fef5ea), headline-md (Gambetta 61px), body-md for copy, input and CTA as 45px-high 30px-radius pills with wine fill (#2e0e17).

### Product Carousel — Pastài
Horizontal scroller of product tiles. Titles in headline-xs (25px) sans; prices in body-md (16px). Tile padding 16px, card radius 8px; CTA chip uses the pill.

### Magazine Cards
Editorial previews using the card token. Maintain wide leading for excerpts (body-md), and use md gaps in the grid.

### Search Drawer
Full-width overlay with a single pill input (45px height, radius 30px). Popular searches listed as inline links using the on-surface color.

### Footer with Newsletter
Multi-column links with a signup row. Section padding xl (114px) top/bottom; input and button reuse the pill; copy in body-md.

### Cookie Consent Banner
Bottom-anchored sheet; text in on-surface, two actions in pill buttons (accept = wine fill, refuse = outline using border color).

## Do's and Don'ts

- Do reserve tertiary (#2e0e17) for high-intent accents and primary CTAs.
- Do pair Gambetta for statements with Be Vietnam Pro for UI to keep hierarchy clear.
- Do keep vertical rhythm consistent: md (32px) between modules, xl (114px) between major sections.
- Do maintain 45px button/input height and 30px radius across breakpoints.
- Don't introduce shadows; use border (#374151) and tonal contrast for separation.
- Don't place cream text on light panels—use on-surface (#fef5ea) only over the neutral surface or dark fills.

## Agent Prompt Guide

Quick color reference — text: #fef5ea, background/surface: #97b7c3, border: #374151, accent/CTA: #2e0e17.

1) Build a newsletter popover (640px max-width) on a dim overlay. Panel bg #fef5ea; heading "Welcome to Àpini Studio!" in Spectral (substitute for Gambetta) 61px/1.56/400, letter-spacing -0.031em. Body in Spectral 16px/4.33/400, letter-spacing -0.087em. Email input: 45px height, 30px radius, padding 17px 23px. Primary button: 45px height, 30px radius, padding 17px 23px, bg #2e0e17, text #fef5ea.

2) Create an announcement bar. Container bg #97b7c3; text #fef5ea in Be Vietnam Pro 16px/1.4/400. Use md (32px) vertical padding and sm (16px) horizontal gaps between "Precedente/Successivo" controls; borders #374151 at 1px if needed.

3) Product carousel ("Pastài Collection"). Four cards per row on desktop, one on mobile. Each card: bg #97b7c3, text #fef5ea, radius 8px, padding 16px. Title in Be Vietnam Pro 25px/1.2/400; price in Spectral 16px/4.33/400. CTA chip: 45px height, 30px radius, bg #2e0e17, text #fef5ea.

4) Footer newsletter block. Section padding top/bottom 114px, grid gaps md (32px). Headline in Be Vietnam Pro 39px/1.21; copy in Spectral 16px/4.33. Input and button reuse the 45px/30px pill; button bg #2e0e17, text #fef5ea.

5) Cookie consent banner. Bar bg #97b7c3; text #fef5ea (Be Vietnam Pro 16px). Primary button: 45px height, 30px radius, bg #2e0e17. Secondary button: 45px height, 30px radius, transparent with 1px border #374151 and text #fef5ea.

## Similar Brands

- Mejuri — similar serif–sans pairing and soft neutrals; Mejuri skews brighter with more white backgrounds.
- Missoma — fashion-forward accents and editorial modules; uses stronger black contrast than Àpini's tinted surface.
- Monica Vinader — calm, minimal product grid with pill CTAs; relies more on photography scale than tonal backgrounds.
- Catbird NYC — understated jewelry ecommerce with serif headlines; Catbird is grainier and more monochrome.
- Ana Luisa — approachable DTC layout and strong CTA color; palette is warmer and more saturated overall.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 4 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 4 days ago