Meherun Mridha

Generated Oct 19, 2026

DESIGN.md for www.butter.video

www.butter.video7 colors5 componentsDieGrotesk

Remix

2 screenshots captured· www.butter.video

1 / 2 · Butter Video | Online Video Editor Engineered for Creativity · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Butter
description: |
  Butter's design system embodies a minimalist, forward-thinking aesthetic built
  on geometric clarity and confident typography. The visual language is
  deliberately restrained, leaning on bold display typefaces, high-contrast text
  hierarchies, and strategic use of a vibrant cyan accent to guide interaction.
  The palette is anchored in soft neutrals with a light, airy canvas that
  breathes space around content. This restraint—sharp corners, generous
  whitespace, and selective colour—positions Butter as a professional creative
  tool that values precision and usability over ornamentation. The system feels
  engineered: intentional spacing, clear hierarchies, and a consistent approach
  to navigation and interaction reinforce the brand promise of "Engineered for
  Creativity."
source:
  url: "https://www.butter.video/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-19
  tokensMeasured: true
colors:
  primary: "#00FFD0"
  canvas: "#FAFAFA"
  surface-alt: "#EDEDED"
  on-primary: "#0F0F0F"
  ink: "#0F0F0F"
  body: "#1E1E1E"
  muted: "#B6B6B6"
  neutral-1: "#3C3C3C"
typography:
  display-xxl:
    fontFamily: DieGrotesk
    fontSize: 107.568px
    fontWeight: 400
    lineHeight: 0.99
    letterSpacing: 0.34px
  display-xl:
    fontFamily: DieGrotesk
    fontSize: 60.4px
    fontWeight: 400
    lineHeight: 0.97
    letterSpacing: 0.36px
  display-lg:
    fontFamily: DieGrotesk
    fontSize: 45.4526px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: 0.36px
  body-xl:
    fontFamily: DieGrotesk
    fontSize: 24.4842px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.73px
  body-lg:
    fontFamily: DieGrotesk
    fontSize: 20.7474px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0.68px
  body-md:
    fontFamily: DieGrotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: DieGrotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.31
    letterSpacing: 0.7px
  body-sm-tight:
    fontFamily: DieGrotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.7px
  button-xl:
    fontFamily: DieGrotesk
    fontSize: 41.6667px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: 0.33px
  button-lg:
    fontFamily: DieGrotesk
    fontSize: 21.06px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 5px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 52px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FAFAFA"
    surface: "#EDEDED"
    surfaceRaised: "#E4E4E4"
    text: "#0F0F0F"
    textMuted: "#1E1E1E"
    border: "#DEDEDE"
    accent: "#00997D"
    accentFg: "#000000"
    focusRing: "#00FFD0"
    elevation: shadow
  dark:
    bg: "#091614"
    surface: "#182422"
    surfaceRaised: "#24302E"
    text: "#F5FFFD"
    textMuted: "#9BA6A4"
    border: "#303B3A"
    accent: "#00FFD0"
    accentFg: "#0B0B0C"
    focusRing: "#00FFD0"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: linear
    value: "linear-gradient(rgb(214, 214, 214) 0%, rgb(250, 250, 250) 100%)"
components:
  button-filled:
    typography: "{typography.body-md}"
    textColor: "{colors.canvas}"
    height: 47px
    padding: "10px 14px 10px 14px"
    rounded: 8px
    backgroundColor: "{colors.body}"
  button-text:
    typography: "{typography.button-lg}"
    textColor: "{colors.body}"
    height: 58.5938px
  button-text-2:
    typography: "{typography.button-lg}"
    textColor: "rgba(15, 15, 15, 0.3)"
    height: 58.5938px
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "140px 0px 140px 0px"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    height: 20px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "160px 0px 60px 0px"
    backgroundColor: "{colors.surface-alt}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
  link-2:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
    boxShadow: none
  other-focus-visible:
    target: other
    state: focus-visible
    boxShadow: "{colors.neutral-1} 0px 0px 0px 0.1rem"
  link-focus-visible:
    target: link
    state: focus-visible
    outline: none
  other-hover:
    target: other
    state: hover
    borderColor: transparent
  button-hover:
    target: button
    state: hover
    borderColor: "rgba(0, 0, 0, 0.15)"
    backgroundColor: "rgba(0, 0, 0, 0.08)"
  button-active:
    target: button
    state: active
    transform: "scale(0.95)"
  card-hover:
    target: card
    state: hover
    opacity: 0.5
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 1
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 18
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 1
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 75
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 1
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 87
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 1
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 100
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 1
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 108
    bodyPx: 18
    sectionPaddingX: 0
