Inspired by Metro.

Rekta Design is inspired by Microsoft's Metro design language, to us one of the best UX designs ever shipped, from Zune and Windows Phone 7 (2010) to Windows 8 (2012). We find it a pity that no major product uses it today, so Rekta takes up its ideas in its own form: its own tokens, typography and components.

• 2000sMedia Center, Zune
• 2010Windows Phone 7
• 2012Windows 8
• todayRekta Design

• content over chromeThe information is the interface. Nothing gets a box just to look tidy.
• authentically digitalNo imitation leather or paper: type, colour and motion that belong to a screen.
• type as structureRooted in the Swiss International Typographic Style and the wayfinding signage of public transport: large, plain, readable at a glance.

Its token values are derived from the source code of the Porsche Design System (Apache-2.0): numbers and colours only, no code, fonts or marks.

sources: Metro (design language) · International Typographic Style · Porsche Design System. Rekta Design is independent and not affiliated with or endorsed by Microsoft or Porsche.

Nothing is decoration.

1. content over chromeNo cards, no boxed panels. Information sits on the ground, grouped by hairlines and whitespace.
2. motion as guidanceEvery transition answers a question: where am I, which facet, what just happened.
3. information-dense live tilesA tile's size follows importance; its fill is its status. It opens something or only informs.
4. panorama and pivotOne place, wider than the screen, moved through sideways; its facets in a fixed order.
5. refined precisionHairlines, tabular figures, calm large areas, vivid small accents.

Three levels, one bold title.

Level 1, a quiet kicker. Level 2, the one semibold title per screen. Level 3, a fact line. Navigation titles, like the pivot above, are large and light: they name a place, not a thing. UI words are lowercase; content keeps its own case. Sizes are in rem, so they follow your text size; large ones grow with the place, not the screen.

scale

• Rektaxxs 0.75rem
• Rektaxs 0.8125rem
• Rektas 0.9375rem
• Rektam 1.125rem
• Rektal clamp(1.375rem, 1.5cqi, 1.75rem)
• Rektaxl clamp(1.625rem, 2cqi, 2.125rem)
• Rektaxxl clamp(1.875rem, 2.6cqi, 2.75rem)
• Rektanav-active clamp(2.5rem, 4.2cqi, 4.5rem)
• Rektanav-inactive clamp(1.375rem, 1.9cqi, 2rem)
• Rektapivot-active clamp(1.75rem, 2.6cqi, 2.625rem)
• Rektapivot-inactive clamp(1.25rem, 1.6cqi, 1.625rem)
• Rektagroup clamp(1.375rem, 1.7cqi, 1.875rem)
• Rektatitle clamp(1.875rem, 2.8cqi, 3rem)

Body text is Barlow at 15px, self-hosted under the SIL Open Font License; numbers that read as data use weight 500 and tabular figures.

One place, wider than the screen.

A panorama is one place laid out sideways. One wheel gesture moves one thing: started over a section that can still scroll, it scrolls the section; otherwise it moves the panorama sideways. Horizontal input is left alone; at either end the wheel falls through.

Where the place is narrower than 760px or the window shorter than 480px, everything stacks and the page scrolls. Right now:

• window-size class–
• density–
• theme–
• motion–

A pivot is one place's facets in a fixed order. The active title is large; the strip never reorders. It glides by the title's place in the order, less than the content moves, so the titles before it stay in reach. Facets add nothing to history.

The strip above this site is the same component: move the panorama and watch it follow, a step behind. Use ← → once a facet has focus.

An event leaves, a state stays.

Something that just happened is a toast: ink, one at a time, with an undo window you can hold by pointing at it. A lasting state of the whole system takes the banner on top: one at a time, the most severe first, its end reported as a toast.

raise an eventarchive somethingsave

• banner nownone
• live dataupdating

a region loading, empty, failed

Nothing shimmers: placeholders stand still, and the line comes only after 300ms, so a fast answer never flickers.

One back for everything.

• places have addressesOpen the tokens or one token: the address changes; reload it, share it.
• one backThe crumb, Esc, the browser's back and the phone's back all go back one place, to where you were.
• go to“go to” in the app bar, or Ctrl K: places, sections, tokens and commands in one list.
• menusThey float next to their control and take keys: ↑ ↓, a letter, Enter, Esc.
• a full app barMake the window narrow: what does not fit moves into “more”.

go tokeyboard shortcutssort tokens by

Checked late, corrected early.

Make a product accent. A field is checked when you leave it and corrected as you type; sent with errors, a summary comes first. Name it “plum” and the server says no at the field; send it during maintenance and it says no to the form. Change something and leave: it asks first.

Yours to set.

Checked, not assumed.

• keyboard firstEvery pointer action has a key; focus moves to what opens and comes back to what opened it.
• focus on fillsOn a tile the ring is drawn inset in the tile's text colour, so it survives every fill. Tab into the tiles below.
• colour is never aloneEvery status has its word, every chart a text equivalent, the app bar's square its word beside it.
• contrast is measuredThe build fails when a pair drops below its minimum, or when two statuses come too close under colour blindness.
• touch44px targets, no hover-only actions, 16px fields, and dragging never activates.
• forced coloursFills drop; tiles keep an edge, marks and meters keep their shape.

Tokens first, then CSS and script.

1. take the tokensrekta.tokens.json for any platform; rekta.tokens.css on the web.
2. add the componentsrekta.css, with rekta.fonts.css and the Barlow files.
3. add the behaviourrekta.js as a module, or rekta.global.js as a classic script. No framework needed, and any framework can use it.

<link rel="stylesheet" href="rekta.tokens.css">
<link rel="stylesheet" href="rekta.fonts.css">
<link rel="stylesheet" href="rekta.css">
<script type="module">
  import * as Rekta from './rekta.js';
  Rekta.start();
  Rekta.places({ home: 'home' });
  Rekta.panorama(document.querySelector('.rk-panorama'),
    { pivot: document.querySelector('.rk-pivot') });
</script>

Code, tokens, CSS and script: MIT. Docs and images: CC BY 4.0. Barlow: SIL Open Font License 1.1. Not affiliated with or endorsed by Microsoft or Porsche.