Buddywise

---
version: alpha
name: Buddywise
description: Act before a risk becomes reality with Buddywise real-time safety detection
colors:
  primary: "#1f2321"
  secondary: "#888c8c"
  tertiary: "#37d06f"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Aeonik-Regular
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
  headline-md:
    fontFamily: Aeonik-Regular
    fontSize: 47px
    fontWeight: 400
    lineHeight: 1.12
  headline-sm:
    fontFamily: Aeonik-Regular
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.29
  headline-xs:
    fontFamily: Aeonik-Regular
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Aeonik-Regular
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 24px
  md: 40px
  lg: 64px
  xl: 144px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Buddywise: Big Aeonik Headlines with Safety-Green CTAs

## Overview

Buddywise targets industrial safety leaders with a calm, serious tone. The interface is spacious, text-led, and unornamented, relying on a high-contrast black-on-white base with a single green accent. Content is organized in concise blocks with generous vertical rhythm for easy scanning. Use this style when clarity and credibility matter more than spectacle.

## Colors

- **primary (#1f2321):** Primary text and headline ink across light surfaces.
- **secondary (#888c8c):** Muted supporting text and UI labels.
- **tertiary (#37d06f):** Accent for announcements, key inline CTAs, and success states.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#e5e7eb):** Dividers, card outlines, and subtle section separators.
- **surface ({colors.neutral}):** Default card and panel background.
- **on-surface ({colors.primary}):** Standard text color on light surfaces.

## Typography

All levels use Aeonik-Regular at weight 400: 64/47/34/25px headlines and 18px body with tight, modern proportions. Aeonik-Regular is self-hosted (type: custom) and may not be available to external agents; do not assume you can load it. Suitable free substitutes: Fira Sans (Google) for similar geometric/industrial tone, Ubuntu (Google) for open counters with friendly neutrality, or Roboto (Google) as a widely available workhorse. Keep headlines at weight 400; emphasis is achieved by size, spacing, and color, not heavier weights.

## Layout

Spacing follows an 8px base with larger, even steps for pacing: 8 (xs), 24 (sm), 40 (md), 64 (lg), 144 (xl). Use 144px for top/bottom section breathing on wide screens, 64px for standard blocks, 40px for intra-section spacing, and 24px for element gaps and list items. Lists and split sections read best in two columns with wide gutters; stack to a single column under tablet breakpoints while preserving the 24–40px rhythm.

## Elevation & Depth

Depth is mostly flat. A single soft shadow is available: rgba(0,0,0,0.28) 0 8px 28px 0 (sm), typically for media panels. Other levels are none; hierarchy is conveyed through whitespace, 1px borders (#e5e7eb), and size/typographic contrast. Prefer borders or tonal separation over additional shadows.

## Shapes

Two radii define the language: 4px (sm) for interactive controls and small chips; 8px (md) for cards, images, and featured media. Avoid larger radii—edges should feel engineered rather than playful.

## Components

Buttons
- Primary button: 40px tall, 8px×16px padding, 4px radius; background #1F2321, text #FFFFFF.
- Secondary button: 40px tall, 4px radius; text #1F2321 on transparent background.
- Link button: text-only with 0px radius; use #1F2321.

Card
- Background #FFFFFF, text #1F2321, 16px padding, 8px radius; optional sm shadow for media emphasis.

### Announcement Bar
- Full-width strip using #37D06F with dark text (#1F2321). 8–16px vertical padding, dismiss affordance at right. Links inherit #1F2321.

### Top Navigation
- Compact row with logo left, simple link list center, CTA on the right. Links use #1F2321 at 18px; active/hover via #888C8C. CTA may appear as a pill following the 40px/4px control spec.

### Hero Media Panel
- Left: headline-lg 64px at weight 400. Right: image container 8px radius, optional sm shadow, 24–40px internal padding for overlays.

### News Teaser
- headline-sm 34px title, 18px body, inline "Read more" link; card container 8px radius with 16px padding and border #E5E7EB on white.

### Feature List ("What we do")
- headline-sm 34px heading with a 18px list. Use 24px item gaps; keep iconography minimal or omit.

### Privacy Split ("Your privacy. Our priority.")
- Two-column layout: left headline-md 47px split across lines; right 18px copy with a 3-item pillar list. Use border or spacing to separate.

### Webinar Promo Card
- 8px radius image or poster, 18px copy, CTA link. Optional sm shadow to lift above white background.

### Iceberg Stats
- Large numeric callouts (use headline-md 47px for numbers) paired with 18px labels. Arrange in a 2-cell grid with 64px gap on desktop.

### Testimonial Quote
- Quote set at headline-xs 25px or 18px body emphasized; author line in #888C8C. Card container 8px radius with border #E5E7EB.

### Inline Demo Stepper
- Four compact steps labeled 1/4–4/4. Each step uses a question header (headline-xs 25px), 18px options, 24px vertical gaps, and a 40px control for advance/submit.

## Do's and Don'ts

- Do reserve #37D06F for high-importance banners and actions; overuse weakens its signal.
- Do keep headlines at weight 400 and scale via 64/47/34/25px only.
- Do space sections with 64–144px and list items with 24px to maintain the airy rhythm.
- Don't introduce extra shadow levels; use only the sm shadow or a 1px #E5E7EB border.
- Don't exceed 8px corner radius on cards or 4px on controls.
- Don't set body text below 18px or change the core text color away from #1F2321 on light surfaces.

## Agent Prompt Guide

Quick color reference
- Text: #1F2321
- Background: #FFFFFF
- Border: #E5E7EB
- Accent: #37D06F

1) Build a hero with image panel
- Container: max-width 1200px, center, 64px top/bottom (lg), 40px column gap.
- Left: h1 using Aeonik Regular (fallbacks: Fira Sans, Roboto, sans-serif), 64px, line-height 1.1, color #1F2321; body 18px, line-height 1.5.
- Right: image inside a card 8px radius, optional shadow rgba(0,0,0,0.28) 0 8px 28px 0.
- Primary button: 40px tall, 8px 16px, 4px radius; background #1F2321, text #FFFFFF.

2) Announcement bar
- Full-width strip at page top; background #37D06F, text #1F2321, 8–12px vertical padding, 24px horizontal.
- Inline link inherits #1F2321 with underline on hover; include a close "×" at right.

3) Feature list section
- Section padding 64px; heading 34px (Aeonik Regular → fallbacks), list items 18px with 24px gaps.
- Use #1F2321 text on #FFFFFF; optional 1px #E5E7EB divider above/below.

4) Stats ("iceberg") block
- Two-column grid with 64px gap; numbers set at 47px, labels at 18px in #888C8C.
- Add a supporting paragraph at 18px; maintain 40px spacing between groups.

