Sign in 1
1

Two ro. screens: the player with Low Tide by Hush Ensemble, and the week view for Tuesday the 27th.

ro., Staff pick Technology at rest.

A calm design system for Sketch, specified down to the millisecond. Motion, sound and haptics are written next to every component.

License

€49one-time, VAT included

Get the Pass
  • Sketch file with libraries
  • Tokens in CSS, JSON, Tailwind
  • Docs and changelog
  • 12 months of updates

Instant download from your library after payment.

€49one-time, VAT included

Get every system with the Pass
Symbols
133
Text styles
108
Color variables
32
Screens
7 + 2 watch faces
Prototype links
22

By Ipseum Originals

Inside the file, nothing left vague.

32 color variables

Ink, Fog, Tide and Signal. This is Tide, the blue that carries ro.

  1. #EAF3F950
  2. #CFE3F0100
  3. #A9CBE3200
  4. #8DB4D3300
  5. #6F94B5400
  6. #4F7395500
  7. #3A5874600
  8. #2A4155700
  9. #1C2D3B800
  10. #111C25900
  11. #0A1117950
  12. #90D8F6spark

Motion, written down

Every transition has a duration and a curve, so code matches the file.

ease-out
0.22, 1, 0.36, 1
breathe
2400 ms
radius full
9999 px

108 text styles

Sized for phone and watch

Tokens for code

--ro-tide-300:
#8DB4D3;
--ro-ease-out:
cubic-bezier(0.22, 1, 0.36, 1);
--ro-radius-full:
9999px;
--ro-duration-breathe:
2400ms;

CSS variables, JSON (W3C format) and a Tailwind preset

Sound and haptics

Sound cues and haptic patterns are specified on their own page in the file.

Included in ro.

32 color variables

Ink, Fog, Tide and Signal. This is Tide.

108 text styles

Display to caption, sized for phone and watch.

Motion, timed

ease-out  0.22, 1, 0.36, 1

Breathe: 2400 ms

Tokens for code

CSS, JSON (W3C) and Tailwind.

--ro-tide-300: #8DB4D3;
--ro-radius-full: 9999px;

Sound and haptics

Specified on their own page in the file.

Questions,
answered.

Still curious?

Write to us and a person from the team gets back to you.

Contact us

A Sketch file with every symbol, text style and color variable, tokens as CSS, JSON and a Tailwind preset, and docs that explain how the parts fit together. Each system page lists exactly what is inside.