A visual reference manual
for Fermyon related materials.

npm install -D @fermyon/styleguide



Color


Core Brand Colors


$seagreen

#34E8BD

rgb(52, 232, 189)

$oxfordblue

#0D203F

rgb(13, 32, 63)

Color Reference:
----------------
Sass $variable
Hex #color value
RGB (color) value

Secondary Accent Colors


$rust

#EF946C

rgb(239, 148, 108)

$lavender

#BEA7E5

rgb(190, 167, 229)

$colablue

#0E8FDD

rgb(14, 143, 221)

Complimentary Tones (for shading)


$darkspace

#213762

rgb(33, 55, 98)

$darkocean

#0A455A

rgb(10, 69, 90)

$darkolive

#1F7A8C

rgb(31, 122, 140)

$darkplum

#525776

rgb(82, 87, 118)

$midgreen

#1FBCA0

rgb(31, 188, 160)

$midblue

#345995

rgb(31, 188, 160)

$lightplum

#D3C3D9

rgb(211, 195, 217)

$lightgrey

#D9DBE8

rgb(217, 219, 232)

$lightlavender

#ECE5EE

rgb(236, 229, 238)

$lightlemon

#F9F7EE

rgb(249, 247, 238)

This is the baseline brand palette, which should be referred to when creating new designs for Fermyon

Typography

Fermyon uses the Sen typeface, which is licensed under the Open Font License. Sen is freely available via Google Fonts and Github for download.


Sen

Designer: Kosal Sen
2015

A Geohumanist sans, Sen is Philatype’s first typeface released under the SIL Open Font License (OFL).

Sen is a geometrically constructed sans-serif with a sensible, friendly look. Think of it as a more neutral version of geometric classics such as Avenir or Futura with a humanist touch. It’s unassuming, unique, and most importantly, easy to read.

When researching typefaces for our work, it became clear that the design intentions that went into the creation of Sen were very much in line with our own communication values. It's a perfect vehicle for our thoughts and ideas; in both principles and aesthetics.



Loading Webfonts

To reduce the size of assets being served, it's best to leverage a CDN where possible. Hence the Styleguide does not contain the bundled up webfont files alongside the images and other assets.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" rel="stylesheet">

Font Fallbacks

In some situations, access to external webfonts may not be possible (certain document formats or software services). If the font cannot be embedded using the @import method of serving it as a local asset, then a substitution should be made to find a close match.

The styleguide font stack defines a number of more common fallback options that are typically installed as defaults on standard devices OS:

Sen, Europa, Avenir, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

Learn more about Fallback Font Stacks here. If a closer substitution is required, seek out other Humanist Sans and Geometric Sans options (Futura, Europa, Avenir are some well-established ones, but have different levels of licensing requirements).

Text Example Styles

Refer to the User Interfaces section for examples of the different text formatting styles contained within the styleguide.

h1 Header

h2 Title

h3 Sub Title

Full set of examples →

Baseline Text Size

The styleguide sets a root font-size of 16px, which is a conservative baseline, chosen to prioritize the presentation of technical content and long-form articles.

In different contexts, this should adjust to suit the user's situation.

For example, a technical documentation page benefits from a wider content width and tighter vertical spacing to accommodate example code snippets; more akin to a legible appliance manual than a traditional book orientation.

Blog articles on the other hand; benefit greatly from a bigger type size, along with a careful balance of width and spacing that mirrors the flow of a printed page (or that of an e-reader).

All of this is important for minimizing the effort required of the user to parse, skim and flow through the various lines of content you are presenting to them. Consider their mode, and tailor the Vertical Rhythm and Typesetting accordingly when you can.

Modifiers

To adjust the sizing of standard page copy, the content wrapper (denoted by the .content classname) can have these modifiers added:

  • .size-16 (already the default)
  • .size-18
  • .size-20

Code Blocks

Displaying legibile, easily parsable chunks of code is very important in our work - in blog posts, docs, etc. Typically we use a monospaced font stack, well-spaced lines and additional syntax highlighting via Highlight.js

SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace

Code Examples:

Bash Example

