Skip to content

Design system

Language and grammar

Abbreviations

Never add an apostrophe (') to an abbreviation, and completely avoid the phrases e.g., i.e.

Examples of abbreviation
  • Do: CTAs
  • Don't do: CTA's
  • Do: For example
  • Don't do: e.g.

Bold

Use bold text to draw the reader's attention to key words or phrases. Avoid saturating a paragraph with bold text.

Capitalization

Always use sentence case.

Examples of using capitalization
  • Do: Tulup provides best service in entire universe
  • Don't do: Tulup Provides Best Service In Entire Universe

Contractions

Always use contractions when available.

Examples of how to use contractions
  • Do: Don't, can't
  • Don't do: Do not, can not, cannot

Dates

WIP.

Punctuation

Ampersands

Never use ampersands.

Examples of using ampersands
  • Do: Language and grammar
  • Don't do: Language &ampersand grammar

Colons

Use colons to introduce a list. Never use a colon at the end of a heading.

Examples of using colons
  • Do: On Tulup, you can sell just about anything:colon jewellry, furniture, art, crafts, you name it.
  • Don't do: Six reasons to switch to Tulup today: colon

Commas

Always use the Oxford comma for the final item in a list.

Examples of using commas
  • Do: The quick brown fox jumped over the lazy dog, catcomma, and mouse.
  • Don't do: The quick brown fox jumped over the lazy dog, cat and mouse.

Dashes

Please note hyphens (-) are different to dashes (—).

Use an em dash (—) to indicate an abrupt change in a sentence. Never use an em dash for a range of numbers.

Try to split the sentence into multiple sentences, and drop the dashes, if the dash doesn't sound appropriate in context.

Examples of using dashes
  • Do: After months of deliberation, the jurors reached a unanimous verdict —space, dash, space guilty.
  • Don't do: After months of deliberation, the jurors reached a unanimous verdict—dashguilty.

Exclamation points

Use exclamation points to express enthusiasm. Some phrases will sound unnatural and cold without them. Just make sure they sound natural in context.

These are a great way to convey positive emotion and add to the conversational tone. However, use exclamation points sparingly.

Never follow an exclamation point with punctuation, including more exclamation points. Unless, of course, they are part of a proper noun.

Examples of using exclamation points
  • Do: Welcome back!exclamation point
  • Don't do: Welcome back.period

Hyphens

In general, only uses hyphens for number ranges, or when they are necessary to avoid confusion in a word.

For example, some prefixes mean different things assembled before the same word. Recreating, no hyphen, in the school gymnasium is different to re-creating, with a hyphen, a website.

Examples of using hyphens
  • Do: You can find the annual report on pages 3-dash6.
  • Don't do: The annual report is on pages 3space, dash, space - 6.
  • Do: I spent a few hours recreating at the gym yesterday.
  • Don't do: We were recreating , no hyphen, their website, but they decided to change priorities.

Periods (full stops)

Periods should only be used to finish a complete sentence. Avoid periods in any headings, titles, tooltips, labels, or really anything other than paragraphs.

One exception is that list items containing a complete sentence should finish with a period.

Examples of using periods
  • Do: Settings
  • Don't do: Settings.period

Quotation marks

Use double quotes (") only for a direct quote. For UI elements, replace any quotes by bold text or italics, as best fits.

Links should never contain quotation marks. Remember that screen readers allow users to navigate the page by tabbing through each link. Links need meaningful context.

Examples of using quotation marks
  • Do: "You miss every shot you don't take." - Wayne Gretzky
  • Don't do: Read more about the "Trillionare Mindset"

Gender

Always try to avoid gendered pronouns. If for some reason that isn't possible, like in a quote or description of a factual event, assess whether this snippet needs to be included.

Examples of using gendered pronouns
  • Do: They went to the ball game on Saturday.
  • Don't do: She went to the ball game on Sunday.

Italics

Use italics to define vocabulary, or more generally for emphasis, in a similar manner to bold text.

Never use italics on a link.

Examples of using italics
  • Do: The phrase veni vidi vici translates to I came, I saw, I conquered.
  • Don't do: Visit our homepage.

Lists

Use lists liberally to replace long comma chains inside of a paragraph containing sequences or groups of items. Lists are an excellent way to improve readability, especially in tandem with list groups.

Typically, lists probably shouldn't have more than five or six items. If a list gets large, consider whether it can be broken down into several smaller lists.

For lists where a sentence is started above the list, and finished by each list item, start each list item in lowercase, and skip the periods.

Examples of using lists
  • Do: 

    You're meant to have fun in life. Automatically, all of these beautiful, beautiful things will happen. We have a fantastic little sky! Each highlight must have:

    • its own private shadow
    • dark in order to show the light
    • little fluffies that live in the clouds
  • Don't do: 

    You're meant to have fun in life. Automatically, all of these beautiful, beautiful things will happen. We have a fantastic little sky! Each highlight must have:

    • Its own private shadow.
    • Dark in order to show the light.
    • Little fluffies that live in the clouds.

Monospaced text

Generally, use monospaced font for files and folders. Monospaced text will almost never find its way into customer-facing copy.

You can also make references to technical parts of our internal stack, like tailwindcss, as long as the first instance of that reference on the page is a link to the project's homepage.

Examples of using monospaced text
  • Do: Open the app/root.tsx file to change the site-wide page <title>.
  • Don't do: This text is monospace, because I think it looks cool.

Numbers

Always write out the numbers one through ten. After ten, use the digits, like 13, 50, 105, and so on.

Examples of using numbers
  • Do: I think there were five or six chickens there yesterday, but I've seen at least 20 in the past.
  • Don't do: There can't be more than 3.

Possessives

Always use 's to show possession, even if the word itself ends in s.

Examples of possessives
  • Do: Kriss's laundry
  • Don't do: Kriss' laundry

Pronouns

Second person is almost always preferable. Most companies like to keep copy conversational and casual in tone, and we are no exception.

Obviously, express judgement based on context. Formal writing naturally calls for more formal use of pronouns.

Examples of pronouns
  • Do: Tulup will change your business forever.
  • Don't do: Sellers love posting items on Tulup.

Time

WIP

Titles and headings

In line with the capitalization rules, always use sentence case. That means capitalize the first word, and any proper nouns, but that's all. Don't use bold, italics, or any punctuation in headings.

Examples of titles and headings
  • Do: Tulup will change your business forever
  • Don't do: Tulup Will Change Your Business Forever.

Voice

Always use active voice.

Examples of active voice
  • Do: Sellers list items for sale in their shop.
  • Don't do: Listings on a shop page are created by sellers.

Accessibility