04 Identity

Though the Reaktor brand consists of many parts and pieces, our logo is the key focal point— an instantly recognizable signature of the brand. For this reason, it is important to use the logo exactly as specified in these guidelines. Doing so will ensure it always looks its best.

Our logo has two applications: full wordmark and the R symbol. Our wordmark is a modified version of our brand typeface Scto Grotesk A and acts as a reliable anchor to various brand expressions. Our R symbol is a dynamic, own-able shorthand for the brand and can be used in more expressive ways as outlined in these guidelines. Both applications can be used alone or alongside other applications.

Clearspace ensures legibility and impact of the logo by isolating it from competing visual elements, such as supporting copy and/or additional graphics.

The clearspace should be considered the absolute minimum safe distance and is defined by X.

Establishing a maximum and minimum logo size ensures the impact and legibility of the logo is never compromised.

Our logo can be scaled to suit any application in both print and digital communications.

For the wordmark, the minimum recommended size is 12px tall in digital, or .15" in print.

When using the wordmark and R symbol, there are a few principles to follow:

The wordmark symbol should always be placed in either the top or bottom left hand corner.

Our sub-branding system is designed to create a clear hierarchy and maintain a balanced relationship between the parent brand and the sub-brands.

We have a number of animated R symbols that can be used for brand videos, social media, and presentations. They have been designed for versatility and brand consistency.

To ensure the integrity and legibility of our identity, never alter or modify the Reaktor logo in anyway.

Our palette was designed to create bold assets that uniquely represent the Reaktor duality of rigor and expression.

Our primary brand color, yellow, symbolizes Reaktorians' optimism, creativity, and proactive spirit. It effectively captures attention, serving well as a background or call-to-action color, especially in contexts requiring expression or heightened focus.

Black and white is bold and straight-forward. It provides clear, no fuss and easy-to-understand information, reserved for headlines, body text and backgrounds.

For improved definition, the Reaktor color palette includes controlled use of tints in 10% increments, between 5% and 95%.

The use of tints adds depth and provides a creative tool for extending the range of the color palettes when needed.

The colors to the right may be used as background colors in our brand system. Choose the logo colorway that creates maximum contrast, as illustrated here.

When pairing our logo with our brand colors, follow these colorways. The logo is always set in black or white to ensure reconigzability and contrast.

When pairing our type with our brand colors, follow these color-ways. Similar to our logo color-ways, it’s crucial that there is enough contrast between the type and background color to ensure accessibility.

Since Reaktor provides support and work to many businesses and industries, we need a way to bring those partnerships to the forefront.

Larken is our primary display typeface, and is used for display and headline moments— particularly for marketing and external-facing materials. We use Larken Thin as the primary weight of this typeface.

Scto Grotesk A is our secondary typeface, used primarily for body copy and all other uses, including more functional information. We use in Light & Medium, and their corresponding italics.

Source Serif 4 Regular (or Normal) and Work Sans are the closest alternatives to our brand typefaces, available for free and in Google Workspace. They should be only be used as alternatives in Google Workspace, or by those who may not have access to our brand typography.

Our spacing scale provides an overview of all measurements used across our website, deck template, social media assets, and white papers.

This is the sizing we use to define our scale in design tools such as Figma or Keynote.

Rems is a relative unit in CSS its size is based on the root element's font-size, 16px in our case, allowing for flexible and consistent typography and spacing scaling across web designs.

Tailwind CSS is a utility-first framework for rapidly building custom web interfaces using class-based styling and we have used this as the foundation of our website. Tailwind has its own system, so for ease of use, we have aligned those values alongside our Pixel and Rem scales.

If for any reason you need to create a new scale, it is important that you maintain the scale’s proportions, and letter-spacing and line-height settings. The following rule will help you calculate each value for your new pixel scale:

16px x 4.5 rem = 72px

For larger scales, such as desktop, labels should be 1x the root font size to preserve balance and contrast. A -1% tracking set in all caps provides more legibility. Labels should be limited to a few words. For smaller scales, such as mobile, labels should be 0.875x the root font size.

Go big. Headlines should generally be at least 2x larger than body copy to preserve contrast and hierarchy.

The Scto subhead should be equal in size to body copy,- but in medium weight.

Our spacing scale provides an overview of all measurements used across our website, deck template, social media assets, and white papers.

This is the sizing we use to define our scale in design tools such as Figma or Keynote.

Rems is a relative unit in CSS its size is based on the root element's font-size, 16px in our case, allowing for flexible and consistent typography and spacing scaling across web designs.

Tailwind CSS is a utility-first framework for rapidly building custom web interfaces using class-based styling and we have used this as the foundation of our website. Tailwind has its own system, so for ease of use, we have aligned those values alongside our Pixel and Rem scales.

If for any reason you need to create a new scale, it is important that you maintain the scale’s proportions, and letter-spacing and line-height settings. The following rule will help you calculate each value for your new pixel scale:

16px x 4.5 rem = 72px

To define a good vertical rhythm and structure:

Start with your most frequently used body text size. For example, our chosen size is 24px with a line-height of 130%.

Measure the distance from the baseline of one line of text to the top of the lowercase letters on the next line.
In our example, this measurement is denoted with an 'X'.

From our measurements, the closest value we determined is 48px.

When spacing solid elements, such as buttons or images use the closest value (48px) or its multiples. A suggested scale based on our example would be: 24px, 48px, 72px, 144px.

Our brand boasts of expertise and competence, and our graphic tools help us express that. The tools and guidelines we provide help maintain clear, confident compositions. Here are some key layout principles that are useful to achieving this.

There’s no need to crowd the page; negative space offers restraint and clarity.

A strong underlying grid gives structure and discipline to each composition. Depending on the sizing and format. All layouts should be divisible by 1, 2, 4, 8, 16 and so on.

