A visual reference manual
for Fermyon related materials.

npm install -D @fermyon/styleguide

Color

Core Brand Colors

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

Secondary Accent Colors

Complimentary Tones (for shading)

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

Typography

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

When researching typefaces for our work, it became clear that the design intentions that went into the creation of Work Sans 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=Work+Sans:wght@400;600&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:

"Work Sans", 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

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()))?)
    }

Logo

Wondering which version you should use in a particular setting? Read the Usage Guidelines.

Files & Formats

	The F "icon" logo (without padding) SVG
	The F "icon" logo (with padding) PNG
	The "wordmark" text logo. PNG | SVG

The Doorway Icon

Logo Lockups

Illustration

Decorative Designs

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

Decoration from the footer of fermyon.com version 1.

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

Technology Illustrations

Icons

Bindle: Bindle: Object Storage for Collections

Usage Guidelines

Some examples of common Dos & Don'ts:

Tips on choosing the right logo for the right setting.

Don't put the F inline like this.

Spacing Examples:

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.

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:

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-link 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

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.

Rounded Rounded Rounded Rounded Rounded Rounded

Small Default Normal Medium Large

Squared buttons:

Normal Normal Normal Normal Normal Normal Normal

Grouped (inline) buttons:

Loading...

Disabled state:

Tables

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

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

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

.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.

• Web Content Accessibility Guidelines
• Measuring Typographic Scale & Rythm