The Orbit Design System.

Orbit is an opinionated and lightweight design system for the Southeast Asia Globe Magazine. It is built and designed with the assertion that content speaks for itself, and that compelling content is the ultimate champion in the fight for our fickle attention in this internet driven world.

Typography

Heading Font
Reading Font

Base Elements

Heading Levels
Paragraphs
Lists
Verse
Separators
Tables
Buttons

Precomposed

Engage Call to Action
Newsletter Signup

Figures

Blockquotes
Pull Quotes
Images
Gallery
Charts

Link Lists

Featured Story
Single Post
Upcoming Post
Category Highlight
Curated Highlight
Category Listing

Foundations

Let’s start at the very beginning.
A very good place to start*.
Rogers and Hammerstien, sung by Julie Andrews

*I am hoping that by invoking Julie Andrews her spirit of joy and wonder will inform and fill this document.

Core Values

Independence Optimism Creativity Openness

Mission

To engage our readers through thought provoking stories that inspire.

Principles

Orbit is built keeping the following in mind. They are derived from the core values and mission of the Southeast Asia Globe:

Content First

In depth reporting relies on words, images and video. The gold is in the content, and presentational enhancements must only be made to enhance the story that is being told.

Scroll First

Scrolling interactions are preferred over any others. Click, Swipe and Drag only when unavoidable. Advanced interactions, while cool, create a barrier for the reader.

Mobile First

Mobile users account for more and more of the internet. Let us be considerate to them always.

Calm before the storm

Negative space and white space are used heavily to create a sense of calm while reading otherwise heavy and disturbing content.

The heart of the Orbit Design System is typography, grid and color – nothing unique in that – all design systems put faith in this idea. We looked at typesetting techniques over the few centuries of publishing – inspecting vertical rhythms, reading ease, immersive consumption and of course, joy.

Baseline Grid

Typography

The first consideration in font selection was reading. Reading. This paragraph you are reading is set in Spectral – a variable font developed by Alphabet. It was chosen for its quirkiness and because its characters are all wildly different. It is easy to see that this – 0 – a zero is not this – O – an O. Another major consideration was that Spectral features open type ligatures and variants. Quite lovely. And very legible.

The other font to consider was the Heading font. This caused much debate – we switched many times – from Avenir to Helvetica to Georgia to Baskerville. We finally settled on Work Sans – designed by Wei Huang – for it has a way where it soars up triumphant and declare itself loud and without compromise.

Heading font

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Åå Æ æÇç Éé Øø Ññ Üü Žž 1234567890 ‘¿ ? ’ “ ! ” – – — (&) [*]{ @}€£¥ $¢:; ,.<> + ÷ × =

Jim quickly realized that the beautiful gowns are expensive.

Then a cop quizzed Mick Jagger’s ex-wives briefly.

Foxy diva Jennifer Lopez wasn’t baking my quiche.

Like an

Elephant!

Reading font

The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.

Snorting and whimpering, the grunting blind boar hungrily trampled the hyacinths.

A cow in heat with such a limp would admittedly keep silent about drugs in sheep on a farm.

A couple of paragraphs to see how the reading flow works!

One night when I had tasted bitterness I went out on to the hill. Dark heather checked my feet. Below marched the suburban lamps.

Windows, their curtains drawn, were shut eyes, inwardly watching the lives of dreams. Beyond the sea’s level darkness a lighthouse pulsed. Overhead, obscurity. I distinguished our own house, our islet in the tumultuous and bitter currents of the world. There, for a decade and a half, we two, so different in quality, had grown in and in to one another, for mutual support and nourishment, in intricate symbiosis. There daily we planned our several undertakings, and recounted the day’s oddities and vexations. There letters piled up to be answered, socks to be darned. There the children were born, those sudden new lives. There, under that roof, our own two lives, recalcitrant sometimes to one another, were all the while thankfully one, one larger, more conscious life than either alone.

Yet there was bitterness. And bitterness not only invaded us from the world; it welled up also within our own magic circle. For horror at our futility, at our own unreality, and not only at the world’s delirium, had driven me out on to the hill.

We were always hurrying from one little urgent task to another, but the upshot was insubstantial. Had we, perhaps, misconceived our whole existence? Were we, as it were, living from false premises? And in particular, this partnership of ours, this seemingly so well-based fulcrum for activity in the world, was it after all nothing but a little eddy of complacent and ingrown domesticity, ineffectively whirling on the surface of the great flux, having in itself no depth of being, and no significance? Had we perhaps after all deceived ourselves? Behind those rapt windows did we, like so many others, indeed live only a dream? In a sick world even the hale are sick. And we two, spinning our little life mostly by rote, seldom with clear cognizance, seldom with firm intent, were products of a sick world.

Yet this life of ours was not all sheer and barren fantasy. Was it not spun from the actual fibres of reality, which we gathered in with all the comings and goings through our door, all our traffic with the suburb and the city and with remoter cities, and with the ends of the earth? And were we not spinning together an authentic expression of our own nature? Did not our life issue daily as more or less firm threads of active living, and mesh itself into the growing web, the intricate, ever-proliferating pattern of mankind?

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Preformatted Block

The Road Not Taken, by Robert Frost

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood 
And looked down one as far as I could
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.

...and heres a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;

Ordered List

Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec ullamcorper nulla non metus auctor fringilla.
1. Condimentum euismod aenean.
2. Purus commodo ridiculus.
3. Nibh commodo vestibulum.
Cras justo odio, dapibus ac facilisis in.