$ spin templates install --git https://github.com/fermyon/spin --branch v0.2.0
Copying remote template source
Installing template redis-rust...
Installing template http-rust...
Installing template http-go...
+--------------------------------------------------+
| Name         Description                         |
+==================================================+
| http-go      HTTP request handler using (Tiny)Go |
| http-rust    HTTP request handler using Rust     |
| redis-rust   Redis message handler using Rust    |
| ...                                              |
+--------------------------------------------------+

TOML Example

spin_version = "1"
description = "A simple Spin HTTP component in Rust"
name = "spin-hello-world"
trigger = { type = "http", base = "/" }
version = "0.1.0"

[[component]]
id = "spin-hello-world"
source = "target/wasm32-wasi/release/spin_hello_world.wasm"
[component.trigger]
route = "/hello"
[component.build]
command = "cargo build --target wasm32-wasi --release"

Rust Example

use anyhow::Result;
    use spin_sdk::{
        http::{Request, Response},
        http_component,
    };
    
    /// A simple Spin HTTP component.
    #[http_component]
    fn spin_hello_world(req: Request) -> Result<Response> {
        println!("{:?}", req.headers());
        Ok(http::Response::builder()
            .status(200)
            .header("foo", "bar")
            .body(Some("Hello, Fermyon".into()))?)
    }

Illustration

Decorative Designs

Examples of how to use the Fermyon brand styles to create illustrations like these:

Fermyon Illustration

Decoration from the footer of fermyon.com version 1.

Fermyon Illustration

"infra-spaghetti" from the homepage of fermyon.com version 1.

Technology Illustrations

Wasm Icons Wasm Icons
Wasm Icons

Icons

Bindle Bindle: Bindle: Object Storage for Collections

Usage Guidelines

Some examples of common Dos & Don'ts:

Don't make things the same size

Tips on choosing the right logo for the right setting.

Don't make things the same size

Don't put the F inline like this.

Spacing Examples:

A stacked Fermyon logo and wordmark

When combining elements, pay attention to the proportions and spacing. Keep things balanced — if it's hard to use both elements without undermining one of them, then just take it out and use the single element that works best in the situation.

A Fermyon Twitter Card

When combining the wordmark with other content — The scaling of the logo and the text should be similar. Otherwise, the logo is overbearing.


Layouts

Examples of Fermyon-styled starter layouts:


Docs Layout

Has a wide reading pane (max-width: 48.5rem) and a left-hand-side menu, ideal for navigating between sections.

Extra-Wide Docs Layout

Has a max-width reading pane, and a left-hand-side menu, ideal for navigating between sections.


User Interface Styles

Examples

Examples of how different headings and text styles will look.

H1 Heading One

H2 Heading Two

H3 Heading Three

H4 Heading Four

H5 Heading Five

For additional sizing options, see the bulma docs here.

Cosby sweater iphone artisan, squid trust fund photo booth twee blog shoreditch single-origin coffee aesthetic jean shorts messenger bag brooklyn butcher. Iphone fap banksy next level put a bird on it, letterpress photo thundercats biodiesel fanny pack etsy banh mi wayfarers. Sustainable four loko dreamcatcher, vegan single-origin coffee yr cardigan biodiesel williamsburg thundercats salvia master cleanse terry richardson tumblr mcsweeney’s. Lomo gluten-free salvia you probably haven’t heard of them portland. Mlkshk jean shorts carles, etsy artisan farm-to-table sartorial williamsburg marfa PBR leggings trust fund. Mcsweeney’s banh mi lo-fi mustache, fixie cosby sweater tumblr twee fanny pack. Thundercats food truck vegan, hoodie irony artisan beard synth.

^ Hipster Ipsum. Small text example.

Colored text - good for UI messages and alerts.

Text that has the is-primary class.

Text that has the is-info class.

Text that has the is-success class.

Text that has the is-warning class.

Text that has the is-danger class.

Text that has the is-black class.

Text that has the is-dark class.

Text that has the is-light class.

Text that has the is-white class.

