# Bavet design system

> Bavet design system measured from bavet.eu: krisha font, #C33130 primary on #F4F1EA, 9 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/bavet.eu/

Bavet’s website (bavet.eu) uses the krisha font and #C33130 as its main color on a #F4F1EA background. Measured by Sitepeel on November 6, 2026.

## What font does Bavet use?

Bavet uses krisha (weight 400) and teko (weight 400) on bavet.eu. Page titles are 120px at weight 400 (64px on phones) and body text is 16px. Measured on November 6, 2026.

- krisha (weights 400)
- teko (weights 400)
- barlow (weights 400)

## Bavet colors: palette and hex codes

Bavet’s main colors are #F4F1EA (warm mist) for the background, #333333 (graphite) for text and #C33130 (red) as the main accent, with #A82A29 (red) as another accent. Measured on November 6, 2026.

- #F4F1EA: warm mist
- #333333: graphite
- #FBFBF8: snow
- #FFFFFF: white
- #EDEDED: mist
- #C33130: red
- #A82A29: red

## What is Bavet built with?

Bavet’s website (bavet.eu) is built with WordPress, Vue.js, Swiper, Tailwind CSS and GSAP. Measured on November 6, 2026.

- JavaScript framework: Vue.js 3.2.47
- Animation & 3D: GSAP 3.11.4, Three.js r152, GSAP ScrollTrigger
- Analytics: Meta Pixel 2.9.437, Google Analytics, Google Tag Manager
- Server: Nginx
- Site builder & CMS: WordPress
- UI & CSS: Swiper, Tailwind CSS 3.x

## Questions and answers

### What font does Bavet use?

