Ryoss brand guide

One core brand, seven sub-brands, one extension

Every logo is the Ryoss mark, the RYOSS wordmark and, for sub-brands, one word in the brand colour. The core brand is black and white. Each sub-brand owns exactly one colour. Waypoint extends the base logo and stays black and white.

What a logo is made of

Logos are supplied as outlined artwork. Never retype them; use the files below.

1 2 3

The mark: The R in a rounded square. Black on core logos. On sub-brand logos the box takes the sub-brand colour and the R stays black (white on dark).
RYOSS wordmark: Albert Sans Light (300), all caps, tracking about +0.29 em. Black on light, near-white #F2F2F2 on dark.
Sub-brand word: Albert Sans Black (900), all caps, tracking about +0.20 em, roughly 68% of the wordmark cap height. Always in the sub-brand colour, or mono black or white. Waypoint has no colour: black on light, near-white on dark.

Get a logo

Choose a layout and a background. The preview shows the exact file you will download.

Layout

Background

Cut

Which logo do I need?

Pick what you are making and get the right file.

What are you making?

One colour per sub-brand

Select a swatch to copy its hex code. Contrast ratios are measured against white and black.

Brand colours on white

Their brand colours are too light for text or thin lines on white (about 2:1 or less). Use black or mono logos on white, or these darker companions for graphics on light backgrounds. Logo files keep the original brand colour.

Albert Sans

The logo letters were matched to Albert Sans Light and Black. It is free under the SIL Open Font License.

Try some text Weight 700

Role	Setting
Logo, RYOSS	Albert Sans Light 300, caps, +0.29 em
Logo, sub-brand word	Albert Sans Black 900, caps, +0.20 em
Headings	Albert Sans 700 to 800, tight tracking (−0.01 em)
Body (web)	Source Sans 3, as used on ryoss-labs.com

Install the desktop font Web font (WOFF2) Licence

Give it room

Clear space

Keep a margin on every side equal to the height of the R in the RYOSS wordmark. Nothing (text, edges, other logos) enters that zone.

Minimum size

Layout	Print	Screen
Stacked	22 mm wide	96 px wide
Wide or compact	30 mm wide	140 px wide
Icon	6 mm	16 px (use the favicon files)

Recommended starting values. The clear-space rule and minimums were set for this guide, not taken from the original artwork.

Backgrounds

Use the on-light files on white and pale backgrounds, and the on-dark files on black and deep colours. Keep at least 4.5:1 between the logo and what it sits on. If the brand colour doesn't clear that, use the mono version.

Common mistakes

Also: don't retype the wordmark, mix a sub-brand word with another brand's colour, or put two logos side by side without clear space.

Favicons and app icons

Every brand has a full set: favicons, app icons and the web manifest.

External site

Files

Add it to your site

All downloads

Which file do I use?

I need	Use
A logo on a white or black page, in a document or on the web	`Cropped/SVG` or `Cropped/PNG`. Edge to edge, transparent, no padding.
A logo that fits a set artboard (slide, template)	`Transparent/`. Original artboard, transparent background.
A ready-made image with its own background	`PNG/`, `JPG/`, `WEBP/` (avatar, social banner, stacked light and dark)
Print, or to send to a printer	`PDF/` or `SVG/` (vector)
Photos and email where transparency isn't supported	`JPG/`. On-dark files are on black, the rest on white.
Smaller web images	`WEBP/`. Lossless, transparency kept.
Favicons and app icons, external services	`Favicons/` in each brand folder

Every file is named ryoss-<brand>_<layout>_<background>, so ryoss-weave_stacked_on-dark_cropped.svg is the Weave stacked logo for dark backgrounds, cropped.