DESIGN.md · Analysis

Phytogrammes

phytogrammes.com · 4 Aug 2026 · 47 colors · Geologica, Roboto

Phytogrammes

A French CBD producer and distributor emphasizing transparency, scientific rigor, and botanical authenticity. The design system balances minimalist restraint with warm, organic accents to convey trust and craftsmanship.

Colors

surface#fbfaf6

surface-dim#ebe8de

surface-bright#ffffff

surface-container-lowest#f1eee7

surface-container-low#f5f3ed

surface-container#ebe8de

surface-container-high#e0ddd3

surface-container-highest#d3d1ca

on-surface#14110d

on-surface-variant#45423c

inverse-surface#1a1612

inverse-on-surface#fef9f0

outline#a29e98

outline-variant#d3d1ca

surface-tint#ed57a9

primary#ed57a9

on-primary#ffffff

primary-container#ffe0ef

on-primary-container#6b1d4a

inverse-primary#ff8fc9

secondary#c20039

on-secondary#ffffff

secondary-container#ffd8e7

on-secondary-container#7d001f

tertiary#14110d

on-tertiary#ffffff

tertiary-container#45423c

on-tertiary-container#fbfaf6

error#c20039

on-error#ffffff

error-container#ffd8e7

on-error-container#7d001f

primary-fixed#ffe0ef

primary-fixed-dim#ed57a9

on-primary-fixed#6b1d4a

on-primary-fixed-variant#a83d7a

secondary-fixed#ffd8e7

secondary-fixed-dim#c20039

on-secondary-fixed#7d001f

on-secondary-fixed-variant#9d1a3a

tertiary-fixed#45423c

tertiary-fixed-dim#14110d

on-tertiary-fixed#fbfaf6

on-tertiary-fixed-variant#d3d1ca

background#fbfaf6

on-background#14110d

surface-variant#d3d1ca

Typography

display: fontFamily: Geologica · fontSize: 60px · fontWeight: 600 · lineHeight: 68px · letterSpacing: -0.02em
headline-lg: fontFamily: Geologica · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.015em
headline-md: fontFamily: Geologica · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Geologica · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: -0.005em
body-lg: fontFamily: Roboto · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Roboto · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Roboto · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Roboto · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

