Teemu Hakala

Generated Oct 29, 2026

DESIGN.md for keynote.framer.website

keynote.framer.website5 colors3 componentsManrope

Remix

2 screenshots captured· keynote.framer.website

1 / 2 · Keynote → Premium Event Template for Framer · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Keynote
description: |
  Keynote embodies a bold, high-impact aesthetic designed for premium events and
  creative conferences. The design system pairs a striking purple brand accent
  (#B0A6DF) with dramatic dark-to-light contrasts—deep blacks (#000000) serving
  as primary surfaces and stark whites (#FFFFFF) for typography and accents.
  This deliberate interplay creates visual drama and commanding presence.
  Typography is oversized and assertive, with generous negative tracking on
  display sizes (at -12px letter-spacing), commanding viewer attention. The
  aesthetic is contemporary, unapologetic, and speaks to creative audiences who
  value bold visual communication over subtlety.
source:
  url: "https://keynote.framer.website"
  pagesAnalyzed: 1
  extractedAt: 2026-10-29
  tokensMeasured: true
colors:
  primary: "#B0A6DF"
  link: "#0000EE"
  surface-alt: "#000000"
  ink: "#000000"
  body: "#FFFFFF"
  neutral-1: "#1C1C1C"
typography:
  display-xxl:
    fontFamily: Manrope
    fontSize: 240px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -12px
  display-xl:
    fontFamily: Manrope
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -3.2px
  display-lg:
    fontFamily: Manrope
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.44px
  heading-md:
    fontFamily: Manrope
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.64px
  heading-sm:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.48px
  body-xl:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.48px
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.36px
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
  body-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.28px
  body-sm-strong:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: -0.28px
  body-xs:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0px
  nav:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.4px
  caption:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.24px
rounded:
  none: 0px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 40px
  xxxl: 64px
  section: 80px
  band: 120px
shadows:
  sm: "rgba(0, 0, 0, 0.5) 0px 0px 24px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px"
elevationStrategy: single-tier
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#000000"
    surfaceRaised: "#000000"
    text: "#000000"
    textMuted: "#FFFFFF"
    border: "#E0E0E0"
    accent: "#9588D4"
    accentFg: "#000000"
    focusRing: "#B0A6DF"
    elevation: shadow
  dark:
    bg: "#0E0E11"
    surface: "#1C1C1F"
    surfaceRaised: "#29292B"
    text: "#FCFBFE"
    textMuted: "#A2A1A4"
    border: "#353537"
    accent: "#B0A6DF"
    accentFg: "#0B0B0C"
    focusRing: "#B0A6DF"
    elevation: "border+surface"
  contrastFailures:
    - "light: muted on bg = 1:1 (needs 4.5:1)"
    - "light: text on surface = 1:1 (needs 4.5:1)"
components:
  button-filled:
    typography: "{typography.body-xs}"
    textColor: "{colors.link}"
    height: 56px
    padding: "2px 32px 2px 70px"
    rounded: 800px
    backgroundColor: "{colors.body}"
  button-primary:
    typography: "{typography.body-xs}"
    textColor: "{colors.link}"
    height: 44px
    padding: "16px 24px 16px 24px"
    rounded: 64px
    backgroundColor: "{colors.primary}"
  footer:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
    padding: "80px 40px 80px 40px"
    backgroundColor: "{colors.surface-alt}"
  link:
    typography: "{typography.body-xs}"
    textColor: "{colors.link}"
    padding: "40px 40px 40px 40px"
    rounded: 16px
    backgroundColor: "{colors.neutral-1}"
  link-sm:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
    padding: "40px 40px 40px 40px"
    rounded: 16px
    backgroundColor: "{colors.neutral-1}"
states:
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 240
    bodyPx: 12
    sectionPaddingX: 16
  - width: 768
    containerWidth: 736
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 240
    bodyPx: 12
    sectionPaddingX: 16
  - width: 1024
    containerWidth: 944
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 240
    bodyPx: 12
    sectionPaddingX: 40
  - width: 1280
    containerWidth: 1200
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 240
    bodyPx: 12
    sectionPaddingX: 40
  - width: 1440
    containerWidth: 1360
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 240
    bodyPx: 12
    sectionPaddingX: 40
coverage:
  statesFound: 11
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Keynote

1. Visual Theme & Atmosphere

Keynote embodies a bold, high-impact aesthetic designed for premium events and creative conferences. The design system pairs a striking purple brand accent ({colors.primary} — #B0A6DF) with dramatic dark-to-light contrasts—deep blacks ({colors.surface-alt} — #000000) serving as primary surfaces and stark whites ({colors.body} — #FFFFFF) for typography and accents. This deliberate interplay creates visual drama and commanding presence. Typography is oversized and assertive, with generous negative tracking on display sizes ({typography.display-xxl} at -12px letter-spacing), commanding viewer attention. The aesthetic is contemporary, unapologetic, and speaks to creative audiences who value bold visual communication over subtlety.

Key Characteristics

Stark monochromatic foundation (black backgrounds, white text) with purple brand accent
Extreme display typography with tight letter-spacing for impact
Minimalist UI components with pill-shaped buttons and rounded surfaces
High contrast for maximum readability and visual hierarchy
Premium, event-focused positioning with focus on impact over clutter

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #B0A6DF): Used for primary CTAs, active states, and brand accents; the signature lavender-purple that anchors the visual identity

Interactive

Link ({colors.link} — #0000EE): Standard web blue for inline text links and link-based interactions

Neutral Scale

Surface Alt / Ink ({colors.surface-alt} — #000000): Primary dark surface for section bands, hero backgrounds, and heading text
Body ({colors.body} — #FFFFFF): Primary light text color for body copy, contrast element against dark surfaces
Neutral / Decorative ({colors.neutral-1} — #1C1C1C): Secondary neutral; no measured role, treated as decorative or subtle surface variation

3. Typography Rules

Font Family

Primary: Manrope (weights: 400, 500, 700, 800)
Secondary: sans-serif (weights: 400)

Fallback stack: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Manrope	240px	800	1.1	-12px	Hero headline; maximum impact
Display XL	Manrope	80px	500	1.1	-3.2px	Section hero; major title
Display LG	Manrope	48px	500	1.1	-1.44px	Subsection heading
Heading MD	Manrope	32px	500	1.4	-0.64px	Card title, prominent label
Heading SM	Manrope	24px	500	1.2	-0.48px	Small section heading
Body XL	Manrope	24px	500	1.4	-0.48px	Large body, call-out text
Body LG	Manrope	18px	500	1.4	-0.36px	Primary body copy
Body MD	Manrope	16px	500	1.0	0px	Standard body paragraph
Body SM	Manrope	14px	500	1.4	-0.28px	Small text, metadata
Body SM Strong	Manrope	14px	700	1.4	-0.28px	Emphasized small text
Nav	Manrope	20px	500	1.4	-0.4px	Navigation link text
Caption	Manrope	12px	500	1.4	-0.24px	Image captions, fine print
Body XS	sans-serif	12px	400	(not measured)	0px	Minimal text, UI labels

Principles

Negative tracking on display sizes is a defining trait: all display roles (XXL through LG) use tight negative letter-spacing to create visual compression and impact
Generous line-height on body (1.4) ensures legibility in light text over dark surfaces
Weight scale: Manrope 800 for hero, 500 for secondary/body, 700 for emphasis only
Monospaced fallback reserved: sans-serif used only for minimal UI text
Display compression: Tighter letter-spacing at larger sizes creates visual weight and presence

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#B0A6DF)
Text color: {colors.link} (#0000EE)
Padding: 16px 24px 16px 24px
Height: 44px
Border radius: 64px (pill-shaped, not full-circle)
Border: 0px
Font: sans-serif, 12px, weight 400
Box shadow: none
Width: 152px (measured)

Filled Button

Background: {colors.body} (#FFFFFF)
Text color: {colors.link} (#0000EE)
Padding: 2px 32px 2px 70px (asymmetric, icon-inclusive layout)
Height: 56px (taller for prominent CTA)
Border radius: 800px (highly rounded pill)
Border: 0px
Font: sans-serif, 12px, weight 400
Box shadow: none
Width: 195.047px (measured)

Navigation

Navigation Link

Text color: {colors.body} (#FFFFFF) against dark background
Font: Manrope, {typography.nav} (20px, 500, letter-spacing -0.4px)
Box shadow (applied to nav container): rgba(0, 0, 0, 0.5) 0px 0px 24px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px
No padding specified; text-based, minimal styling

Footer

Footer Container

Background: {colors.surface-alt} (#000000)
Text color: {colors.body} (#FFFFFF)
Padding: 80px 40px 80px 40px (horizontal breathing room with generous vertical space)
Border radius: 0px (sharp edges, full-width)
Font: sans-serif, 12px, weight 400
Box shadow: none
Height: 368.594px (measured)
Width: 1440px (desktop max-width)

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Scale:

{spacing.xxs} = 4px — micro-adjustments, rarely used
{spacing.xs} = 8px — tight spacing between inline elements
{spacing.sm} = 12px — small gaps
{spacing.md} = 16px — standard component padding
{spacing.lg} = 20px — breathing room in compact layouts
{spacing.xl} = 24px — generous component spacing
{spacing.xxl} = 40px — large section internal padding
{spacing.xxxl} = 64px — full-section vertical spacing
{spacing.section} = 80px — major section vertical gaps
{spacing.band} = 120px — maximum separation between major content blocks

Usage contexts:

Component padding: {spacing.md} to {spacing.xl}
Section vertical: {spacing.section} to {spacing.band}
Navigation and footer use {spacing.xxl} horizontally

Grid & Container

Max width: 1200px (at viewport 1280px+) / 1360px (at viewport 1440px+)
Column count: 6 columns consistently across all breakpoints
Content column widths:
- 375px viewport: 343px content
- 768px viewport: 736px content
- 1024px+ viewports: 944px to 1360px content
Section padding horizontal: 16px (mobile 375–768px), 40px (desktop 1024px+)
Full-width sections (footer, hero bands): extend edge-to-edge

Whitespace Philosophy

The system embraces asymmetric, generous whitespace that prioritizes impact over density. Dark surfaces are left uncluttered; text floats in negative space. Vertical rhythm uses {spacing.section} (80px) as the standard beat between major content blocks, with {spacing.band} (120px) reserved for the most significant transitions. This breathing room reinforces the premium, event-focused positioning.

Border Radius Scale

{rounded.none} = 0px — sharp edges; footers, full-width sections
{rounded.full} = 9999px — pill/circle shape; buttons, rounded link containers

Component radius mapping:

Buttons: 64px (primary, pill but not full-circle) and 800px (filled, heavily rounded)
Links: 16px (medium roundness for card-like link containers)
Footer: 0px (no radius, full-width)
Images: 0px (sharp)

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, solid background	Buttons (no box-shadow), primary surfaces
Navigation Overlay	`rgba(0, 0, 0, 0.5) 0px 0px 24px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px`	Navigation container; dual-layer shadow (dark blur + light outline)

Shadow Philosophy: Keynote employs a single-tier, color-blocking elevation strategy. Depth is achieved primarily through surface color changes (dark black bands alternating with light sections) rather than drop shadows. When shadow is used (navigation only), it combines a soft dark blur (rgba(0, 0, 0, 0.5) at 24px blur) with a hairline white outline stroke (rgba(255, 255, 255, 0.1) at 2px border), creating a floating impression without visual clutter. This restraint maintains the bold, graphic aesthetic.

Opacity Levels

The system declares four opacity points used for overlay and transparency effects:

75% (0.75) — Strong presence, barely reduced visibility
50% (0.50) — Half transparency, moderate overlay
25% (0.25) — Light touch, minimal interference
5% (0.05) — Hairline trace, almost imperceptible

These are applied to overlays, navigation effects, and border strokes (as seen in the navigation shadow's white outline at 10% opacity calculated from rgba(255, 255, 255, 0.1)).

Z-index / Layering

Base (z: 1–8): Content layers, default stacking
Dropdown (z: 10): Menu or expanded content above base
Toast (z: 2147483647): Maximum z-index; notifications and alerts above all

7. Do's and Don'ts

Do

Use {colors.primary} (#B0A6DF) only for primary CTAs and brand accents; it anchors visual hierarchy and should never clutter the interface
Pair dark sections with white text — the stark contrast is intentional and essential for readability at large display sizes
Embrace negative letter-spacing on display typography; it is a signature trait that communicates premium positioning
Use {spacing.section} (80px) or {spacing.band} (120px) for vertical rhythm between major content blocks; whitespace is a design tool
Apply pill-shaped buttons (64px to 800px border-radius) for CTAs; angular buttons break the premium aesthetic
Keep navigation text clean and minimal — Manrope 500 at 20px with -0.4px tracking; avoid decoration
Reserve shadows for navigation only; flat surfaces reinforce the graphic design system

Don't

Do not introduce new colors outside the defined palette; the 5-color system is intentionally restrained
Do not use serif fonts; Manrope and sans-serif (fallback) are the only typefaces
Do not apply shadows to buttons, links, or cards; this system does not layer depth via elevation
Do not over-tighten line-height on body text below {typography.body-lg} (18px); maintain 1.4 for legibility
Do not round corners on images or full-width sections (e.g., footer); {rounded.none} keeps them graphic
Do not reduce {spacing.section} between major sections; whitespace communicates luxury
Do not combine multiple accent colors in a single interface; {colors.primary} + {colors.link} only when both roles are present
Do not mix font weights recklessly; use 500 for UI, 800 for hero, 700 for emphasis only

8. Responsive Behavior

Breakpoints

Viewport	Column Count	Content Width	Section Padding X	Largest Display Size	Body Size	Notable Changes
375px	6	343px	16px	240px	12px	Mobile baseline; tight padding
768px	6	736px	16px	240px	12px	Tablet; increased content area
1024px	6	944px	40px	240px	12px	Desktop transition; generous padding
1280px	6	1200px	40px	240px	12px	Large desktop
1440px	6	1360px	40px	240px	12px	Maximum width reached

Breakpoint strategy:

No layout collapse observed; 6-column grid maintained across all sizes
Navigation always visible (no mobile menu toggle detected in extraction)
Display typography ({typography.display-xxl} at 240px) remains constant across viewports — no responsive scaling
Body text remains 12px across all sizes (unusual; typically would scale)
Horizontal padding jumps from 16px to 40px at 1024px

Touch Targets

Button heights: 44px (primary) and 56px (filled) — meet WCAG minimum for touch at 44×44px
Navigation links: Manrope 20px text; no explicit touch target padding measured, but text size is sufficient
Link containers: 16px border radius with 40px internal padding; generous hit area

Collapsing Strategy

This site employs a stable multi-breakpoint layout with no component collapse. Behavior per viewport:

Mobile (375px): 6-column grid, 16px section padding, content 343px wide
Tablet (768px): 6-column grid, 16px section padding, content 736px wide (increased proportionally)
Desktop (1024px+): 6-column grid, 40px section padding, content 944px to 1360px wide
Hero typography does not scale — display text remains 240px across all sizes, allowing text to overflow or require careful layout on mobile (not explicitly handled in extraction)
Navigation remains always visible (no drawer or collapse to hamburger)
Footer maintains 80px vertical padding even on mobile

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary / Brand ({colors.primary} — #B0A6DF)
Secondary Links: Link ({colors.link} — #0000EE)
Primary Surface / Background: Surface Alt / Ink ({colors.surface-alt} — #000000)
Body Text: Body ({colors.body} — #FFFFFF)
Secondary Surface (Decorative): Neutral / Decorative ({colors.neutral-1} — #1C1C1C)

Iteration Guide

Start with color blocking: Alternate dark (#000000) and light (#FFFFFF) sections; use #B0A6DF for exactly one primary call-to-action per screen.
Apply typography hierarchy strictly: Hero text = {typography.display-xxl} (240px, weight 800, -12px letter-spacing). Body = {typography.body-lg} (18px, 500, -0.36px tracking). Do not deviate or scale.
Button styling is pill-shaped only: Primary buttons use 64px border-radius with {colors.primary} background and blue text. Filled buttons use 800px radius with white background. No flat, rectangular buttons.
Whitespace is mandatory: Place {spacing.section} (80px) of vertical gap between major content blocks. Horizontal padding at mobile is {spacing.xl} (40px)... wait, the extraction shows 16px—use 16px on mobile, 40px on desktop.
Navigation carries the only shadow: Use rgba(0, 0, 0, 0.5) 0px 0px 24px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px on nav containers only. All other elements are flat.
Negative letter-spacing on display: Every heading from {typography.display-lg} and above must retain its negative letter-spacing value exactly as specified; this is not a rounding error—it is intentional compression.
Footer is full-width, zero radius: #000000 background, #FFFFFF text, {spacing.xxl} (40px) horizontal padding, {spacing.section} (80px) vertical padding. Never add border-radius.
Opacity is minimal: Use 5% (0.05) for hairline strokes, 25% (0.25) for light overlays. Reserve 50% and 75% for primary overlays only.
No responsive scaling of typography: Display text remains 240px at all viewports (check mobile rendering carefully; overflow may require layout adjustment).
6-column grid throughout: Maintain column count across all breakpoints; scale content width via padding adjustment and container width, not by hiding columns.

10. Known Gaps

No semantic status colors: The site does not declare error, success, warning, or info states. Do not invent a semantic ramp; use the primary accent for all necessary emphasis.
No gradients or decorative meshes: All fills are solid colors. Background images are photography or solid bands only.
Interaction states partially documented: Link :hover states are defined in CSS but resolve to CSS variables with fallbacks; exact final colors depend on context and cannot be precisely specified beyond the extracted palette. Hover background color may apply conditionally. No other button, input, or checkbox states were extracted.
No dark/light mode switching: The extracted design represents a single, intentionally dark theme. No light-mode variant was observed or measured.
Opacity values noted but context unclear: Four opacity levels (5%, 25%, 50%, 75%) are declared; specific use cases for 50% and 75% were not traced to components in the extraction.
Z-index values sparse: Only 3 distinct z-index values detected (1, 10, 2147483647 for toast). Intermediate layering for modals, dropdowns, and sticky elements may exist but was not fully measured.
Form inputs and checkboxes not extracted: No form styling data was captured; assume default browser rendering or note this as a gap in component coverage.
Breakpoint responsiveness incomplete: Display typography does not scale; exact mobile rendering of 240px headlines on 375px viewports was not confirmed—overflow or text wrapping may occur and should be tested.
One color role unassigned: {colors.neutral-1} (#1C1C1C) has no measured role and is treated as decorative; its use may be undocumented.
Surfaces behind authentication not visited: This design system reflects only the publicly visible landing page(s). Authenticated experiences, dashboards, or gated content are not represented.

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

Remixes of keynote.framer.website

Latest remixes

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

Remix it