For different color usages (background shades, inverted (dark mode) classes, etc view the docs for the color helpers.

Panels & Sections

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Buttons

Buttons have many different states of interaction, and can have different styles depending on their role. By default, Hippo buttons should be rounded and use the is-normal sizing.

Squared buttons:

Grouped (inline) buttons:

Loading...

Disabled state:

Tables

Add New Data
Generic Table Styles Test Actions
Admin Matt Fisher BC, Canada April 01, 2017 Edit Delete
Admin Carolyn Van Slyck Chicago, Illinois April 01, 2017 Edit Delete
Admin Ivan Towlson New Zealand April 01, 2017 Edit Delete
Admin Ronan Flynn-Curran Bay Area, California April 01, 2017 Edit Delete

Documentation Styles

This styleguide is in itself an example of a Fermyon-themed documentation website.

Built on the Bulma grid system with some layout tweaks (like in the proportions of the left menu) and applying t, and other styles contained within this guide.

As we build things and write docs, it's likely we will increase the code footprint of what goes into a docs site. Templates, additional features (search, versioning, languages) — and possibly adding configuration and examples that are specific to the site generation tools we're using to build these websites (aka Bartholomew).

Keep Navigation Consistent

Ideally, the footer sections of a documentation site should tie back into the rest of Fermyon.com, so that the UX of navigating between different sites, apps, and docs is not too choppy.

That means the top bar should be close to fermyon.com, and clearly provide links to the global home (fermyon.com) as well as the local root (/) of the docs site you are viewing. This is demonstrated by the Fermyon > Styleguide hierarchy in the title bar above.

Nice Docs

Inspiration comes from many resources, such as beautiful-docs and the wonderful ReadtheDocs.org.

Slack Themes

As a fully remote company, Slack plays a central role in our work. To decorate the workspace appropriately, here are some Fermyon themes to suit your daytime or nighttime viewing preference:

Light Theme

Light Theme Preview Copy and paste these values to share your Slack settings Sidebar Theme section:
#F8F4F9,#34E8BD,#0D203F,#34E8BD,#D9DBE8,#0D203F,#34E8BD,#EF946C,#ECEDF4,#0D203F

Dark Theme

Dark Theme Preview Copy and paste these values to share your Slack settings Sidebar Theme section:
#0D203F,#34E8BD,#0A191F,#34E8BD,#0A191F,#BEA7E5,#34E8BD,#EF946C,#0D203F,#0D203F

Visit Customizing Your Slack Theme for further instructions on custom themes.

Slides & Document Templates

File templates are a great starting point for making company documents and presentation decks.


Powerpoint Template

PowerPoint

.ppt

A presentation template with editable title "splash" pages and a mixture of light and dark text slides.

Developer Guide

Pending.

 

Working on the Styleguide

Running the Styleguide locally

The CSS Stack

Where's the JavaScript?

This styleguide is intentionally very light on JavaScript. It's common for modern front-end frameworks to be very opinionated about the interactive function in addition to the visual form. In many popular common style frameworks, it becomes a challenge to keep things light and to enables certain interactive parts (like dropdown menus) without importing multiple additional scripts (jquery, bootstrap.js, icon fonts). And typically the content being served only uses a tiny subset of the imports.

At Fermyon, we want to keep our apps light and fast, so that they compile to small sizes and run without requiring a lot of additional libraries, scripts, webfonts, icons, etc. Hence this styleguide is focused on just the visual portion - different projects can build upon these building blocks and utilize other libraries as needed.

Bulma stays true to this, relying on progressive CSS methods for interactive elements like modal pop-up windows and dropdown menus (via the data-target selector attributes for example) and avoids taking on javascript dependencies.

External Resources

Useful links for making icons, designs, and layouts.

  • Favicons: the best tool for rendering high quality, browser and device-friendly icons
  • Practical Typography: one of the best resources on how best to present words.

Accessibility

Most of the web is text. Good 'ol plain text. The most important part of any design is to communicate the content of the medium clearly and effectively — the design should never get in the way of legibility.

Color contrast is an important component of this. All of our brand colors are tested to ensure AAA-compliant scores in terms of color contrast, to ensure legibility is always maintained, whether the content is presented on a light or dark background.

Color contrast checker tools like this one are important for evaluating foreground/background pairings.

The W3C's guidelines on Web Accessibility form the underlying spec for constructing any pages for the web. We aim to adhere to AA standards as a base and ideally AAA standards in the presentation of our content.