5) Testimonial card
- Card: #FFFFFF background, 8px radius, 16px padding, 1px border #E5E7EB (no shadow).
- Quote at 25px, author line 18px in #888C8C; optional avatar omitted for clarity.

## Similar Brands

- Samsara: similarly sparse, industrial SaaS with a restrained palette; Samsara leans heavier on imagery grids and darker surfaces.
- SafetyCulture (iAuditor): text-led product storytelling and trust signals; uses bolder color blocks and heavier iconography than Buddywise.
- Verkada: clean security/vision narrative; relies more on photography and dark sections, whereas Buddywise stays predominantly white and minimal.

:root {
  /* Colors */
  --color-primary: #1f2321;
  --color-secondary: #888c8c;
  --color-tertiary: #37d06f;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.1;
  --text-headline-md-size: 47px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.12;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.29;
  --text-headline-xs-size: 25px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-aeonik-regular: "Aeonik-Regular";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 64px;
  --spacing-xl: 144px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Act before a risk becomes reality with Buddywise real-time safety detection",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.122,
          0.137,
          0.129
        ],
        "hex": "#1f2321"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.533,
          0.549,
          0.549
        ],
        "hex": "#888c8c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.816,
          0.435
        ],
        "hex": "#37d06f"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.122,
          0.137,
          0.129
        ],
        "hex": "#1f2321"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 144,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Aeonik-Regular",
        "fontSize": {
          "value": 64,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Aeonik-Regular",
        "fontSize": {
          "value": 47,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Aeonik-Regular",
        "fontSize": {
          "value": 34,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Aeonik-Regular",
        "fontSize": {
          "value": 25,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Aeonik-Regular",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}