DocumentationSupportSign in
Tiny logo
ProductsPluginsCase StudiesPricing
  Talk to an expertCreate Account
Tiny logo

Tiny Style Guide

Home of our values, voice, tone, logo assets and web style guide.

Welcome to the Tiny style guide. This guide was created for the Tiny team, but if you work for another organization (from partners to customers) we hope you find it useful too. You'll find a range of logo assets, our official color palette, guidelines for writing at Tiny, along with a clear statement of our mission.

Tiny’s Mission

To help everyone build beautiful content for the web.

Values

One year before the merger of Ephox and TinyMCE in 2015, the then Ephox team celebrated the company's 15th anniversary. We held an all-hands company offsite in Hawaii. During this trip, we spent time discussing our values using the Big 5 framework. We translated this discussion into the following five values, which remain as true for us today as they did four years ago.

Openness

We are curious and open to change. The technology world changes rapidly and so must we. We are willing to explore new ideas, embrace diversity and be a little unconventional at times. We provide the latest technologies, styles, or flavors to our customers. We are also transparent and willing to share.

Responsibility

Our customers and users depend on our software and we take our responsibility seriously. Our attention to detail, expertise and efficiency help our users to fulfill their mission in life. With over 100 million users, a small joy we create or frustration that we solve is amplified to the point that we save a life with each new feature or bug fix.

Authenticity

We are famous for developing the world’s most popular “What You See Is What You Get” (WYSIWYG) editors and this carries through to the way we do business. We are sincere: loyal to each other, our customers and our users. We are grateful to those who invest their time and money with us. We believe that “straight shooter” is a term of endearment and wish to embody humility and being down-to-earth.

Tenacity

Life is too short to put up with drama and we pride ourselves on being cool, calm and collected. We wish to make an impact for the better on millions of people and we will pursue this goal with passion and perseverance. We are secure in ourselves and hold firm to our goals despite setbacks or challenges.

Enthusiasm

We are friendly, adventurous and bold. We are optimistic about the future and ambitious in our plans to make it happen. We don’t mind a bit of fun! We want our products to be accessible and easy to use ... to generate enthusiasm and happiness.

Voice & Tone

Our Personality

We communicate our values through our writing. We surveyed our team in 2016, and our top 10 brand traits we wished to build are:

  • Trustworthy
  • Innovative
  • Modern
  • Responsible
  • Consistent
  • Friendly
  • Cooperative
  • Sincere
  • Flexible
  • Precise
  • Dynamic

Everything we write, or say, is:

  • Concise but not abrupt
  • Confident but not cocky
  • Friendly but not sloppy
  • Precise and factual but not pedantic
  • Comprehensive but not complicated
  • Approachable but not patronizing
  • Fun but not goofy

We do not take ourselves too seriously and sometimes play a little bit with Australian clichés and writing clichés (see below). It is always more important to be clear and understood than it is to be entertaining.

Spelling

We have standardized on U.S. English.

Technical Writing

The Microsoft Manual of Style is a great resource for technical writing. You can then seek inspiration from Microsoft’s documentation. For example, user help for Microsoft Word or the developer documentation for their Text Analytics API.

As IBM is an important partner it is also worth referring to the IBM Style Guide and examples from their online writing.

Active Voice

Use the active rather than passive voice. It’s clearer and more direct. For example:

Active:

  • Tie the ribbon around the candle
  • Increase the canvas size to 800px
  • Change the shutter speed to 1/250s

Passive:

  • The ribbon is tied around the candle
  • The canvas size is increased to 800px
  • The shutter speed is changed to 1/250s

Addressing the Reader

Where possible, address the reader as "you". It makes our content more personal when we speak to them directly. For example:

  • In this tutorial, I’ll show you how to create a really simple button.
  • I hope you found the tutorial helpful.

Referring to the Author

When referring to the instructor, use "I". It creates a more personal connection between the instructor and reader:

  • I hope you found the tutorial helpful.
  • In this tutorial, I’ll show you how to create a really simple button.

Concise and Precise

You should:

  • Use contractions (e.g. can’t)
  • Not let caveats dictate unwieldy grammar – e.g. say ‘You can’ rather than ‘You may be able to’
  • Not use long sentences where a short sentence will suffice

Plain English

Where appropriate, choose plain English over-complex language. Don’t use formal or long words when easy or short ones will do. Use ‘buy’ instead of ‘purchase’, ‘help’ instead of ‘assist’, ‘about’ instead of ‘approximately’.

No: “A good photographer keeps his gear neatly organized.”

Yes: “Good photographers keep their gear neatly organized.”

