Skip to content
DesignMunkDesignMunk Submit a site

Beamer

getbeamer.com
A modern changelog for today’s best-in-SaaS.
Software Technology Webflow Homepage DM Serif Lato
Share Visit site
getbeamer.com DESKTOP · 1440
Beamer

AI Breakdown

Design export

---
version: alpha
name: Beamer
description: A modern changelog for today’s best-in-SaaS.
colors:
  primary: "#1c1e21"
  secondary: "#8c9494"
  tertiary: "#ffcb1f"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: DM Serif Display
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.04em
  headline-md:
    fontFamily: DM Serif Display
    fontSize: 41px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: Lato
    fontSize: 33px
    fontWeight: 700
    lineHeight: 1.21
  headline-xs:
    fontFamily: Lato
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Lato
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 5px
  md: 8px
spacing:
  xs: 2px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 50px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 20px 30px
    height: 60px
  button-secondary:
    textColor: "#ff8b00"
    rounded: "{rounded.sm}"
    padding: 20px 30px
    height: 60px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Beamer: Editorial Serif Headlines on Signal Yellow

## Overview

Confident and editorial. The interface speaks to product and marketing teams in SaaS, using high-contrast color and large serif headlines to feel authoritative yet approachable. Layouts are spacious rather than dense, with ample white areas and clear groupings. When tokens don't cover a case, favor black text on white surfaces with yellow accents and restrained grays.

## Colors

