# Storyline Brand Identity

A complete profile of **Storyline**'s visual system — colors, typography, components, and personality — extracted from https://www.producthunt.com/posts/storyline-7. Built for designers, agents, and AI tools.

- Page: https://characterquilt.com/branding/storyline
- Machine-readable JSON: https://characterquilt.com/branding/storyline.json

## Quick Facts

| Field | Value |
|---|---|
| Primary | #344054 |
| Accent | #FF6154 |
| Body Font | Segoe UI |
| Heading Font | Segoe UI |

## Color Palette

- primary: #344054
- secondary: #475467
- accent: #FF6154
- background: #FFFFFF
- textPrimary: #000000
- link: #FF6154

## Typography

- primary: Segoe UI — https://fonts.google.com/specimen/Segoe+UI
- heading: Segoe UI — https://fonts.google.com/specimen/Segoe+UI

## Visual Assets

- Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20class%3D%22size-10%20dark%3Ahidden%22%20data-fc-idx%3D%220%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cpath%20fill%3D%22%23FF6154%22%20d%3D%22M40%2020c0%2011.046-8.954%2020-20%2020S0%2031.046%200%2020%208.954%200%2020%200s20%208.954%2020%2020%22%20style%3D%22fill%3A%20rgb(255%2C%2097%2C%2084)%20!important%3B%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M22.667%2020H17v-6h5.667a3%203%200%200%201%200%206m0-10H13v20h4v-6h5.667a7%207%200%201%200%200-14%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E
- Favicon: https://ph-static.imgix.net/ph-favicon-brand-500.ico

## UI Components

- input: background=#F2F4F7, textColor=#4B587C, borderColor=null, borderRadius=9999px, shadow=none
- buttonPrimary: background=#FF6154, textColor=#FFFFFF, borderRadius=9999px, shadow=none
- buttonSecondary: background=#FFFFFF, textColor=#344054, borderColor=#EAECF0, borderRadius=9999px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: tech-savvy professionals and entrepreneurs

## Storyline Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

- **Quickly Build Custom Reports With Articulate Storyline 360 Variables &  eLearning Magic Toolkit! 🚀**
  - Image: https://i.ytimg.com/vi/KxWNO1JkRg8/maxresdefault.jpg
  - Source: https://www.youtube.com/watch?v=KxWNO1JkRg8
- **templates storyline Archives - E-learning Templates - FasterCourse**
  - Image: https://fastercourse.com/wp-content/uploads/edd/2019/01/FasterCourse_Storyline_Early_Morning.png
  - Source: https://fastercourse.com/template/tag/templates-storyline/
- **Storyline for a TV commercial**
  - Image: https://i.pinimg.com/736x/ed/af/fc/edaffce4aaaef7db8a45274924b283c7.jpg
  - Source: https://in.pinterest.com/pin/storyline-for-a-tv-commercial--99079260522901347/
- **How to set up reporting and tracking options in Articulate Storyline -  MIC-LEAD Knowledge Base**
  - Image: https://lead.mic.ul.ie/desk/file/19544827/image.png
  - Source: https://lead.mic.ul.ie/learning-design/how-to-set-up-reporting-and-tracking-options-in-articulate-storyline
- **Storyline Template Design: Flip Interaction | E-Learning Heroes**
  - Image: https://community.articulate.com/t5/s/rwgqn69235/images/bS05MjgwNTgtNjM1ODBpMzJDQTEzOEZFOTkxNEI5NQ?image-dimensions=999x565&revision=1
  - Source: https://community.articulate.com/discussions/discuss/storyline-template-design-flip-interaction/928058
- **Question Reporting from an Articulate Storyline Quiz | Community**
  - Image: https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/20794be5-bef7-40b5-8f6c-28f0bc7d57ed.png
  - Source: https://community.docebo.com/product-q-a-7/question-reporting-from-an-articulate-storyline-quiz-6678

## Working with these fonts

Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each `src: url(...)` to point to your local file path.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.