Skip to content
DesignMunkDesignMunk Submit a site

Absolute Collagen

absolutecollagen.com
Proven. Pure. Powerful.
Ecommerce Health Astro Homepage neue-haas-grotesk Rhymes
Share Visit site
absolutecollagen.com DESKTOP · 1440
Absolute Collagen

AI Breakdown

Design export

---
version: alpha
name: Absolute Collagen
description: Proven. Pure. Powerful.
colors:
  primary: "#14171a"
  secondary: "#968c1e"
  tertiary: "#ffeb0e"
  neutral: "#fffdf0"
  border: "#e5e7eb"
  brand-el-paso: "#3b3a2b"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Rhymes Display
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Rhymes Display
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.23
    letterSpacing: -0.013em
  headline-sm:
    fontFamily: neue-haas-grotesk-text
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: -0.011em
  headline-xs:
    fontFamily: neue-haas-grotesk-text
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
    letterSpacing: -0.003em
  body-md:
    fontFamily: neue-haas-grotesk-text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.005em
rounded:
  sm: 8px
spacing:
  xs: 2px
  sm: 14px
  md: 36px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: 0px
    padding: 16px 24px
    height: 44px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 24px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Absolute Collagen: Safety-Yellow Header, Square Black CTAs

## Overview

Direct-to-consumer beauty and wellness with a retail-first tone. The UI aims for confident and trustworthy rather than luxe: high contrast text, assertive CTAs, and bright brand yellow used as a functional surface. Density leans compact (14px body) with consistent negative tracking in headlines. When a token isn't defined, prefer clarity, speed, and strong contrast over ornament.

## Colors

- Primary (#14171a): Deep ink for headlines, core text, and primary buttons.
- Secondary (#968c1e): Olive brass accent for subtle emphasis, badges, or meta text.
- Tertiary (#ffeb0e): Brand yellow for headers, promos, and highlight panels.
- Neutral (#fffdf0): Porcelain background for pages and cards.
- Border (#e5e7eb): Hairline grey for separators, tables, and form outlines.
- Brand-el-paso (#3b3a2b): Earthy dark olive for occasional brand accents or over yellow.
- Surface (#fffdf0): Default surface color matching neutral for content areas.
- On-surface (#14171a): Text and icon color on neutral and light surfaces.

## Typography

- Rhymes Display (headlines lg/md): Custom/self-hosted. Use for H1–H2 at 36px and 28px, weight 500 with slight negative tracking for a confident brand voice. If unavailable, substitutes with similar contrast and elegance: Playfair Display, Cormorant, or Lora.
- Neue Haas Grotesk Text (headline-sm/xs, body-md): Custom/self-hosted. Use for utility headings at 22px/18px and body at 14px/1.5. Functional, compact UI copy. If unavailable, substitute Inter, IBM Plex Sans, or Source Sans 3.

## Layout

Spacing is modular: 2px (xs) for hairline offsets, 14px (sm) for nav/link gutters, 36px (md) for component gaps, 48px (lg) for section padding, and 80px (xl) for major vertical rhythm. Use a 12-column responsive grid with 36–48px outer gutters on desktop. Keep content blocks compact and align CTAs to the grid to match the system's retail efficiency.

## Elevation & Depth

Shadows are not used. Hierarchy relies on strong tonal blocks (tertiary vs neutral), 1px borders (#e5e7eb), and generous whitespace at lg/xl steps. Emphasize interactive zones with color inversions (ink on yellow or neutral).

## Shapes

Buttons are square (0px radius) to signal decisive action. Informational containers and cards use rounded.sm at 8px for approachability. Avoid mixing other radii; use 8px for content surfaces only and keep inputs/buttons square unless explicitly stated.

## Components

### Button — Primary
- Background #14171a, text #fffdf0, 44px height, 16px × 24px padding, 0px radius. Use for main actions.

### Button — Secondary
- Text #14171a, transparent fill by default, 44px height, 16px × 24px padding, 0px radius. Use for secondary actions on neutral or yellow.

### Button — Link
- Text #14171a, 0px radius. Use for lightweight inline actions.

### Card
- Background #fffdf0, text #14171a, 16px padding, 8px radius. Add a 1px #e5e7eb border when separation is needed.

### Top Promo Bar
- Full-width strip using #14171a text over a dark band; concise copy like "Free Delivery | Shop Now." Height aligns to sm–md spacing; links styled as button-link.

### Primary Navigation Header
- Full-bleed band in #ffeb0e with centered brand mark. Nav links in #14171a at body-md (14px). Use md (36px) vertical padding and maintain even sm (14px) item gaps.

### Cookie Consent Banner
- Neutral (#fffdf0) surface with #14171a copy. Primary/secondary buttons follow button specs. Provide clear category toggles and a link-styled "Manage cookies."

### Cookie Settings Drawer
- Neutral background with section dividers in #e5e7eb. Category tabs at headline-xs (18px/500). Provider lists use body-md (14px) with accordion groups and md (36px) spacing between groups.

## Do's and Don'ts

- Do reserve #ffeb0e for structural highlights (header, promos) and avoid using it for long body backgrounds.
- Do keep CTAs at 44px tall, 0px radius; pair with #fffdf0 text for contrast.
- Do use #e5e7eb borders to separate dense tables and cookie lists instead of shadows.
- Don't place yellow text on #fffdf0 or use ink text over overly busy imagery.
- Don't mix additional radii; cards at 8px, interactive controls stay square.
- Don't exceed 14px body without revisiting line length; this system assumes compact copy.

## Agent Prompt Guide

Quick color reference:
- Text: #14171a
- Background: #fffdf0
- Border: #e5e7eb
- Accent: #ffeb0e

1) Build a hero band
- Section background: #ffeb0e with lg (48px) top/bottom padding.
- H1: Rhymes Display, 36px, weight 500, line-height 1.19, letter-spacing -0.01em, color #14171a.
- Body: neue-haas-grotesk-text, 14px, line-height 1.5, color #14171a.
- Primary CTA: 44px height, padding 16px 24px, background #14171a, text #fffdf0, radius 0px.

2) Sticky header with promo
- Top promo strip: background #14171a with #fffdf0 text, xs (2px) divider below in #e5e7eb.
- Main nav bar: background #ffeb0e, links in #14171a at 14px, sm (14px) horizontal gaps, md (36px) vertical padding.

3) Product card grid
- Card: background #fffdf0, 1px border #e5e7eb, radius 8px, padding 16px.
- Title: neue-haas-grotesk-text at 22px (headline-sm), weight 500, color #14171a.
- Price/desc: body-md 14px.
- CTA inside card uses primary button spec (44px, #14171a on #fffdf0).

4) Cookie settings accordion
- Container: background #fffdf0 with section title in Rhymes Display 28px/1.23.
- Category tabs: neue-haas-grotesk-text 18px/500.
- Provider rows: body-md 14px with 1px #e5e7eb dividers and md (36px) group spacing.
- Actions: secondary button for toggles; primary button for "Allow all."

## Similar Brands

- Mailchimp: Black-on-yellow header energy and compact sans body; Mailchimp is looser with illustration, while Absolute Collagen stays retail-focused.
- Bumble: Heavy use of saturated yellow and crisp sans; Bumble's rounded components differ from this system's square CTAs.
- Snapchat: Iconic yellow canvas with high-contrast black type; Snapchat is more minimal and icon-driven, while this page is commerce-oriented.
- IKEA: Bold color blocks and utilitarian typography; IKEA adds blue as a second brand pillar and uses larger type scales.

More like this

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