Bavet’s website uses krisha (weight 400) and teko (weight 400). Page titles are 120px at weight 400 (64px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the Bavet colors and hex codes?

On bavet.eu: #F4F1EA (warm mist) for the background, #333333 (graphite) for text and #C33130 (red) as the main accent, with #A82A29 (red) as another accent. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Bavet design system?

The design system on this page is bavet.eu’s, as measured on November 6, 2026: krisha type, #C33130 as the main color, 8px corners and a 4px spacing grid, written down as a DESIGN.md. It is not Bavet’s own documentation.

### What is Bavet built with?

Bavet’s website (bavet.eu) is built with WordPress, Vue.js, Swiper, Tailwind CSS and GSAP. The full tech stack Sitepeel found: Vue.js, GSAP, Three.js, Meta Pixel, Nginx, WordPress, Swiper, Tailwind CSS, GSAP ScrollTrigger and Vimeo. Measured on November 6, 2026.

### What is the Bavet DESIGN.md?

A plain-text file with Bavet’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Bavet’s official design system?

No. Sitepeel measured it from bavet.eu’s public page on November 6, 2026. It is an independent analysis, not made or approved by Bavet.

### Can I use Bavet’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Bavet’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/bavet.eu/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Bavet.

## The DESIGN.md file

```markdown
---
version: alpha
name: Bavet
description: "Light interface measured from bavet.eu: krisha type with teko, red accents, tonal surfaces and 8px corners."
colors:
  background: "#F4F1EA"
  surface: "#F4F1EA"
  on-surface: "#333333"
  on-background: "#333333"
  surface-container-low: "#FBFBF8"
  surface-container: "#FFFFFF"
  outline: "#FFFFFF"
  outline-variant: "#EDEDED"
  primary: "#C33130"
  on-primary: "#FFFFFF"
  secondary: "#A82A29"
typography:
  headline-display:
    fontFamily: krisha
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.85
  headline-lg:
    fontFamily: teko
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.9
  headline-md:
    fontFamily: teko
    fontSize: 48px
    fontWeight: 400
    lineHeight: 0.9
  headline-sm:
    fontFamily: teko
    fontSize: 32px
    fontWeight: 400
    lineHeight: 0.9
  title-lg:
    fontFamily: teko
    fontSize: 24px
    fontWeight: 400
    lineHeight: 0.9
  body-md:
    fontFamily: barlow
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: barlow
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1
  body-sm:
    fontFamily: barlow
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25
  headline-lg-mobile:
    fontFamily: teko
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.9
  headline-display-mobile:
    fontFamily: krisha
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.85
  headline-sm-mobile:
    fontFamily: teko
    fontSize: 22px
    fontWeight: 400
    lineHeight: 0.9
rounded:
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 24px
  section: 112px
  container: 1440px
components:
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.title-lg}"
    rounded: "{rounded.sm}"
    padding: 12.8px 0px
    height: 48px
  button-ghost:
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 21.42px 8px 16.59px 8px
    height: 56px
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 15.01px 16px
  link:
    textColor: "{colors.on-primary}"
---

# Bavet Design System

## Overview

Bavet describes itself as: “Enjoy delicious spaghetti at BAVET with friends & family. Choose from tasty sauces or veggie and vegan options. Reserve, explore our menu or order online.” The interface is light, built on **Warm Mist (#F4F1EA)** with **Graphite (#333333)** text, and **Red (#C33130)** as the main accent.

Type is set in **krisha** and **teko**. Headlines run large; body text is 16px. The surface language is flat. Corners are mostly 8px.

Measured from [bavet.eu](https://bavet.eu/) on November 6, 2026 at 1440×900 and 390×844 from 284 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **Warm Mist (#F4F1EA):** Page background, seen 1 time. Token `background`.
- **Graphite (#333333):** Primary text and headings, seen 18 times. Token `on-surface`.
- **Snow (#FBFBF8):** Raised areas one step from the page, seen 4 times. Token `surface-container-low`.
- **White (#FFFFFF):** Cards and panels, seen 63 times. Token `surface-container`, CSS `--tw-ring-offset-color`.
- **White (#FFFFFF):** Borders and dividers, seen 8 times. Token `outline`, CSS `--tw-ring-offset-color`.
- **Mist (#EDEDED):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Red (#C33130):** Brand color on large areas, seen 61 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Red (#A82A29):** Accent in text, fills and borders, seen 2 times. Token `secondary`.

## Typography

**krisha**, **teko** and **barlow** share the interface. Fallback stack: `krisha, sans-serif`.

- **headline-display:** krisha 120px at weight 400, line height 0.85, uppercase (64px on mobile). Page title (h1).
- **headline-lg:** teko 72px at weight 400, line height 0.9, uppercase (64px on mobile). Section headings (h2).
- **headline-md:** teko 48px at weight 400, line height 0.9. Sub-section headings.
- **headline-sm:** teko 32px at weight 400, line height 0.9, uppercase (22px on mobile). Card and feature titles.
- **title-lg:** teko 24px at weight 400, line height 0.9. Small titles.
- **body-md:** barlow 16px at weight 400, line height 1.5. Body text.
- **body-lg:** barlow 18px at weight 400, line height 1. Lead paragraphs.
- **body-sm:** barlow 14px at weight 400, line height 1.25. Secondary and small text.

## Layout

Spacing follows a 4px grid: 90% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 48px.
- **Sections:** 112px vertical padding between major sections.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1440px.
- **Breakpoints:** 414px, 600px, 640px, 736px, 767px, 768px, 900px, 1023px, 1024px, 1279px, 1280px, 1536px, 1921px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#FBFBF8 → #FFFFFF) and #FFFFFF borders.

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **sm (8px):** 36 elements.
- **md (10px):** 32 elements.
- **xl (16px):** 28 elements.
- **xs (6px):** 4 elements.
- **lg (12px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-outline (“EN”):** #FFFFFF fill, #C33130 text, 24px/400, 8px radius, padding 12.8px 0px.
- **button-ghost (“OUR MENU”):** transparent fill, #FFFFFF text, 20px/400, 10px radius, padding 21.42px 8px 16.59px 8px, border 1px solid #FFFFFF.
- **input-field (“Email”):** #FFFFFF fill, #333333 text, 16px/400, 6px radius, padding 15.01px 16px, border 1px solid #EDEDED.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #F4F1EA for the page and lift surfaces in small steps: #FBFBF8, #FFFFFF.
- Do use #C33130 as the brand accent: header, logo and key highlights.
- Do keep spacing on the 4px grid.
- Do use 8px corners on most elements; larger surfaces also use 10px, 16px and 6px.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond krisha, teko and barlow.
- Don't use #C33130 for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.5s, 0.25s, 0.15s. Longer ambient animations run 4s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease-out`, `ease-in-out`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/bavet.eu/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```