Phytogrammes is a French CBD producer and distributor that prioritizes scientific transparency, botanical authenticity, and honest sourcing. The design system embodies "Refined Minimalism with Organic Warmth"—a philosophy that strips away unnecessary ornamentation while preserving the tactile, natural character of the product. The visual language combines a cool, neutral paper palette (#fbfaf6, #14110d) with a signature hot-pink accent (#ed57a9) that punctuates CTAs, badges, and moments of emphasis. The aesthetic evokes a high-end apothecary: clean, trustworthy, and grounded in craft. The brand voice is precise, educational, and conversational—never breathless or hyperbolic. Example: "Strawberry Payton's Usa: cultivated in France, HPLC-tested per batch, Δ⁹-THC < 0.3%."

Colors

The color system is anchored in a warm, off-white surface (#fbfaf6) paired with deep, near-black ink (#14110d) for maximum legibility and sophistication. This neutral foundation is interrupted by a vibrant primary accent—hot pink (#ed57a9)—used exclusively on call-to-action buttons, interactive focus states, and brand-critical highlights. The secondary color, a deep rose (#c20039), reinforces error states and secondary CTAs. The surface stack progresses from the brightest (#ffffff) through mid-tones (#ebe8de, #d3d1ca) to the darkest container (#14110d), enabling subtle visual hierarchy without relying on color shifts. All surfaces use a 1px inset border at rgba(0, 0, 0, 0.1) to define edges without harsh lines. The outline color (#a29e98) is reserved for input borders and dividers. Shadows

Typography

The type system pairs Geologica (a geometric, contemporary sans-serif) for headlines and display text with Roboto for body copy and UI labels. Geologica's tight letter-spacing (-0.02em on display, -0.015em on headlines) creates visual tension and modernity, while Roboto's neutral warmth ensures readability at small sizes. The hierarchy spans from display (60px, 600 weight, -0.02em tracking) down to label-sm (12px, 500 weight, 0.02em tracking). Body text uses 16px/24px (Roboto, 400 weight) for optimal reading comfort on screens. Headlines are set at 600 weight to convey authority without heaviness. When small labels appear over busy product imagery, apply a text-shadow: 0 1px 2px rgba(20, 17, 13, 0.15) to ensure contrast. The logo uses Futura PT Bold at 24px (desktop) / 19px (mobile) with a

Layout

The layout uses a 12-column grid with a max-width of 1320px, maintaining a fluid, responsive structure that adapts from mobile (4px gutter) to desktop (24px gutter). The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero spacing. Container padding on mobile is 16px; on tablet and above, it increases to 24px (md gutter) or 40px (lg gutter) depending on context. White space is generous—product cards are separated by lg spacing (40px) vertically, and the hero section uses xl spacing (64px) above and below to create breathing room. The grid rhythm emphasizes clarity: narrow text columns (max 60 characters) for body copy, wider columns (up to 8 grid units) for pr

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast. The elevation stack comprises three levels: (1) Base surfaces (cards, inputs) use a soft 1px inset border at rgba(0, 0, 0, 0.1) plus a subtle drop shadow (0 1px 2px rgba(20, 17, 13, 0.08)) to define edges without drama. (2) Elevated surfaces (hovered cards, dropdowns) apply a medium shadow (0 3px 8px rgba(20, 17, 13, 0.15)) and lift the background to surface-container-high (#e0ddd3). (3) Modal and drawer overlays use a deep shadow (0 8px 30px rgba(20, 17, 13, 0.12)) combined with a semi-transparent backdrop (rgba(

Shapes

The shape philosophy is "Soft Geometry"—balancing precision with approachability. Buttons and primary interactive elements use a full pill shape (border-radius: 9999px) to convey friendliness and reduce visual aggression. Cards and containers use a moderate radius (14px / 0.875rem) that feels contemporary without appearing trendy. Input fields and smaller components use 6px (0.375rem) for a subtle, technical feel. The concave radius (28px 4px 28px 4px) is reserved for special accent elements or hero imagery frames. This graduated approach ensures that the most interactive elements (buttons) fe

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses the brand accent (#ed57a9) with white text, full-pill radius (9999px), 48px height, and 12px 32px padding. On hover, the background darkens to #d63a8f and the shadow elevates to 0 3px 8px rgba(20, 17, 13, 0.12). On active/click, the background shifts to the secondary color (#c20039) and applies a 0.96 scale transform for tactile feedback. The secondary button is transparent with a 1px outline border (#a29e98) and the same dimensions; on hover, it fills with surface-container-high (#e0ddd3). The tertiary button uses the dark ink (#14110d) on a transparent background; on hover, it applies the medium shadow and shifts to on-surface (#14110d) with increased opacity. All buttons use label-md typography (1

Do's and Don'ts

**Do**

Do use the hot-pink accent (#ed57a9) exclusively on CTAs, focus states, and brand-critical moments—never on backgrounds or body text.
Do apply the soft shadow stack (0 1px 2px for base, 0 3px 8px for elevated) to create depth without harsh contrast.
Do pair Geologica headlines with Roboto body copy to balance modernity with readability; maintain -0.02em tracking on display text.
Do use the full-pill button radius (9999px) on all primary CTAs to signal interactivity and approachability.
Do respect the 24px (md) gutter for section separation and 12px (sm) for component padding to maintain visual rhythm.
Do apply a 1px inset border at rgba(0, 0, 0, 0.1) to all card surfaces to define edges without harsh lines.

**Don't**

Don't use the secondary color (#c20039) for primary CTAs—reserve it for error states and secondary actions only.
Don't apply shadows larger than 0 8px 30px rgba(20, 17, 13, 0.12); the system prioritizes subtlety over drama.
Don't mix Geologica and Roboto weights arbitrarily; use 600 weight for all Geologica headlines and 400 weight for Roboto body text.
Don't apply border-radius smaller than 4px (sm) on interactive elements; the system uses 6px (DEFAULT) as the minimum for inputs and 14px (md) for cards.
Don't use pure white (#ffffff) as a background; use surface (#fbfaf6) or surface-bright (#ffffff) only for inputs and elevated surfaces.
Don't apply focus rings smaller than 2px or in colors other than primary (#ed57a9); keyboard accessibility is non-negotiable.

---
version: alpha
name: Phytogrammes
description: >-
  A French CBD producer and distributor emphasizing transparency, scientific rigor, and botanical authenticity. The
  design system balances minimalist restraint with warm, organic accents to convey trust and craftsmanship.
logo:
  src: https://phytogrammes.com/seo/logo-phytogrammes.svg
colors:
  surface: '#fbfaf6'
  surface-dim: '#ebe8de'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f1eee7'
  surface-container-low: '#f5f3ed'
  surface-container: '#ebe8de'
  surface-container-high: '#e0ddd3'
  surface-container-highest: '#d3d1ca'
  on-surface: '#14110d'
  on-surface-variant: '#45423c'
  inverse-surface: '#1a1612'
  inverse-on-surface: '#fef9f0'
  outline: '#a29e98'
  outline-variant: '#d3d1ca'
  surface-tint: '#ed57a9'
  primary: '#ed57a9'
  on-primary: '#ffffff'
  primary-container: '#ffe0ef'
  on-primary-container: '#6b1d4a'
  inverse-primary: '#ff8fc9'
  secondary: '#c20039'
  on-secondary: '#ffffff'
  secondary-container: '#ffd8e7'
  on-secondary-container: '#7d001f'
  tertiary: '#14110d'
  on-tertiary: '#ffffff'
  tertiary-container: '#45423c'
  on-tertiary-container: '#fbfaf6'
  error: '#c20039'
  on-error: '#ffffff'
  error-container: '#ffd8e7'
  on-error-container: '#7d001f'
  primary-fixed: '#ffe0ef'
  primary-fixed-dim: '#ed57a9'
  on-primary-fixed: '#6b1d4a'
  on-primary-fixed-variant: '#a83d7a'
  secondary-fixed: '#ffd8e7'
  secondary-fixed-dim: '#c20039'
  on-secondary-fixed: '#7d001f'
  on-secondary-fixed-variant: '#9d1a3a'
  tertiary-fixed: '#45423c'
  tertiary-fixed-dim: '#14110d'
  on-tertiary-fixed: '#fbfaf6'
  on-tertiary-fixed-variant: '#d3d1ca'
  background: '#fbfaf6'
  on-background: '#14110d'
  surface-variant: '#d3d1ca'
typography:
  display:
    fontFamily: Geologica
    fontSize: 60px
    fontWeight: '600'
    lineHeight: 68px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Geologica
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.015em'
  headline-md:
    fontFamily: Geologica
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Geologica
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: '-0.005em'
  body-lg:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 4px
  DEFAULT: 6px
  md: 14px
  lg: 18px
  xl: 28px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1320px
elevation:
  sm: 0 1px 2px rgba(20, 17, 13, 0.06)
  md: 0 3px 8px rgba(20, 17, 13, 0.15)
  lg: 0 8px 30px rgba(20, 17, 13, 0.12)
layout:
  containerMaxWidth: 1320px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    boxShadow: 0 1px 2px rgba(20, 17, 13, 0.08)
  button-primary-hover:
    backgroundColor: '#d63a8f'
    boxShadow: 0 3px 8px rgba(20, 17, 13, 0.12)
  button-primary-active:
    backgroundColor: '#c20039'
    transform: scale(0.96)
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    border: 1px solid {colors.outline}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  button-tertiary:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
  button-tertiary-hover:
    backgroundColor: '{colors.on-surface}'
    boxShadow: 0 3px 8px rgba(20, 17, 13, 0.15)
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    boxShadow: 0 1px 2px rgba(20, 17, 13, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: 0 3px 8px rgba(20, 17, 13, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.08)
  input-field:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
    boxShadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06)
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: inset 0 0 0 2px rgba(237, 87, 169, 0.1), 0 0 0 3px rgba(237, 87, 169, 0.2)
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-flex
    alignItems: center
  badge-accent:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    transition: background-color 200ms ease-out, color 200ms ease-out
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  navigation-link:
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    transition: color 200ms ease-out, border-color 200ms ease-out
    borderBottom: 1px solid transparent
    paddingBottom: 6px
  navigation-link-active:
    textColor: '{colors.primary}'
    borderBottomColor: '{colors.primary}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. The primary button uses the brand accent (#ed57a9) with white text, full-pill radius (9999px), 48px height, and 12px 32px padding. On hover, the background darkens to #d63a8f and the shadow elevates to 0 3px 8px rgba(20, 17, 13, 0.12). On active/click, the background shifts to the secondary color (#c20039) and applies a 0.96 scale transform for tactile feedback. The secondary button is transparent with a 1px outline border (#a29e98) and the same dimensions; on hover, it fills with surface-container-high (#e0ddd3). The tertiary button uses the dark ink (#14110d) on a transparent background; on hover, it applies the medium shadow and shifts to on-surface (#14110d) with increased opacity. All buttons use label-md typography (1

## Do's and Don'ts

**Do**
- Do use the hot-pink accent (#ed57a9) exclusively on CTAs, focus states, and brand-critical moments—never on backgrounds or body text.
- Do apply the soft shadow stack (0 1px 2px for base, 0 3px 8px for elevated) to create depth without harsh contrast.
- Do pair Geologica headlines with Roboto body copy to balance modernity with readability; maintain -0.02em tracking on display text.
- Do use the full-pill button radius (9999px) on all primary CTAs to signal interactivity and approachability.
- Do respect the 24px (md) gutter for section separation and 12px (sm) for component padding to maintain visual rhythm.
- Do apply a 1px inset border at rgba(0, 0, 0, 0.1) to all card surfaces to define edges without harsh lines.

**Don't**
- Don't use the secondary color (#c20039) for primary CTAs—reserve it for error states and secondary actions only.
- Don't apply shadows larger than 0 8px 30px rgba(20, 17, 13, 0.12); the system prioritizes subtlety over drama.
- Don't mix Geologica and Roboto weights arbitrarily; use 600 weight for all Geologica headlines and 400 weight for Roboto body text.
- Don't apply border-radius smaller than 4px (sm) on interactive elements; the system uses 6px (DEFAULT) as the minimum for inputs and 14px (md) for cards.
- Don't use pure white (#ffffff) as a background; use surface (#fbfaf6) or surface-bright (#ffffff) only for inputs and elevated surfaces.
- Don't apply focus rings smaller than 2px or in colors other than primary (#ed57a9); keyboard accessibility is non-negotiable.

Edit, then copy or download.