Tadjidine Soefou

Generated Oct 22, 2026

DESIGN.md for suntorybeverageandfood-europe.com

suntorybeverageandfood-europe.com/fr-fr/france8 colors5 componentsRoboto

Remix

12 screenshots captured· suntorybeverageandfood-europe.com

1 / 12 · Home | Suntory Beverage and Food France · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Suntorybeverageandfood-europe
description: |
  This design system embodies a modern, corporate aesthetic with a distinctly
  teal-forward personality. The palette centers on a confident teal brand accent
  (#3398B1), which anchors primary actions, brand markers, and interactive
  elements across the interface. The system favours cleanliness and minimal
  ornamentation—sharp-edged cards, pill-shaped buttons, and generous whitespace
  create a professional, accessible atmosphere. Neutral typography rendered in
  Roboto sits cleanly against white backgrounds with strategic color-blocking;
  depth is achieved through surface colour shifts rather than layered shadows,
  lending the design a flat, contemporary feel. The overall impression is that
  of a global corporate entity that prioritizes clarity and functional elegance
  over visual complexity.
source:
  url: "https://suntorybeverageandfood-europe.com/fr-fr/france/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-22
  tokensMeasured: true
colors:
  primary: "#3398B1"
  accent: "#038FB1"
  link: "#5BC2DC"
  surface-alt: "#F7FCFD"
  ink: "#000000"
  body: "#212529"
  neutral-1: "#333333"
  neutral-2: "#181717"
typography:
  heading-lg:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  heading-lg-tight:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: Roboto
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm-loose:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  heading-xs:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-xl:
    fontFamily: Roboto
    fontSize: 20.8px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: Roboto
    fontSize: 17.6px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-uppercase:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  body-md-strong:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  body-md-2:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  button-sm:
    fontFamily: Roboto
    fontSize: 14.4px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  button-xs:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  label:
    fontFamily: Roboto
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: Roboto
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 60px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.1) 0px 4px 6px 0px"
  md: "rgba(0, 0, 0, 0.3) 0px 1px 4px -1px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7FCFD"
    surfaceRaised: "#EDF2F3"
    text: "#000000"
    textMuted: "#212529"
    border: "#E0E0E0"
    accent: "#3398B1"
    accentFg: "#000000"
    focusRing: "#3398B1"
    elevation: shadow
  dark:
    bg: "#0B1113"
    surface: "#1A1F21"
    surfaceRaised: "#262B2D"
    text: "#F7FBFC"
    textMuted: "#9DA2A3"
    border: "#323739"
    accent: "#3398B1"
    accentFg: "#0B0B0C"
    focusRing: "#3398B1"
    elevation: "border+surface"
components:
  button-filled:
    typography: "{typography.body-md-strong}"
    textColor: "rgb(255, 255, 255)"
    border: "1px solid {colors.accent}"
    height: 36px
    padding: "5px 25px 5px 25px"
    rounded: 20px
    backgroundColor: "{colors.accent}"
  button-filled-lg:
    typography: "{typography.body-lg}"
    textColor: "rgb(255, 255, 255)"
    border: "1px solid {colors.accent}"
    height: 36.4062px
    padding: "4px 20px 4px 20px"
    rounded: 20px
    backgroundColor: "{colors.accent}"
  button-primary:
    typography: "{typography.body-md-strong}"
    textColor: "rgb(255, 255, 255)"
    height: 40px
    padding: "8px 20px 8px 20px"
    rounded: 20px
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    height: 47px
    padding: "8px 8px 15px 8px"
  button-text-sm:
    height: 20px
    fontSize: 0px
    fontFamily: Roboto
    fontWeight: 400
    lineHeight: 0px
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    height: 71px
    padding: "8px 0px 8px 0px"
    backgroundColor: "rgb(255, 255, 255)"
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    padding: "50px 0px 0px 0px"
  link:
    typography: "{typography.body-md-2}"
    textColor: "{colors.link}"
  link-2:
    typography: "{typography.body-md}"
    textColor: "{colors.link}"
