Presentations
Bosun slides carry one clear idea at a time, with shared brand foundations and a scale suited to an audience.
On this page
Introduce the subject and the reason to listen.
Speaker notes for this layout
Set a specific title, presenter and date. Keep the opening focused on one promise.
Presentations explain Bosun to customers, crews and collaborators. They share IBM Plex, the Bosun logo, semantic colors and consistent alignment with the product. Slide typography and spacing serve a room or a shared screen; the canvas scales as a whole in the gallery.
Starter deck
Download the self-contained HTML deck. Open it in a browser without a network connection. It includes both slide themes, keyboard navigation, speaker notes and a print layout. Use Present slides for one slide at a time, the arrow keys to move, and Escape to return to the overview. Print / Save PDF prints every slide in the chosen theme; browser headers and footers should be disabled.
Edit a copy of the HTML file to change the text and images. The text remains selectable and the diagram and chart remain HTML elements. Replace the chart's illustrative figures, its description and its source together.
Available: live gallery and editable HTML starter. PowerPoint template: pending.
Layouts and content
| Layout | Use it for | Keep visible |
|---|---|---|
| Cover | Introduce the subject | A short title, presenter and date. |
| Section divider | Signal a change of topic | The next question or subject. |
| Statement | Emphasize one idea | The sentence the audience should remember. |
| Comparison | Explain two choices | The same criteria and comparable evidence on each side. |
| Diagram | Explain a sequence or relationship | Brief labels and an explicit reading direction. |
| Chart and result | Explain what evidence means | Units, direct labels, source, period and sample size. |
| Product demonstration | Show a relevant product detail | A legible crop and enough context to understand it. |
| Closing | Establish the next step | The action or decision, its owner and its timing. |
Keep supporting detail and references in speaker notes. Every slide has a meaningful title and a consistent footer. Screenshots carry their product theme; they do not change color to match the surrounding slide.
Typography
Slide roles live in @bosunkit/tokens/presentations.css. They use IBM Plex Sans, while code and identifiers
may use IBM Plex Mono. Canvas values and point equivalents below come from the token sheet. They are independent
of the interface's default and helm size classes.
| Role | Canvas | Points | Use |
|---|---|---|---|
--bk-slide-display-size | 72px | 54 pt | Cover and section statements |
--bk-slide-title-size | 56px | 42 pt | Slide titles |
--bk-slide-subheading-size | 36px | 27 pt | Comparison and diagram labels |
--bk-slide-body-size | 32px | 24 pt | Short explanations |
--bk-slide-caption-size | 24px | 18 pt | Sources, supporting text and footers |
--bk-slide-metric-size | 112px | 84 pt | One key number |
Shorten copy before reducing its role. Essential labels must be readable at the back of the room. Use the caption role for source lines, and put long citations in notes. Microsoft's presentation accessibility guidance recommends large sans-serif text, sufficient whitespace, meaningful slide titles and an accessible reading order.
Canvas and spacing
The widescreen canvas keeps equal safe margins on every side. The logo anchors the upper left, content occupies the central region, and the footer stays inside the lower margin. The Safe area control in the gallery reveals these boundaries. Use a full-width explanation or a clear column structure; leave room between ideas.
| Token | Value | rem | Preview |
|---|---|---|---|
--bk-slide-margin | 64px | 4rem |
| Token | Value | rem | Preview |
|---|---|---|---|
--bk-slide-gap | 32px | 2rem |
Margins and gaps describe the full slide, so they scale with the preview. The page's controls keep their normal UI typography and touch targets.
Themes, visuals and data
Use Day for bright rooms and handouts, and Dusk when lighting and the display support it. Verify the actual projection before the audience arrives. Text, supporting text and accent roles read the shared palette; the theme choice applies to the slide artwork independently of the documentation page.
Charts use a common scale and direct labels. Mark demonstration figures as illustrative. A screenshot of an alert or instrument preserves its priority, units and integrity information. Describe its relevant detail in the caption or notes, and provide alternative text for the image.
[Measured outcome] under [test conditions].
Follow with verified results, units, test conditions and a source.
Performance
Several numbers with no units, period or comparison.
Before sharing
Check every slide at presentation size and in the exported file. Confirm title fit, reading order, image crops, chart labels, source notes and font availability. A PDF is a fixed handout; retain the editable source alongside it. The HTML starter embeds its fonts and sample screenshot and includes print styles for the full deck.
Related
- Typography: shared typefaces and the role system.
- Spacing: the product's spacing principles.
- Logos: the Bosun mark and its proportions.
- Data visualization: units, chart meaning and maritime information.