coverage:
  statesFound: 23
  gradientsFound: 1
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Butter

1. Visual Theme & Atmosphere

Butter's design system embodies a minimalist, forward-thinking aesthetic built on geometric clarity and confident typography. The visual language is deliberately restrained, leaning on bold display typefaces, high-contrast text hierarchies, and strategic use of a vibrant cyan accent to guide interaction. The palette is anchored in soft neutrals with a light, airy canvas that breathes space around content. This restraint—sharp corners, generous whitespace, and selective colour—positions Butter as a professional creative tool that values precision and usability over ornamentation. The system feels engineered: intentional spacing, clear hierarchies, and a consistent approach to navigation and interaction reinforce the brand promise of "Engineered for Creativity."

Key Characteristics

Minimalist, monochromatic foundation with strategic cyan accent
Bold, geometric display typeface (DieGrotesk) driving visual hierarchy
Sharp corners and clean edges throughout components
Light, breathing canvas ({colors.canvas} — #FAFAFA) as default
High-contrast ink and text for legibility and impact
Generous section-level spacing creating visual rhythm
No decorative shadows or gradients; depth via colour blocking

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #00FFD0): Vibrant cyan accent used for primary CTAs, active states, and brand emphasis. Commands attention without aggressive saturation.

Neutral Scale

Canvas ({colors.canvas} — #FAFAFA): Default page background. Ultra-light neutral providing a clean, minimal foundation for all content.
Surface Alt ({colors.surface-alt} — #EDEDED): Alternating section band used to create visual separation and rhythm between content sections.
Ink / On Primary ({colors.on-primary} — #0F0F0F): Primary text and headings. Near-black for maximum contrast and readability.
Body ({colors.body} — #1E1E1E): Body copy and standard text. Slightly softened from pure black for comfortable reading.
Muted ({colors.muted} — #B6B6B6): Captions, secondary text, and de-emphasized content. Reduced contrast for visual hierarchy.
Neutral Decorative ({colors.neutral-1} — #3C3C3C): Decorative or tertiary neutral element without assigned semantic role. Used sparingly for subtle visual accents.

3. Typography Rules

Font Family

Primary: DieGrotesk (DieGrotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
Fallback stack: DieGrotesk relies on the system sans-serif stack for environments where the webfont is unavailable.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	DieGrotesk	107.57px	400	0.99	0.34px	Hero headings, page titles; extreme compact leading
Display XL	DieGrotesk	60.40px	400	0.97	0.36px	Section headers; strong visual anchor
Display LG	DieGrotesk	45.45px	400	0.96	0.36px	Subsection heads; maintains display hierarchy
Body XL	DieGrotesk	24.48px	400	1.15	0.73px	Prominent body text; feature callouts
Body LG	DieGrotesk	20.75px	400	1.16	0.68px	Narrative copy; marketing blocks
Button XL	DieGrotesk	41.67px	400	0.96	0.33px	Large hero CTAs; display-scale buttons
Button LG	DieGrotesk	21.06px	400	1.5	0px	Standard button text; navigation CTAs
Body MD	DieGrotesk	18px	400	1.5	0px	Navigation links, secondary body
Body SM	DieGrotesk	16px	400	1.31	0.70px	Small body text, captions
Body SM Tight	DieGrotesk	16px	400	1.25	0.70px	Compact body; footer or restricted space

Principles

All weights are 400 (regular). The system does not employ bold, medium, or light variants.
Display sizes employ aggressive negative letter-spacing (0.34px to 0.36px) to compress letterforms and amplify visual impact.
Body text retains looser tracking (0.68px to 0.73px) for comfortable reading at smaller sizes.
Button text preserves display-scale tracking; larger buttons inherit display letter-spacing rules.
Line heights compress on display (0.96–0.99) to tighten the visual block; body maintains relaxed ratios (1.15–1.5) for legibility.
DieGrotesk is geometric and sans-serif; its inherent structure provides hierarchy without weight shifts.

4. Component Stylings

Buttons

Primary Filled Button

Background: rgb(30, 30, 30) ({colors.body})
Text: rgb(250, 250, 250) (near-white)
Padding: {spacing.sm} (12px) top/bottom, {spacing.md} (16px) left/right (10px 14px)
Border Radius: {rounded.xs} (8px)
Font Size: {typography.body-md} (18px)
Font Weight: 400
Line Height: 1.5 (27px)
Height: 47px
Width: 145px
Border: none
Box Shadow: none
Hover: Dark background opacity increases to show interactive affordance; exact hover state defined in stylesheets but not exposed as explicit style override here.
Active (scale): transform: scale(0.95) — slight press-down effect.

Text Button

Background: transparent (rgba(0, 0, 0, 0))
Text: rgb(30, 30, 30) ({colors.body})
Padding: 0px
Border Radius: {rounded.none} (0px)
Font Size: {typography.button-lg} (21.06px)
Font Weight: 400
Line Height: 1.5 (31.59px)
Height: 58.59px
Width: auto (308.20px as measured)
Border: none
Box Shadow: none
Hover: Color may shift or opacity adjust; see interaction states.

Secondary Text Button (muted state)

Background: transparent (rgba(0, 0, 0, 0))
Text: rgba(15, 15, 15, 0.3) (reduced opacity ink)
Padding: 0px
Border Radius: {rounded.none} (0px)
Font Size: {typography.button-lg} (21.06px)
Font Weight: 400
Line Height: 1.5 (31.59px)
Height: 58.59px
Border: none
Box Shadow: none
Hover: Opacity or color shifts to indicate interactive state.

Navigation

Navigation Link Group

Background: transparent (rgba(0, 0, 0, 0))
Text: rgb(30, 30, 30) ({colors.body})
Font Size: {typography.body-md} (18px)
Font Weight: 400
Line Height: 1.5 (27px)
Padding: 0px
Border Radius: {rounded.none} (0px)
Border: none
Box Shadow: none
Focus visible: outline: rgb(77, 197, 229) solid 0.3rem — blue outline for accessibility.
Hover: Slight color or opacity shift to signal interactivity.

Cards & Sections

Section / Content Card

Background: transparent (rgba(0, 0, 0, 0))
Text: rgb(15, 15, 15) ({colors.on-primary})
Font Size: {typography.body-md} (18px)
Font Weight: 400
Line Height: 1.5 (27px)
Padding: 140px 0px (vertical) — use {spacing.band} (52px) as section base, scale as needed
Border Radius: {rounded.none} (0px)
Border: none
Box Shadow: none
Typical height: 994.44px (full section)
Width: Full viewport (1440px at desktop)
Hover: Card opacity may reduce to 0.5 for subtle interactive feedback.

Footer

Footer Container

Background: rgb(237, 237, 237) ({colors.surface-alt})
Text: rgb(15, 15, 15) ({colors.on-primary})
Font Size: {typography.body-md} (18px)
Font Weight: 400
Line Height: 1.5 (27px)
Padding: 160px top, 0px horizontal, 60px bottom
Border Radius: {rounded.none} (0px)
Border: none
Box Shadow: none
Height: 1126.81px (full measured section)
Width: 1440px

5. Layout Principles

Spacing System

Butter uses an 8-base modular spacing scale:

{spacing.xxs} = 4px — Micro-adjustments, inline spacing
{spacing.xs} = 8px — Tight grouping, small component padding
{spacing.sm} = 12px — Button padding, compact margins
{spacing.md} = 16px — Standard padding, default margins
{spacing.lg} = 20px — Breathing room, section dividers
{spacing.xl} = 24px — Feature spacing, card padding
{spacing.xxl} = 28px — Large section breaks
{spacing.xxxl} = 32px — Major layout breaks
{spacing.section} = 40px — Section internal padding
{spacing.band} = 52px — Large section transitions, hero padding

Usage Context:

Buttons and compact UI: {spacing.sm} to {spacing.md}
Card and section padding: {spacing.xl} to {spacing.band}
Between major content sections: {spacing.xxxl} to {spacing.band}

Grid & Container

Max width: 1440px at desktop (measured at 1440px viewport)
Column strategy: Single-column layout throughout all breakpoints
Section pattern: Full-width sections with internal padding; no multi-column grid observed
Horizontal padding: 0px at all measured viewports (sections span edge-to-edge)
Vertical rhythm: Large sections separated by 140px padding (as observed in card measurements) create strong visual breathing

Whitespace Philosophy

Butter prioritizes open, generous whitespace to reinforce its minimalist aesthetic. Large sections are separated by substantial vertical padding ({spacing.band} and above), creating rhythm and allowing the eye to rest. Horizontal space is consumed by the viewport width, with sections spanning edge-to-edge. This approach de-clutters the interface and emphasizes content prominence. No cramped or crowded layouts observed; spacing scales confidently with viewport size.

Border Radius Scale

{rounded.none} = 0px — Applied to all buttons, cards, navigation, and footers. Butter's aesthetic is sharp and geometric.
{rounded.xs} = 5px — Subtle roundness applied selectively; observed on primary filled button (8px measured, but 5px is the published system scale for micro-rounding)
{rounded.full} = 9999px — Pill-shaped elements. Not observed in primary component set but available as semantic token for future use.

Component Contexts:

Buttons: {rounded.xs} for filled CTAs; {rounded.none} for text buttons
Cards & sections: {rounded.none}
Images: {rounded.none}

6. Depth & Elevation

Butter does not employ a traditional shadow-based elevation system. Instead, depth is achieved through colour blocking — alternating surface colours create visual separation without reliance on shadows or z-depth effects.

Level	Treatment	Use
Base (flat)	No shadow; background colour only	Default sections, text buttons, navigation
Alternate	`{colors.surface-alt}` (`#EDEDED`) background	Footer, section dividers, alternating content bands
Focus / Interactive	Explicit outline or opacity shift	Accessibility focus states, hover effects

Shadow Philosophy: Butter's extraction reveals boxShadow: none across all measured components. The system is flat and geometric. Interaction feedback comes from opacity shifts, colour changes, transforms (scale, translateY), and outline rings rather than shadows. This reinforces the "engineered" aesthetic—clarity over depth.

Opacity Levels

Standard (fully opaque): 1.0 — Default state
Reduced visibility: 0.5 — Applied to cards on hover to signal interactivity
Disabled / subtle: 0.3 — Applied to secondary text buttons and de-emphasized content
Overlay / focus highlight: 0.1 — Used in focus-visible box-shadow for thin outline effect

Z-index / Layering

Butter employs a discrete stacking scale:

Base elements: z-index: 1 — Default page content, sections
Secondary stacks: z-index: 2 — Internal component layering
Dropdowns / popovers: z-index: 29–40 — Menu and tooltip layers (exact levels depend on nesting)
Sticky headers / navigation: z-index: 250–300 — Fixed navigation, persistent UI
Modals / overlays: z-index: 9999 — Top-level modal dialogs, blocking interactions

This scale ensures clear stacking order without excessive values, allowing room for future components between defined tiers.

7. Do's and Don'ts

Do

Use DieGrotesk for all text. The typeface is the system's visual signature; do not substitute.
Maintain sharp corners ({rounded.none}) on buttons, cards, and major components. Rounding is geometric, not organic.
Pair cyan ({colors.primary}) with high-contrast dark text for primary CTAs. The accent is vibrant and must command attention.
Leverage generous vertical spacing ({spacing.band}, {spacing.xxxl}) between major sections to create rhythm and breathing room.
Use single-column layouts at all breakpoints. Butter's measured breakpoints show no multi-column shifts; content adapts vertically.
Employ colour blocking for depth — alternate {colors.canvas} and {colors.surface-alt} to create visual separation without shadows.
Apply tracking to display headings. Negative letter-spacing (0.34px–0.36px) compresses letterforms and amplifies visual impact.
Reserve focus-visible outlines for accessibility. Use outline: rgb(77, 197, 229) solid 0.3rem or opacity shifts to indicate focus.

Don't

Do not add box-shadows to components. The system is flat; shadows are not part of the elevation model.
Do not use rounded pill-shaped buttons ({rounded.full}). Primary CTAs are sharp ({rounded.xs} to {rounded.none}).
Do not employ multiple typefaces or weight variations. DieGrotesk weight 400 is sufficient; bold, light, or serif fonts break cohesion.
Do not reduce letter-spacing on body text. Tracking values (0.68px–0.73px) are tight; do not compact further.
Do not use semantic status colours (error red, success green, warning yellow). Butter does not declare these; stick to the defined palette.
Do not apply multi-column grid layouts to match other design systems. Butter is consistently single-column.
Do not invent hover or active states beyond those extracted from the live site. Opacity shifts, colour changes, and scale transforms are the primary interactions; do not over-engineer animations.
Do not add padding or margins inside sections beyond the defined scale. Butter's sections are clean; excessive internal spacing dilutes the minimalist aesthetic.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Max Content Width	Grid Columns	Largest Heading	Body Text	Nav Visible Links	Key Changes
Mobile	375px	375px	1	`{typography.display-lg}` (56px)	`{typography.body-md}` (18px)	4	Base layout; menu toggle visible
Tablet	768px	768px	1	`{typography.display-lg}` (75px)	`{typography.body-md}` (18px)	4	Heading scales up; layout remains single-column
Desktop MD	1024px	1024px	1	`{typography.display-lg}` (87px)	`{typography.body-md}` (18px)	9	More nav links visible; heading continues scaling
Desktop LG	1280px	1280px	1	`{typography.display-lg}` (100px)	`{typography.body-md}` (18px)	9	Further heading scale-up
Desktop XL	1440px	1440px	1	`{typography.display-xxl}` (108px)	`{typography.body-md}` (18px)	9	Full scale headings; stable at this size

Strategy:

Layout remains single-column across all breakpoints; no grid restructuring.
Headings scale fluidly from ~56px (375px viewport) to ~108px (1440px viewport).
Body text (18px) is stable and does not resize.
Navigation link count increases from 4 visible at mobile to 9 at desktop; menu toggle remains present but may not activate.
Section padding and spacing scale proportionally with viewport; no hardcoded breakpoint-specific padding shifts were measured.

Touch Targets

Minimum interactive element sizes (inferred from measured button dimensions):

Button height: 47px (primary filled) — meets mobile touch target guideline (44–48px)
Navigation links: 20px height (as measured) — may require {spacing.md} padding for comfortable touch on mobile
Text buttons: 58.59px height — ample touch target

Collapsing Strategy

Headings: Scale fluidly with viewport. No breakpoint-specific heading changes; letterforms and tracking remain consistent.
Sections: Maintain full-width layout; internal padding adjusts to viewport (inferred from content reflow).
Navigation: Links visible at desktop (9 links); mobile shows 4 visible links with menu toggle (icon) available.
Buttons: Maintain fixed dimensions across breakpoints; rely on flexible button widths (auto or measured) to adapt.
Margins & padding: Section-level spacing ({spacing.band}) scales; no explicit breakpoint resets observed.

9. Agent Prompt Guide

Quick Color Reference

Use these mappings when building UI:

Primary CTA / Brand accent: Cyan ({colors.primary} — #00FFD0)
Page background: Off-white canvas ({colors.canvas} — #FAFAFA)
Section divider / footer: Light grey surface alt ({colors.surface-alt} — #EDEDED)
Heading text / Ink: Near-black on primary ({colors.on-primary} — #0F0F0F)
Body copy: Charcoal body ({colors.body} — #1E1E1E)
Secondary / caption text: Muted grey ({colors.muted} — #B6B6B6)
Neutral decorative (rare): Dark grey ({colors.neutral-1} — #3C3C3C)

Iteration Guide

Font is always DieGrotesk, weight 400. No bold, italic, or serif substitutions. Apply tracking per role: display = 0.34–0.36px (tight), body = 0.68–0.73px (relaxed).
Buttons are sharp ({rounded.none} or {rounded.xs} at 8px max). Primary CTAs: dark background (#1E1E1E) with white text, {spacing.sm} padding, {typography.body-md} size. Text buttons are transparent with no background.
Sections are single-column full-width. No multi-column grid. Use {spacing.band} (52px) as the base section separator; scale up to 140px padding for hero or feature sections.
Depth comes from colour, not shadows. Alternate {colors.canvas} and {colors.surface-alt} to separate sections. No box-shadow values. Interactions use opacity shifts (e.g., 0.5 on hover), scale transforms (scale(0.95) on active), or outline rings (rgb(77, 197, 229) 0.3rem on focus).
Spacing scale in 8px increments: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 52px. Use this scale for all padding, margins, and gaps. Never add arbitrary spacing outside this set.
Typography hierarchy is size-driven; letter-spacing is your secondary tool. Display sizes compress tracking for visual punch; body text keeps it loose for comfort. This substitutes for weight variation (which DieGrotesk does not employ in this system).
Headings scale fluidly across breakpoints. Mobile headings start at 56px; desktop scales to 108px. No breakpoint-specific snap points; use fluid scaling or pre-measured breakpoint sizes (see section 8).
Focus and hover states: Use outline rings for focus-visible (blue, 0.3rem width), opacity/color shifts for hover (e.g., color to rgba(15, 15, 15, 0.5) or opacity to 0.4), and transform: scale(0.95) for active button press.
Z-index is discrete: Base = 1–2, dropdowns = 29–40, sticky nav = 250–300, modals = 9999. Use these tiers; do not create new intermediate levels.
Accessibility: Always provide focus-visible states. Butter uses outline rings; ensure 3:1 minimum contrast (cyan on white passes; test dark backgrounds). Navigation links may have explicit focus outlines; text buttons and links rely on color or opacity shifts unless focus-visible is required by WCAG.

10. Known Gaps

Interaction states not fully specified: The extraction identified several hover, active, and focus-visible properties (color shifts, opacity, scale transforms), but not all interactive surface types were captured. Hover behaviours on cards, links, and minor components may differ from or extend beyond the recorded sample.
No semantic status colours: Butter does not declare error, success, warning, or info states in its measured markup. Do not invent a semantic ramp; if status states are needed, define them explicitly in your implementation or request colour guidance from the brand.
Dark mode not confirmed: The extraction shows only one theme (light). No dark-mode variant was observed or measured. If a dark theme exists, it was not captured by this analysis.
One colour lacks assigned role: {colors.neutral-1} (#3C3C3C) was measured but has no declared semantic function. It may be used decoratively or in minor components not present on the analysed page.
Shadows are absent from the system: The extraction confirms boxShadow: none across all components. If subtle elevation or depth effects are needed, they must be added as custom extensions; the system itself provides no shadow tokens.
Cross-origin stylesheets: Some stylesheets may have been blocked by CORS, so CSS-declared properties on embedded or third-party widgets are incomplete. This should not affect core Butter components.
Surfaces behind authentication: Only the public homepage was analysed. Logged-in dashboards, editor interfaces, or authenticated pages may employ different typography, spacing, or component patterns not captured here.
Animation and transition timing: No CSS animations or transitions were extracted. Interactions are represented by state changes (opacity, transform, outline) but not by duration, easing, or delay values.
Opacity levels partially inferred: Opacity 0.1 appears only in a focus-visible box-shadow rule. Other opacity values may exist in states not measured. 0.3, 0.4, and 0.5 were identified from hover and disabled states.

Document Version: 1.0
Source: https://www.butter.video/
Analysed: Homepage (public page)
Extracted Tokens: 7 colours, 10 typography scales, 10 spacing values, 3 border-radius scales, z-index tiers, opacity levels, multiple interaction states.

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

Remixes of www.butter.video

Latest remixes

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

Remix it