---
title: "CPM Calculator"
subtitle: "Plan campaign impressions, fees, and payouts"
description: "Calculate campaign impressions, fees, payouts, and margins."
section: "Tools"
layer: "app"
author: "Studio"
order: 1
status: "published"
access: "admin"
client: "internal"
actionUrl: "./cpm-calculator.html"
actionLabel: "Open Tool"
actionAccess: "public"
---

# Your Primary Headline, Big, Bold, and Unmissable

## Supporting Headline to Guide Your Content

### Section Headings to Keep Content Organised

#### Smaller Subheading for Detailed Content Organisation

##### Compelling Statement That Captures Attention Instantly

###### Clear Navigation Heading for Important Information

This paragraph demonstrates how body text will look across your layout. **Bold text** adds emphasis, while *italics* offer a subtle highlight. You can also use ~~strikethrough~~ to show edits. Combined emphasis with **asterisks and _underscores_** for clarity.

Typography principles for effective design:

1. **Readability** - Use clear, legible typefaces
2. **Hierarchy** - Establish visual order with size and weight
   * Larger sizes for headings
   * Medium sizes for subheadings
   * Standard sizes for body text
1. **Spacing** - Create breathing room between elements
   1. Letter spacing for clarity
   2. Line height for readability
   3. Paragraph spacing for flow
4. **Consistency** - Maintain uniform styling throughout

   You can have properly indented paragraphs within list items. This extended paragraph serves to demonstrate how substantial blocks of text will behave across your layout, giving you a realistic sense of how readers will experience longer-form content.

   To have a line break without a paragraph, you will need to use two trailing spaces.  
   This maintains readability while keeping content compact.  
   (This is particularly useful for documentation where precision matters.)

* Unordered lists can use asterisks
- Or minuses
+ Or pluses

1. Type with Purpose
   1. Design with Intent
      1. Making Letters Matter
         1. Typography That Tells Your Story
2. From Serif to Sans

* Fonts That Speak Volumes
  * Modern Design Principles
    * Visual Hierarchy
      * Content Organization
* Strategic Typography

- [ ] Review heading hierarchy
- [x] Document font scales
- [ ] Update spacing guidelines
  - [x] Define line heights
  - [ ] Create usage examples

For further information, check out [this link](overview.html), which will take you to another page.

Visit [ByDefault Studio](https://bydefault.studio "ByDefault Design System") for comprehensive guidelines.


Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[tokens]: https://bydefault.studio/design-system#tokens
[typography]: https://bydefault.studio/design-system#typography
[1]: https://bydefault.studio
[link text itself]: https://bydefault.studio/contact

Here's the ByDefault favicon (hover to see the title text):

Inline-style: ![ByDefault Favicon](../assets/icons/favicon.svg "ByDefault Studio Favicon")

Reference-style:
![ByDefault Logo][logo]

[logo]: ../assets/icons/favicon.svg "ByDefault Studio Logo"

<img src="assets/images/og-default.jpg" alt="Example image" class="border border-secondary padding-m max-width-full">

<div class="block gap-l border border-secondary padding-l">
  <h3>Custom Block Example</h3>
  <p>This is a custom HTML block with a heading, text, and button. You can use any design system classes to style it.</p>
  <button class="button">Action Button</button>
</div>

:root {
  /* Typography tokens */
  --font-primary: "Arial", sans-serif;
  --font-s: 16px;
  --line-height-l: 1.4;
  
  /* Color tokens */
  --text-plain: var(--black);
  --text-link: var(--green);
  --background-plain: var(--white);
}

// Design system token usage
const designTokens = {
  spacing: {
    xs: 'var(--space-xs)',
    s: 'var(--space-s)',
    m: 'var(--space-m)'
  },
  colors: {
    primary: 'var(--text-primary)',
    accent: 'var(--text-link)'
  }
};

No language indicated, so no syntax highlighting.
Use this for plain text examples or design notes.

The ByDefault design system uses `CSS custom properties` for all design tokens. Inline `code` has `back-ticks around` it for clarity.

```css
:root {
  /* Typography tokens */
  --font-primary: "Arial", sans-serif;
  --font-s: 16px;
  --line-height-l: 1.4;
  
  /* Color tokens */
  --text-plain: var(--black);
  --text-link: var(--green);
  --background-plain: var(--white);
}
```

```javascript
// Design system token usage
const designTokens = {
  spacing: {
    xs: 'var(--space-xs)',
    s: 'var(--space-s)',
    m: 'var(--space-m)'
  },
  colors: {
    primary: 'var(--text-primary)',
    accent: 'var(--text-link)'
  }
};
```

```
No language indicated, so no syntax highlighting.
Use this for plain text examples or design notes.
```

Design system spacing tokens:

| Token | Value | Pixels | Usage |
| ----- |:-----:| -----: | ----- |
| `--space-xs` | 0.25rem | 4px | Tight spacing |
| `--space-s` | 0.5rem | 8px | Small gaps |
| `--space-m` | 0.75rem | 12px | Medium spacing |
| `--space-l` | 1rem | 16px | Standard spacing |
| `--space-xl` | 1.5rem | 24px | Large spacing |

Typography scale tokens:

| Token | Size | Line Height | Use Case |
| --- | --- | --- | --- |
| `--font-xs` | 14px | 1.4 | Small text |
| `--font-s` | 16px | 1.4 | Body text |
| `--font-m` | 18px | 1.4 | Default |
| `--font-l` | 20px | 1.4 | Subheadings |
| `--font-xl` | 22px | 1.2 | Headings |

> Words matter, but how those words are presented matters just as much. Typography transforms content from mundane to magical, from ordinary to extraordinary.

> Typography is more than style; it's about communication. The right type makes content readable, relatable, and engaging, drawing readers into the heart of the message.

> The details are not the details. They make the design. — Charles Eames

> Typography is the craft of endowing human language with a durable visual form.
>
> > Good design is as little design as possible. — Dieter Rams
>
> Every letter, every space, serves a purpose in creating cohesive digital experiences.

> ## Typography Principles
>
> 1.   **Readability** - Use clear, legible typefaces
> 2.   **Hierarchy** - Establish visual order with size and weight
>
> Here's how to apply spacing:
>
>     padding: var(--space-l);
>     margin: var(--space-xl);

Section break

---

Typography section

***

Design tokens section

___

Content organization section

This paragraph demonstrates how body text will look across your layout. **Bold text** adds emphasis, while *italics* offer a subtle highlight.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Visit our website: <https://bydefault.studio>

Contact us: <hello@bydefault.studio>