Unordered List

Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec ullamcorper nulla non metus auctor fringilla.
- Nibh commodo vestibulum.
- Aenean eu leo quam.
- Pellentesque ornare sem lacinia.
Cras justo odio, dapibus ac facilisis in.

Verse

This is an example of the core Gutenberg verse block.

A block for haiku? 
Why not? 
Blocks for all the things!

Separator

Here are examples of the three separator styles of the core Gutenberg separator block.

Table

Here is an example of the core Gutenberg table block.

Employee	Salary	Position
Jane Doe	$100k	CEO
John Doe	$100k	CTO
Jane Bloggs	$100k	Engineering
Fred Bloggs	$100k	Marketing

Latest Posts, List View

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Latest Posts, Grid View

And now for the Grid View. The Latest Posts block also displays at wide and full width alignments, so be sure to check those styles as well.

Blockquote

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio.
Rich Tabor

Alternate Blockquote

The alternate block quote style can be tarageted using the .wp-block-quote.is-large. CSS selector. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Rich Tabor

Audio

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:

An example of an Audio Block caption

Curabitur blandit tempus porttitor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.

Buttons

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:

Center Aligned Button

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Left Aligned Button

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius.

Right Aligned Button

Columns

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Columns with special classes

Column classes available for tablet and desktop are:

.flex-1-2
.flex-1-3
.flex-1-4

If you want these columns to cascade into mobile please append the following class

.is-mobile

Sections

This area describes sections where content can be dropped. Sections can have any of the globe background colours as well as the ability to drop a background image on it.

Section with columned content

Say something here and bring focus to it!

You can use sections to build callout areas!

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Section with an alternate background colour!

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Pull Quotes

Here is an example of the core pull quote block, set to display centered. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.
Rich Tabor, ThemeBeans.com

Wide aligned

Here is an example of the core pull quote block, set to display with the wide-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Here we have a left-aligned pullquote.
Rich Tabor

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

Here we have a right-aligned pullquote.
Rich Tabor

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Image Block

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.

Right upper teeth of an individual of the newly identified species Homo luzonensis, found in Callao Cave on Luzon Island, the Philippines, are seen in this undated handout photo obtained by Reuters April 10, 2019. Callao Cave Archaeology Project/Handout via REUTERS

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Philippine journalist Maria Ressa gestures as she speaks to members of the media after posting bail outside a court building Manila on March 29, 2019. – Ressa, a prominent critic of President Rodrigo Duterte, was rearrested in what press freedom advocates called retaliation for her news site’s dogged coverage of the government. (Photo by MARIA TAN / AFP)

Vietnamese national Doan Thi Huong (R) smiles as she is escorted by Malaysian police out of the High Court in Shah Alam on April 1, 2019. – A Vietnamese woman accused of assassinating the North Korean leader’s half-brother will walk free in May after pleading guilty to a lesser charge, her lawyer said. (Photo by Mohd RASFAN / AFP)

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus.

Curated Posts

“Many of my family have changed their minds about me now”

By Amanda Saxton

12 MIN READ • ខ្មែរ / EN

“We are the Middle East”

By Daniel Otis

12 MIN READ • ខ្មែរ / EN

‘Son of God’ Quiboloy’s close links to Duterte raise concerns

By Paul Millar

12 MIN READ • ខ្មែរ / EN

Video Block

Lets check out the positioning and styling of the video core block. We will check the wide and full alignments too.

Cover Image Block

Check out the positioning and styling of the cover image core block. We will check the wide and full alignments, as well as left/right.

Left Aligned Cover Image

Left aligned: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Right Aligned Cover Image

Right aligned: scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Center aligned:

Center Aligned Cover Image

Rights

Sexual abuse Under the world’s mirror

Facing discrimination for gender, disability and poverty, Cambodia’s women and girls with disabilities are among the most vulnerable to sexual abuse and violence By Thomas Brent and Kong Meta

Jun 06, 2019 • 14-minute read

Rights

Sexual abuse Under the world’s mirror

Facing discrimination for gender, disability and poverty, Cambodia’s women and girls with disabilities are among the most vulnerable to sexual abuse and violence By Thomas Brent and Kong Meta

Jun 06, 2019 • 14-minute read

Lines of thought across Southeast Asia

Everything else

The Orbit Design System.

Table of Contents

Foundation

Typography

Base Elements

Precomposed

Figures

Link Lists

Foundations

Core Values

Mission

Principles

Content First

Scroll First

Mobile First

Calm before the storm

Baseline Grid

Typography

Heading font

Like an

Elephant!

Reading font

A couple of paragraphs to see how the reading flow works!

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Preformatted Block

Ordered List

Unordered List

Verse

Separator

Table

Latest Posts, List View

Latest Posts, Grid View

Blockquote

Alternate Blockquote

Audio

Buttons

Categories

Archives

Engage Call to Action

Donations

Memberships

Newsletter

Newsletter Signup

Newsletter Signup

Columns

Columns with special classes

Sections

Section with columned content

You can use sections to build callout areas!

Pull Quotes

Wide aligned

Image Block

Curated Posts

Related Reading

Video Block

Cover Image Block

Sexual abuse Under the world’s mirror

Sexual abuse Under the world’s mirror

Lines of thought across
Southeast Asia

Everything
else