The split nods to the two sides of Reaktor: Rigor and expression. This shape can be used to hold illustration and photography. It can also be used to structure layouts or in animation and video transitions.

Compositions should be:

We like to base our layouts off of a 16, 8 or 4 column grid depending on the sizing and format. All are divisible by 1, 2, 4, 8, 16 and so on, and allow for a wide range of possibilities and applications.

Usually good for desktop devices or presentation decks. You have more room to play with and therefore more room for flexibility with the grid.

Great for narrower devices such as a tablets, social posts or A sizes.

Best used on mobile devices.

Our margins and gutters should always be equal to one another. Margins and gutters can vary depending on format needs, but in general we like to lean towards more narrow. Narrow margins and gutters allows us to maximise the space and creates clean, tight compositions.

Our icons have been selected specifically and adjusted to complement our typography.

We use and customised version of the Untitled UI Icons, vector line icons pack designed for digital applications. There are 1,100+ icons across 19 categories to choose from. The pack is regularly updated, providing us with the breadth of icons we need across the industries and topics we work with.

Our icons are set on a 4px grid, aligning with our baseline grid. The default icon size is (24px) with a stroke weight of 1.5px. Other possible icon sizes include: 16px, 24px, 32px, 48px, 72px, 96px, and 192px.

At Reaktor, our unique strength lies in the fusion of creativity and rigor in our community. This duality blends structure with imagination, and humility with ambition, reflecting our internal spirit and external innovation.

For the visual aspect of our brand language, we embrace a harmonious blend of rigor and expression that defines Reaktor.

The rigorous side of our visual identity is characterized by structured patterns and textures, meticulously crafted and computer-generated to signify our analytical prowess, systematic approach, and drive for innovation.

As a diverse and global organization serving a variety of industries, each with unique voices and requirements, we employ five key pillars: Foundation, Shape & Texture, Illustration, Photography, and Infographics.

Each pillar possesses its own distinct level of expression. No single element is more representative of Reaktor than another; rather, they collectively adapt to meet our organization's specific needs and tones.

Our visual pillars are instrumental in defining our organizational identity. They enable us to build brand recognition, engage audiences effectively, simplify complex concepts, and enrich our storytelling. Beyond our foundational pillar, we focus on four additional key pillars to enhance our visual language. These are:

Our Foundation pillar stands as a symbol of stability, reliability and clarity, and harmoniously integrates with our other visual pillars. Foundation is versatile, it can stand alone, or be seamlessly blended to create a cohesive and harmonious visual representation of Reaktor's multifaceted identity.

The Shape & Texture pillar is a fundamental representation of Reaktor's ethos. It encapsulates our commitment to rigor, structure, and innovation. This aspect of our visual language vividly mirrors the spirit of transformation that is inherent in our brand.

This pillar symbolizes the process of deconstruction and re-emergence, stronger and more resilient.

Our monogram, at its core, embodies the Reaktor spirit of transformation. It hints at the process of breaking down only to re-emerge stronger. This reflects our mission: guiding clients to pinpoint challenges, enabling them to disassemble existing structures and rebuild even more robust, future-ready foundations.

Our monogram's division into three primary segments visually manifests this ethos. Such modularity allows these elements to be imaginatively reshaped in bold geometric patterns for use across our branded materials.

To create a tonal range do the following:

While 'Texture' finds its roots in the principles governing 'Shape', it presents a unique character when brought to life. By decreasing the scale of our monogram shapes, the patterns take on a more fluid and organic quality, departing from rigid structures. This design mirrors our ever-evolving discussions, ideas, and agility in embracing new challenges and opportunities.

The Illustration pillar at Reaktor embodies our expressive, empathetic, and relatable nature. It plays a crucial role in engaging our audience on a human level, simplifying complex concepts, and enhancing our visual storytelling. This pillar captures the vibrancy of our culture, showcasing our creativity, empathy, and adaptability.

Our commissioned illustrations are specifically designed to enhance the understanding of abstract concepts in materials such as articles, white papers or case studies. Our style is:

Our illustrations are themed using our distinct brand palette. However, we tailor the color options available to each illustrator we collaborate with, in accordance with their unique style. This approach not only ensures consistency with our brand identity but also infuses variety and freshness into our content.

Our illustrations integrate Reaktor's monogram shapes, serving three key purposes:

We prioritize using illustrations from Form Play as they align closely with the essential qualities we aim to convey in our preferred style. Their artwork is characterized by its minimalism, graphic appeal, textured elements, expressiveness, and uncluttered design, making it an ideal complement to our graphic system.

Form Play has numerous styles, however, the style outlined in this guide is the one we should adhere to.

Our photography should feel authentic, engaging, and positive—depicting people in their natural environments and working collaboratively. These images are candid and relaxed, never overly staged or posed, and shot in natural light with high contrast whenever possible. Our goal is to feel human, not corporate.

Things we like:

Headshots serve as our visual identity in profiles, presentations, our website, and marketing communications. The style of our headshots should display:

Professionalism: Always maintaining a business demeanor, showing our expertise.

Ideally, our case study visuals should combine photography (or video) and imagery of the end product (UI images placed in our templates, device not visible). If there’s no end product or suitable photography, we can commission illustrations (see illustration section).

We can source images in two ways:

Clients' photography can be used if it is high enough quality and aligns with our guidelines on lighting and tone.

Stock imagery can be sourced to hint at a specific industry. It should convey impact and feel more emotional/evocative than traditional tech imagery. We should avoid cliches.

Infographics reflect the rigor and intelligence of our brand. They are clean and simple, but also smart and complex. Small details, large numbers, a strict grid, and bold shapes define the style of our infographics.

Our infographics follow these principles to order to communicate clarity and impact.