states:
  link-hover:
    target: link
    state: hover
    textDecoration: none
  input-disabled:
    target: input
    state: disabled
    opacity: 1
  other-focus:
    target: other
    state: focus
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
    borderColor: "rgb(134, 183, 254)"
  other-disabled:
    target: other
    state: disabled
    opacity: 1
  input-focus:
    target: input
    state: focus
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
    borderColor: "rgb(134, 183, 254)"
  input-active:
    target: input
    state: active
    filter: "brightness(90%)"
  button-disabled:
    target: button
    state: disabled
    filter: none
    opacity: 0.65
  other-active:
    target: other
    state: active
    backgroundColor: "rgb(182, 212, 254)"
  nav-focus-visible:
    target: nav
    state: focus-visible
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
  other-hover:
    target: other
    state: hover
    textDecoration: none
  button-hover:
    target: button
    state: hover
    textDecoration: none
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 741
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 960
    gridColumns: 8
    navLinksVisible: 7
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1140
    gridColumns: 8
    navLinksVisible: 7
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1320
    gridColumns: 8
    navLinksVisible: 7
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 61
  gradientsFound: 0
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Suntory Beverage and Food

1. Visual Theme & Atmosphere

This design system embodies a modern, corporate aesthetic with a distinctly teal-forward personality. The palette centers on a confident teal brand accent ({colors.primary} — #3398B1), which anchors primary actions, brand markers, and interactive elements across the interface. The system favours cleanliness and minimal ornamentation—sharp-edged cards, pill-shaped buttons, and generous whitespace create a professional, accessible atmosphere. Neutral typography rendered in Roboto sits cleanly against white backgrounds with strategic color-blocking; depth is achieved through surface colour shifts rather than layered shadows, lending the design a flat, contemporary feel. The overall impression is that of a global corporate entity that prioritizes clarity and functional elegance over visual complexity.

Key Characteristics

Bold teal primary brand colour driving all major CTAs and interactive focus states
Minimal shadow treatment; depth primarily from colour blocking and surface shifts
Pill-shaped button treatment ({rounded.full}) creating friendly, rounded aesthetics
Sharp-edged cards and content containers ({rounded.none}) for structured, modern feel
Generous spacing scales supporting breathing room and visual hierarchy
Monochromatic neutral palette grounded in pure black ({colors.ink}) for headings and dark grays for body text
Roboto as the singular, consistent typeface across all scales
Accessible, high-contrast text-on-white rendering strategy

2. Color Palette & Roles

Primary

Primary Brand ({colors.primary} — #3398B1): Fills primary CTAs, brand accent in hero bands, active state indicator, and foundational brand visual identity
Accent ({colors.accent} — #038FB1): Secondary accent for hero bands and branded visual moments requiring deeper teal
Link ({colors.link} — #5BC2DC): Inline hyperlink colour, maintaining brand warmth while signalling interactivity

Neutral Scale

Ink ({colors.ink} — #000000): Headings, primary text, and maximum-contrast elements
Body ({colors.body} — #212529): Body copy, secondary headings, and standard text elements
Neutral 1 ({colors.neutral-1} — #333333): Decorative neutral; exact role unassigned
Neutral 2 ({colors.neutral-2} — #181717): Decorative neutral; exact role unassigned

Surface & Backgrounds

Surface Alt ({colors.surface-alt} — #F7FCFD): Alternating section bands and background tints creating visual rhythm without contrast disruption

3. Typography Rules

Font Family

Primary: Roboto (https://fonts.googleapis.com/)
Fallback Stack: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / Hero	Roboto	32px	500	1.2–1.5	0px	Largest readable scale; appears as `{typography.heading-lg}` and `{typography.heading-lg-tight}`
Heading 1	Roboto	32px	500	1.5	0px	`{typography.heading-lg}` — standard h1 treatment
Heading 2	Roboto	28px	500	1.2	0px	`{typography.heading-md}` — h3 equivalent
Heading 3	Roboto	24px	500	1.2–1.5	0px	`{typography.heading-sm}` and `{typography.heading-sm-loose}` — h4 scale
Heading 4	Roboto	16px	600	1.5	0px	`{typography.heading-xs}` — h5 equivalent, rare
Body Large	Roboto	20.8px	400	1.5	0px	`{typography.body-xl}` — featured prose
Body Medium	Roboto	17.6px	500	1.5	0px	`{typography.body-lg}` — semi-bold paragraph alternative
Body Standard	Roboto	16px	400	1.5	0px	`{typography.body-md}` — default paragraph and body text
Body Medium Strong	Roboto	16px	500	1.5	0px	`{typography.body-md-strong}` — emphasis within body, uppercase transform applied
Body Medium Uppercase	Roboto	16px	400	1.5	0px	`{typography.body-md-uppercase}` — link-adjacent treatment with text-transform uppercase
Body Medium Bold Uppercase	Roboto	16px	700	1.5	0px	`{typography.body-md-2}` — strong uppercase variant for labels and captions
Button Large	Roboto	17.6px	600	1.5	0px	`{typography.button-sm}` — button text, uppercase transform
Button Standard	Roboto	14px	600	1.5	0px	`{typography.button-xs}` — primary button label, uppercase transform
Label / Small	Roboto	14.4px	400	1.5	0px	`{typography.label}` — form labels, input hints
Caption / Tiny	Roboto	10px	400	1.4	0px	`{typography.caption}` — micro text, attribution, footnotes

Principles

Single typeface discipline: Roboto carries the entire hierarchy without secondary fonts, ensuring visual cohesion and reducing cognitive load.
Weight-driven distinction: Size alone is rarely the differentiator; weight shifts (400 → 500 → 600 → 700) create clear separation between roles.
Uppercase as signal: Button and label text uniformly employ text-transform: uppercase, signalling actionability and form-level semantics.
Measured line-height: Standard body uses 1.5 (24px on 16px base) for comfortable reading; tighter headings (1.2) create visual compression at scale.
Letter-spacing neutrality: All roles maintain 0px letter spacing, preserving Roboto's native spacing logic and ensuring no artificial widening or compression.
Consistent baseline: Despite size variation, all text elements share a common baseline rhythm, supporting visual alignment across sections.

4. Component Stylings

Buttons

Primary Button (`primary`)

Background: {colors.primary} (#3398B1)
Text Color: #FFFFFF
Font: {typography.body-md} (16px, weight 500, line-height 24px)
Padding: 8px 20px
Height: 40px
Width: auto (min 261px observed)
Border: 0px none
Border-Radius: {rounded.full} (9999px — pill-shaped)
Box-Shadow: none

Filled Button (`filled`)

Background: {colors.accent} (#038FB1)
Text Color: #FFFFFF
Font: {typography.body-md} (16px, weight 500, line-height 24px)
Padding: 5px 25px
Height: 36px
Width: auto (min 228px observed)
Border: 1px solid {colors.accent} (#038FB1)
Border-Radius: {rounded.full} (9999px — pill-shaped)
Box-Shadow: none

Filled Large Button (`filled-lg`)

Background: {colors.accent} (#038FB1)
Text Color: #FFFFFF
Font: {typography.body-lg} (17.6px, weight 500, line-height 26.4px)
Padding: 4px 20px
Height: 36.4px
Width: auto (min 238px observed)
Border: 1px solid {colors.accent} (#038FB1)
Border-Radius: {rounded.full} (9999px — pill-shaped)
Box-Shadow: none

Text Button (`text`)

Background: transparent
Text Color: {colors.neutral-1} (#333333)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Padding: 8px 8px 15px 8px
Height: 47px
Border: 0px none
Border-Radius: {rounded.none} (0px — sharp)
Box-Shadow: none

Text Small Button (`text-sm`)

Background: transparent
Text Color: transparent
Font-Size: 0px
Padding: 0px
Height: 20px
Width: 20px
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none
Note: Icon-only button with zero text rendering

Hover / Focus / Active / Disabled:

Hover: Background shifts to var(--bs-secondary-bg) (derived secondary background); text colour remains white.
Focus-Visible: Applies box-shadow: var(--bs-btn-focus-box-shadow) and transitions to hover background colour.
Active: Background becomes var(--bs-btn-active-bg) with box-shadow: var(--bs-btn-focus-box-shadow).
Disabled: Opacity reduced to var(--bs-btn-disabled-opacity) (0.65), background becomes var(--bs-btn-disabled-bg), border becomes var(--bs-btn-disabled-border-color).

Cards & Containers

Default Card (`default`)

Background: transparent
Text Color: {colors.body} (#212529)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Padding: 0px (no internal padding; layout-driven)
Height: auto (232px observed on specific content)
Width: auto (402px observed on specific viewport)
Border: 0px none
Border-Radius: {rounded.none} (0px — sharp edges)
Box-Shadow: none

Default Large Card (`default-lg`)

Background: transparent
Text Color: {colors.body} (#212529)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Padding: 0px
Height: auto (538px observed on specific content)
Width: auto (402px observed)
Border: 0px none
Border-Radius: {rounded.none} (0px — sharp edges)
Box-Shadow: none

Interaction & State:

Cards do not layer shadows; depth is expressed through background colour shifts and strategic whitespace.
No hover elevation observed; cards remain flat or transition via colour-blocking.

Navigation

Default Navigation (`default`)

Background: #FFFFFF
Text Color: {colors.body} (#212529)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Height: 71px
Width: full (1440px observed at desktop)
Padding: 8px 0px
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none

Responsive Collapse:

Desktop (1024px+): 7 nav links visible, no toggle.
Tablet & Mobile (< 1024px): Menu toggle appears, links collapse into offcanvas or dropdown.

Link Styling within Navigation:

Hover: Color becomes var(--bs-nav-link-hover-color).
Focus-Visible: Applies box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem and outline 0px.
Disabled: Color becomes var(--bs-nav-link-disabled-color).

Inputs & Forms

Text Input (Base)

Background: var(--bs-body-bg) (white)
Text Color: {colors.body} (#212529)
Font: {typography.label} (14.4px, weight 400, line-height 1.5)
Border: 1px solid (colour unspecified; inferred as neutral border)
Border-Radius: {rounded.sm} (4px — subtle rounding)
Padding: (not explicitly measured; inferred from baseline form rhythm)
Box-Shadow: none (default state)

Focus State:

Border-Color: rgb(134, 183, 254) (light blue focus ring)
Box-Shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem
Outline: 0px
Transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) (floating label effect on focus)
Background: var(--bs-body-bg)
Border-Radius: var(--bs-border-radius)

Disabled State:

Opacity: 0.5
Background: var(--bs-secondary-bg)
Filter: none

Active State:

Filter: brightness(90%)

Links

Link Default (`default`)

Text Color: {colors.link} (#5BC2DC)
Font: {typography.body-md-2} (16px, weight 700, line-height 24px)
Text-Decoration: none (default)
Padding: 0px
Height: auto (24px measured)
Width: auto (64px observed)
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none

Link Default 2 (`default-2`)

Text Color: {colors.link} (#5BC2DC)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Text-Decoration: none (default)
Padding: 0px
Height: auto
Width: auto
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none

Hover State:

Color inherits context or shifts to RGBA(61,213,243,var(--bs-link-opacity,1)) (lighter teal).
Text-Decoration remains none.

5. Layout Principles

Spacing System

The system employs a modular, 4px-based spacing scale:

{spacing.xxs} = 4px — micro gaps, inline element separation
{spacing.xs} = 8px — tight spacing between form elements, icon-text pairs
{spacing.sm} = 12px — small padding within compact components
{spacing.md} = 16px — standard padding inside containers, default gap unit
{spacing.lg} = 20px — loose component spacing, section dividers
{spacing.xl} = 24px — generous internal padding, feature spacing
{spacing.xxl} = 32px — large section breaks, major content separation
{spacing.xxxl} = 40px — hero-scale gaps
{spacing.section} = 48px — standard section vertical padding
{spacing.band} = 60px — full-width band and alternate-surface padding

Context:

Page margins & gutters: Typically use {spacing.md} (16px) or {spacing.lg} (20px) on all sides.
Card internals: {spacing.md} (16px) or {spacing.lg} (20px) for breathing room.
Section breaks: {spacing.section} (48px) vertically; {spacing.band} (60px) for prominent divisions.
Inline gaps: {spacing.xs} (8px) between icon and label; {spacing.sm} (12px) between list items.

Grid & Container

Container Max-Width:

Desktop (1440px): max-width 1320px content column
Large Desktop (1280px): max-width 1140px
Tablet (1024px): max-width 960px
Mobile (768px): max-width 741px (adjusted for viewport)
Small Mobile (375px): max-width 335px (adjusted for viewport)

Grid Strategy:

Desktop (1024px+): 8-column grid, supporting flexible spanning and rhythm.
Tablet & Mobile (< 1024px): 3-column grid for simplified, mobile-optimized layouts.

Section Patterns:

Full-width alternating bands ({colors.surface-alt}) separate major content blocks vertically.
Padding is symmetric: horizontal gutters match vertical section spacing.
No nested max-width; the container is the boundary.

Whitespace Philosophy

The design prioritizes open, breathing layouts. Whitespace is not merely absence—it is an active design element that establishes hierarchy and focus. Sections are generously separated with {spacing.section} (48px) or {spacing.band} (60px) vertical gaps. Cards and content blocks float on white backgrounds, unboxed and minimal. The neutral palette is intentionally restrained, allowing typographic hierarchy and strategic color accents to drive visual interest rather than pattern or texture.

Border Radius Scale

{rounded.none} = 0px — sharp, geometric; applied to cards, containers, navigation, and text buttons for authoritative, corporate feel
{rounded.xs} = 2px — micro-rounding on badges and small decorative elements
{rounded.sm} = 4px — subtle rounding on form inputs, softening sharp rectangles
{rounded.md} = 8px — applied to images, creating gentle, approachable soft corners
{rounded.lg} = 12px — decorative rounding on select components (e.g., 12px-radius treated elements)
{rounded.full} = 9999px — pill-shaped buttons, creating friendly, approachable CTA affordance

Component Application:

Buttons: {rounded.full} (9999px) — all button variants employ pill rounding.
Cards: {rounded.none} (0px) — sharp-edged, structural geometry.
Images: {rounded.md} (8px) — soft, human-friendly softening without full rounding.
Inputs: {rounded.sm} (4px) — minimal rounding, maintaining form clarity.
Badges: {rounded.xs} (2px) — barely-there softness on tiny elements.

Border Widths

Thin = 1px — applied to button borders (filled variants) and hairline separators; the sole stroke weight in the system

6. Depth & Elevation

The system employs a color-blocking depth strategy rather than layered shadows. Explicit shadows are rare and minimal:

Level	Treatment	Use
Base / Flat	No shadow; transparent or white background	Cards, text buttons, navigation, standard containers
Subtle Lift	`rgba(0, 0, 0, 0.1) 0px 4px 6px 0px`	Dropdown menus and minor floating UI
Interactive	`rgba(0, 0, 0, 0.3) 0px 1px 4px -1px`	Button focus and active states, drawn shadows

Shadow Philosophy: The design avoids heavy shadow dependency. Depth is primarily expressed through surface colour shifts ({colors.surface-alt} creating visual separation) and whitespace. Where shadows do appear, they are nearly transparent and spatially compact, suggesting subtle lift rather than dramatic layering. This creates a modern, flat aesthetic that remains approachable and web-native.

Z-index / Layering

The stacking scale follows a linear progression:

Base (z-index: 1, 3, 4) — Standard content flow, default stacking order
Dropdown (z-index: 10, 99) — Floating menus, overlays above base content
Sticky (z-index: 100, 101, 102) — Persistent headers, sticky navigation, persistent floats
Modal / Overlay (inferred; not explicitly measured) — Modals and full-screen overlays above sticky elements

Interpretation:

z-index 1–4: Page content and local stacking contexts
z-index 10, 99: Dropdowns and contextual floating UI
z-index 100+: Persistent sticky elements (navigation, headers)
Higher indices reserved for modal dialogs (not measured; typical patterns suggest 1000+)

7. Do's and Don'ts

Do

Favour pill-shaped buttons ({rounded.full} — 9999px) for all CTAs; they are the affordance signal in this system.
Use sharp-edged cards ({rounded.none} — 0px) and containers to maintain structural clarity and corporate authority.
Maintain 0px letter-spacing across all typography to preserve Roboto's native metrics and prevent artificial widening.
Apply text-transform: uppercase to buttons and labels to signal actionability and form-level semantics.
Stack spacing values from the modular scale ({spacing.md}, {spacing.lg}, {spacing.section}, {spacing.band}) rather than inventing intermediate values.
Employ colour-blocking for depth via {colors.surface-alt} alternating bands instead of layering shadows.
Centre CTA text in buttons and ensure min-touch-target of 44px × 44px (buttons measured at 36–40px height meet or exceed this).
Use {colors.primary} (#3398B1) for primary CTAs, focus states, and brand-critical interactive elements.
Pair {colors.link} (#5BC2DC) with body text for inline hyperlinks; maintain high contrast with white backgrounds.
Collapse navigation to a menu toggle below 1024px, reducing visible links to 0 at mobile/tablet breakpoints.

Don't

Do not add custom shadow layers outside the two defined elevations (subtle dropdown, interactive button).
Do not round card corners; cards are {rounded.none} (0px) by definition in this system.
Do not invent intermediate spacing values; always select from the modular scale.
Do not apply letter-spacing to typography; the system standardizes on 0px.
Do not mix typefaces; Roboto is the sole font family across all scales.
Do not use disabled buttons with visual hover states; disabled elements remain static (opacity 0.65).
Do not exceed 1320px content width at the largest breakpoint (1440px viewport).
Do not break the 8-column grid on desktop (1024px+) or the 3-column grid on mobile/tablet.
Do not use secondary buttons for primary CTAs; always choose the filled or primary variant.
Do not layer multiple shadows; if depth is required, shift surface colour via {colors.surface-alt} instead.
Do not expose semantic error/success/warning colours; the system does not declare a status ramp.

8. Responsive Behavior

Breakpoints

Viewport	Width	Content Max-Width	Grid Columns	Nav Links Visible	Menu Toggle	Heading 1 Size	Body Size	Section Padding Horizontal
Mobile	375px	335px	3	0	Yes	32px	16px	0px
Tablet	768px	741px	3	0	Yes	32px	16px	0px
Desktop	1024px	960px	8	7	No	32px	16px	0px
Large Desktop	1280px	1140px	8	7	No	32px	16px	0px
Extra Large	1440px	1320px	8	7	No	32px	16px	0px

Breakpoint Logic:

Mobile → Tablet transition: Occurs around 375–768px; 3-column grid persists, layout adjusts to tablet proportions.
Tablet → Desktop transition: Occurs at 1024px; grid expands to 8 columns, navigation links become visible (7 links shown), menu toggle hides.
Large → Extra Large: Occurs at 1280px and 1440px; content max-width grows, but typography and visible elements remain stable.

Touch Targets

Minimum interactive height: 36–40px (observed on buttons; meets or exceeds 44px guideline on larger variants).
Minimum interactive width: 228px (buttons); form inputs typically 240px+ at mobile.
Tap area padding: {spacing.md} (16px) on all sides of small buttons; larger components have wider margins.
Spacing between interactive elements: Minimum {spacing.xs} (8px) between adjacent buttons or links to prevent accidental mis-taps.

Collapsing Strategy

Navigation: At 1024px and above, 7 primary nav links are visible inline. Below 1024px, links collapse into a hamburger menu toggle.
Grid layout: 8-column grid (desktop) compresses to 3-column grid below 1024px, reducing component width and forcing single-column flows on mobile.
Typography: Heading and body sizes remain constant across all breakpoints (32px headings, 16px body); no responsive font scaling observed.
Buttons & CTAs: Pill-shaped buttons ({rounded.full}) maintain their form across all breakpoints; width adjusts to content or container constraints.
Container padding: Horizontal section padding remains 0px across all breakpoints; vertical spacing scales with {spacing.section} and {spacing.band}.
Images: Responsive images scale with grid column width; border-radius ({rounded.md} — 8px) remains constant.

9. Agent Prompt Guide

Quick Color Reference

Use these mappings for rapid UI implementation:

Primary CTA buttons: {colors.primary} (#3398B1)
Secondary/Filled buttons: {colors.accent} (#038FB1)
Inline links & hypertext: {colors.link} (#5BC2DC)
Heading & Display text: {colors.ink} (#000000)
Body & Paragraph text: {colors.body} (#212529)
Page & card backgrounds: White (#FFFFFF)
Alternating section bands: {colors.surface-alt} (#F7FCFD)
Decorative neutrals (unassigned role): {colors.neutral-1} (#333333), {colors.neutral-2} (#181717)

Iteration Guide

All buttons are pill-shaped (border-radius: 9999px). There are no square or lightly-rounded button variants.
Cards have zero border-radius (border-radius: 0px); they are sharp-edged, structured containers.
Typography is Roboto-only, weight-driven. Button labels, headings, and emphasis use weight shifts (400 → 500 → 600 → 700) rather than secondary typefaces. All letter-spacing is 0px.
Button text is uppercase (text-transform: uppercase) for all action-bearing variants (primary, filled, large filled). Text buttons may be sentence case.
Depth is expressed via colour-blocking, not shadows. Alternating {colors.surface-alt} bands create visual rhythm; only dropdowns and interactive button states get explicit shadows.
Navigation collapses below 1024px. Desktop shows 7 inline links; mobile/tablet show a hamburger toggle collapsing links into offcanvas or dropdown.
Grid is 8-column on desktop, 3-column on mobile/tablet. No responsive typography scaling; all sizes remain constant across breakpoints.
Spacing follows the modular scale strictly: {spacing.xxs} (4px), {spacing.xs} (8px), {spacing.sm} (12px), {spacing.md} (16px), {spacing.lg} (20px), {spacing.xl} (24px), {spacing.xxl} (32px), {spacing.xxxl} (40px), {spacing.section} (48px), {spacing.band} (60px). Never invent intermediate values.
Form inputs round subtly (border-radius: 4px); images round gently (border-radius: 8px); badges barely round (border-radius: 2px).
Focus states apply a light blue box-shadow (rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem) and border-color shift to rgb(134, 183, 254). Disabled elements reduce opacity to 0.5 or 0.65 and shift background to secondary gray.

10. Known Gaps

This design system extraction was comprehensive across 6 pages of the site, but the following limitations should be noted when implementing or extending this design:

Interaction states for links and dropdowns: The extraction identified hover/focus/active CSS values but did not measure full visual state transitions (e.g., link underline on hover, dropdown fade-in timing). Hover colour shifts are documented as CSS variables (var(--bs-link-hover-color)) rather than explicit hex values; consult the live site for precise visual reference.
Semantic status colours (error, success, warning, info): The site does not expose an explicit error/success/warning/info colour ramp in its stylesheets. Focus states include RGBA colour references for validation (e.g., rgba(var(--bs-success-rgb),.25) and rgba(var(--bs-danger-rgb),.25)), but these are derived Bootstrap tokens, not native brand colours. No semantic status palette is declared.
Gradients and decorative mesh patterns: No CSS gradients, background images, or decorative overlays were identified in the site's stylesheets. The system relies entirely on flat colours and colour-blocking.
Decorative colours without assigned roles: Two neutral values ({colors.neutral-1} — #333333 and {colors.neutral-2} — #181717) were extracted but do not map to a specific measured usage role. They may be reserve neutrals or legacy values; consult the brand's colour documentation for intended purpose.
Unobserved surfaces behind authentication: This extraction covered publicly accessible pages only. Dashboards, user accounts, or authenticated surfaces may employ additional component variants or colour roles not represented here.
Responsive font scaling: Typography sizes remain constant across all breakpoints (no responsive font-size adjustments). If mobile typography is intended to scale, it was not expressed in the extraction and is not part of this system.
Dark mode or alternate themes: The extraction captured a single light theme only. If a dark mode or high-contrast variant exists, it was not measured and is not documented here.
Animation and transition timing: No CSS animation or transition-duration values were extracted. Hover states and state changes are instantaneous in the measured styles; motion libraries or micro-interactions are not represented.
Icon system or SVG styling: The system mentions icon-only buttons (e.g., text-sm variant) but does not specify icon sizing, fill colours, or SVG treatment. Icon specifications are not documented.
Accessibility-specific properties: ARIA roles, focus-visible handling, and screen reader text were not systematically extracted. The focus-ring styles are documented, but full a11y coverage is beyond this design-tokens scope.

Document Version: 1.0
Extraction Source: https://suntorybeverageandfood-europe.com/fr-fr/france/
Pages Analyzed: 6
Token Coverage: 8 colours, 16 typography roles, 10 spacing values, 6 border-radius scales, 2 shadow elevations, 1 border width, 1 opacity scale, 3 z-index tiers

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from suntorybeverageandfood-europe.com/fr-fr/france

Primary

#3398B1

Primary CTA, brand accent, active state

#038FB1

Secondary accent / hero band

#5BC2DC

Inline link colour

Neutral

#F7FCFD

Alternating section band

#000000

Headings / primary text

#212529

Body copy

#333333

Neutral

#181717

Neutral

Typography · RobotoGoogle Fonts

body16px · 500 · 24px

body16px · 400 · 24px

h516px · 600 · 24px

link16px · 400 · 24px

body16px · 700 · 24px

h328px · 500 · 33.6px

body20.8px · 400 · 31.2px

h132px · 500 · 48px

h424px · 500 · 28.8px

heading32px · 500 · 38.4px

heading24px · 500 · 36px

heading25.6px · 500 · 38.4px

body17.6px · 500 · 26.4px

h232px · 400 · 38.4px

h420px · 400 · 28px

h329px · 500 · 34.8px

body12.8px · 400 · 19.2px

heading28.8px · 500 · 34.56px

heading20px · 400 · 24px

body15px · 700 · 22.5px

button14px · 600 · 21px

h128.8px · 500 · 34.56px

input14.4px · 400 · 21.6px

caption10px · 400 · 14px

button14.4px · 600 · 21.6px

body13px · 400 · 19.5px

Spacing

12px

20px

16px

4px

60px

8px

32px

24px

Elevation

rgba(0, 0, 0, 0.1) 0px 4px 6px 0px

rgba(0, 0, 0, 0.3) 0px 1px 4px -1px

Components · 5

Remixes of suntorybeverageandfood-europe.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it

DESIGN.md for suntorybeverageandfood-europe.com

Preview

Design System Inspired by Suntory Beverage and Food

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Neutral Scale

Surface & Backgrounds

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (primary)

Filled Button (filled)

Filled Large Button (filled-lg)

Text Button (text)

Text Small Button (text-sm)

Cards & Containers

Default Card (default)

Default Large Card (default-lg)

Navigation

Default Navigation (default)

Inputs & Forms

Text Input (Base)

Links

Link Default (default)

Link Default 2 (default-2)

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of suntorybeverageandfood-europe.com

Preview

Design System Inspired by Suntory Beverage and Food

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Neutral Scale

Surface & Backgrounds

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (primary)

Filled Button (filled)

Filled Large Button (filled-lg)

Text Button (text)

Text Small Button (text-sm)

Cards & Containers

Default Card (default)

Default Large Card (default-lg)

Navigation

Default Navigation (default)

Inputs & Forms

Text Input (Base)

Links

Link Default (default)

Link Default 2 (default-2)

5. Layout Principles

Spacing System

Grid & Container

Primary Button (`primary`)

Filled Button (`filled`)

Filled Large Button (`filled-lg`)

Text Button (`text`)

Text Small Button (`text-sm`)

Default Card (`default`)

Default Large Card (`default-lg`)

Default Navigation (`default`)

Link Default (`default`)

Link Default 2 (`default-2`)

Primary Button (`primary`)

Filled Button (`filled`)

Filled Large Button (`filled-lg`)

Text Button (`text`)

Text Small Button (`text-sm`)

Default Card (`default`)

Default Large Card (`default-lg`)

Default Navigation (`default`)

Link Default (`default`)

Link Default 2 (`default-2`)