- **primary (#1c1e21):** Deep ink for headlines, core text, and primary buttons.
- **secondary (#8c9494):** Muted gray for helper text, meta labels, and subdued icons.
- **tertiary (#ffcb1f):** Signal amber for hero backdrops, highlights, and emphasis icons.
- **neutral (#ffffff):** Pure white for surfaces and card backgrounds.
- **border (#e5e7eb):** Soft divider for section separators, input outlines, and card edges.
- **surface ({colors.neutral}):** Base surface color; same as white for page and card backgrounds.
- **on-surface ({colors.primary}):** Default text color atop surface; use Deep Ink for readability.

## Typography

- DM Serif Display — used for headline-lg (50px/700/1, +0.04em) and headline-md (41px/700/1.2). Freely available via Google Fonts. Suitable substitutes with similar editorial contrast: Playfair Display, Cormorant Garamond, or Lora.
- Lato — used for headline-sm (33px/700/1.21), headline-xs (27px/600/1.19), and body-md (22px/400/1.4). Freely available via Google Fonts. Viable substitutes: Inter, Open Sans, or Source Sans 3 for comparable x-height and clarity.
- Pairing guidance: keep serif for primary page headings and major section intros; use Lato for all running copy, UI labels, and long subheads to maintain legibility.

## Layout

Spacing follows a 10px base with purposeful jumps: sm (10px), md (20px), lg (30px), xl (50px). Use xl for section paddings and hero breathing room; md–lg for gutters between cards and columns; sm for inline element gaps. Cards and feature blocks align on a responsive multi-column grid that collapses to a single column on small screens. Content density should favor clarity: large headlines, 22px body, and generous white space between groups.

## Elevation & Depth

Shadows are not used (all sizes: none). Hierarchy relies on contrast, borders (#e5e7eb), and tonal blocks (white vs. signal amber). Use borders for cards, inputs, and subtle section separators; increase perceived depth by alternating white sections with yellow or lightly tinted panels. Whitespace and type scale do most of the hierarchy work.

## Shapes

Rounded corners are rectangular and modest. Use sm (5px) for buttons, inputs, and chips to keep controls crisp. Use md (8px) on cards and larger containers to distinguish modules without softening the brand too much. Avoid fully rounded or pill shapes; the system reads editorial and structured rather than bubbly.

## Components

Button variants and card:
- Primary Button — background #1c1e21, text #ffffff, 5px radius, 60px height, 20px 30px padding. Use for main CTAs like "Start for Free".
- Secondary Button — text #ff8b00 on a neutral or transparent background, 5px radius, 60px height, 20px 30px padding. Use as a quiet action adjacent to the primary.
- Link Button — text #1c1e21, square corners, no fill. Use inline or as tertiary actions.
- Card — white background, ink text, 8px radius, 16px padding. Use for features, logos, and testimonials.

Distinctive components on this page:
### Hero signup bar
- Background panel uses signal amber (#ffcb1f). Heading in DM Serif Display headline-lg. Email input with 5px radius and border #e5e7eb; primary button at 60px height.

### Feature value grid (four-up)
- Each tile is a Card (8px radius, 16px padding) with Lato headline-xs and body-md. Icons sit on small yellow markers; use md (20px) gaps between tiles.

### Logo/Trust band
- Centered heading in DM Serif Display headline-sm; partner logos on a neutral surface with md (20px) vertical spacing and border-separated rows when needed.

### Testimonial quote
- Pull-quote set in Lato with italic emphasis; author line in secondary gray (#8c9494). Keep md (20px) padding inside a white card.

### KPI strip
- Three to four metrics (e.g., "520% ROI") in Lato with bold numerals; use lg (30px) gaps and secondary gray labels to reduce noise.

### Three-step install
- Numbered steps in Lato headline-xs with body-md descriptions; use 5px radius on any CTA buttons and md (20px) spacing between steps.

### Top navigation with CTA
- Light nav on white with links in #1c1e21 and a small primary button ("Start for free") using the Primary Button spec.

### Cookie/Privacy banner
- Neutral card with 8px radius, border #e5e7eb, body-md copy, and primary/secondary actions spaced by sm–md tokens.

## Do's and Don'ts

- Do reserve #ffcb1f for major backdrops, badges, and highlights; avoid using it for long body text or large paragraphs.
- Do set all core text in #1c1e21 on #ffffff for maximum readability; use #8c9494 only for secondary metadata.
- Do keep buttons at 60px height with 5px radius for consistency across hero and nav.
- Don't introduce drop shadows; use #e5e7eb borders and whitespace to separate elements.
- Don't round components beyond 8px; pills and circles don't fit this system.
- Don't mix serif and sans within the same sentence; keep DM Serif Display for headings and Lato for everything else.

## Agent Prompt Guide

Quick color reference — Text: #1c1e21, Background: #ffffff, Border: #e5e7eb, Accent: #ffcb1f.

1) Build a hero section with a yellow panel
- Section background: #ffcb1f; inner content on a white container.
- Heading: DM Serif Display, 50px, 700, line-height 1, letter-spacing 0.04em, color #1c1e21.
- Body: Lato, 22px, 400, line-height 1.4, color #1c1e21.
- Email input: 5px radius, 1px border #e5e7eb, 16px vertical padding; Primary Button next to it (background #1c1e21, text #ffffff, height 60px, padding 20px 30px).
- Spacing: xl (50px) padding around the block.

2) Create a four-card value grid
- Grid gap: md (20px); section padding: lg (30px).
- Each card: background #ffffff, text #1c1e21, radius 8px, padding 16px, 1px border #e5e7eb.
- Card title: Lato, 27px, 600; body: Lato, 22px, 400.
- Accent icon dots: #ffcb1f.

3) Add a testimonial card
- Container: white card, 8px radius, 16px padding, border #e5e7eb.
- Quote text: Lato, 22px, 400, color #1c1e21; emphasis in italic.
- Author line: Lato, 22px, 400, color #8c9494.
- Outer spacing: lg (30px) top/bottom.

4) Build a KPI metrics strip
- Background: #ffffff; top/bottom padding xl (50px).
- Metric number: Lato, 33px, 700, color #1c1e21; label: Lato, 22px, 400, color #8c9494.
- Columns spaced with md (20px) gaps and aligned center.

5) Compose a final CTA band
- Surface: #ffffff with a thin top border #e5e7eb.
- Headline: DM Serif Display, 41px, 700, line-height 1.2, color #1c1e21.
- Button group: Primary Button (background #1c1e21, text #ffffff, 5px radius, height 60px) and Secondary Button (text #ff8b00).
- Section padding: xl (50px).

## Similar Brands

- Intercom — conversational SaaS with bright accents and clean grids; Beamer is more editorial with a serif voice and yellow hero.
- Canny — product feedback and changelog focus with minimal depth; Beamer uses stronger color and serif headlines.
- AnnounceKit — similar feature set and yellow accents; Beamer's typography is more editorial and its borders replace shadows.
- Productboard — roadmap/feedback narrative with trust bands; Beamer is bolder in color and simpler in elevation.

More like this

Browse Software →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 15 hours ago
modulify.ai
Modulify AI
Modulify
Turn a prompt into a real website or web app—edit, refine, publish.
Homepage · 20 hours ago