Email copy

As stated, our style is direct and concise. This is also true for writing email copy. If you're ever stuck, the site Good Email Copy is an excellent resource.

Clichés

Writing Clichés

Writing is hard, and we are here to help. Quotes about writing and editing also offer great potential.

Australian Clichés

We proudly maintain a research, development and engineering office in Australia. For the Aussies, Australian slang should be avoided, but a good cliché is acceptable to lighten the mood and celebrate the animals and lifestyle of our heritage. Clichés should be used rarely – no more than once per content item. Do not overdo it – we have great roots in Sweden (via Moxiecode) and the U.S. (10 years and counting!) and we value diversity with more than a dozen nations represented in our team.

Some example clichés:

  • Calling everyone “mate”
  • Every living thing in Australia can kill you in less than a minute, and they are everywhere you go
  • Full of cute cuddly animals
  • Everyone practically lives at the beach
  • Everyone is descended from convicts
  • One huge desert and it is always hot
  • People live in the middle of nowhere and ride kangaroos to work, possibly in their pouch
  • Sports crazy
  • Everyone knows how to play the didgeridoo and throw a boomerang
  • Wrestling crocodiles
  • Live near a beach and are all great at surfing
  • And, the perennial “throw a shrimp on the barbie!”

Some examples in context:

  • Tiny’s development team took a break from wrestling crocodiles to fix a few bugs in TinyMCE.
  • We threw a few shrimp on the barbie, worked hard, and surprised ourselves with some great new features in PowerPaste.

Credits

Inspired by Envato, Frontify and others.

Product Description

Introducing Tiny

TinyMCE is an incredibly well-known brand in the developer ecosystem.

This said, it is important that a prospect learns that there is a team behind our products. Most people understand and value that there is a "company" behind the "project." Anybody willing to spend money with us will also want to know and learn about the organization.

There are also many opportunities to introduce both TinyMCE and Tiny. For example, we can send a newsletter from "newsletter@tiny.cloud" with the subject "See what’s new in TinyMCE 5."

Notes on Naming

Editor

The word "editor" has it roots in Latin. Thousands of years ago it meant someone "who puts forth." By 1712, it came to mean a "person who prepares written matter for publication." Although some consider an "editor" a commodity, there is plenty to be proud of in offering a powerful editor that helps people publish content.

In general use today in the software world, the word "editor" refers to lots of different types of editors. For example, a programmer uses an editor to write code. The first page of Google has a mixture of results but does include three photo editors. For this reason, it is typically better to qualify the word editor with an adjective such as "WYSIWYG," "rich text," "visual," or "online."

WYSIWYG

"What You See Is What You Get" as it applies to software first appeared in the 1970s when engineers at Xerox PARC devised a point-and-click interface for creating documents. The phrase predates the technology where the comedian Flip Wilson’s alter ego Geraldine would say what-you-see-is-what-you-get to emphasize her authenticity.

Technically, our products are a "WYSIWYG HTML editor." This description is unnecessarily explicit in most circumstances. You should shorten it to "WYSIWYG editor" or even just "WYSIWYG." All of these are acceptable to use, with a preference for just "WYSIWYG."

Product Naming

Giving products a meaningful name is not an easy task. Even the New York Times thinks there’s a weird science to naming new products. Which is why we have five simple rules to help you remember our naming conventions:

  • Use plain English. No inventing new compound words. E.g. Tiny Spell Checker Pro, not, SpellCheckingMagic.
  • The name should explain product functionality as clearly as possible. E.g. Tiny Advanced Code Editor, not, Cool IDE Thing.
  • Marketing and codebase names should be similar. This helps developers easily match the plugin or API they’re using with content such as docs. E.g. Tiny Enhanced Media Embed and "mediaembed." To avoid naming conflicts and confusion, Product Management and Product Marketing should discuss naming very early in the development process.
  • Product names are always "proper names". If you don’t know what this means, read this. E.g. when referring to our Cloud services, use a capitalized ‘C’. "Tiny cloud" does not exist. "Tiny Cloud" does.
  • If you're still unsure about a product name, speak with Tiny's VP Marketing for guidance.

Lastly, when naming solutions for TinyMCE, always prefix "Tiny" to the name. E.g. Tiny PowerPaste.

An important caveat: when writing about a product and the product is referenced multiple times in the content, only include "Tiny" in the first instance. After this, it is acceptable to use the product name only.

Color Palette

Main colors for the logo and the UI.
#1976D2
#FFFFFF
#212121
#727272
#3ED0A6

Components

We use Storybook.js to create a representation of our component library. You can check it here