design language · 08

identity.

two marks, and one of them almost always wins. usva. is four letters and a period, and the period is the load-bearing part: it is accent-alt made visible, the paired second voice. railo is what appears when those four letters have nowhere to go.

which mark, when

railo is a stand-in, not a companion. the two are not set side by side in usva's own chrome, where the name is already on the page. in marketing they go together: on a surface that has never met us, the name is the thing nobody remembers and the mark is what carries it back.

usva.
usva.wherever it fits
  • the nav, from md up
  • headers, footers, signatures
  • anywhere there is a line to sit on
railoonly where it will not
  • the nav, below md
  • a browser tab, an app icon, an avatar
  • anything square, or under 24px
usva.
usva. + railoonly off our own surfaces
  • marketing, launch art, slides
  • merch, stickers, booths
  • anywhere the name is still new

one wordmark, three registers

the same four letters, rendered once per theme scope. watch accent-alt change meaning under the period without the letters moving at all.

usva.kajoit glows like the last light left on the water.
usva.sisuit works, quiet and legible, doing its one job.
usva.saviit is fired into the clay, darker so it holds on light.

wordmark clearspace

keep room equal to the height of the u on every side. the mist needs air; nothing crowds the mark.

usva.

four ways to get the wordmark wrong

hover each one. the mark refuses the change the same way the rest of the system does.

USVA.USVA is a corporate acronym. usva is weather.
usva.the period is accent-alt, the paired voice. never the primary accent.
usva.the mist has to hold together. no letterspacing.
usvathe period is load-bearing. it does not come off.

railo, and how it is made

two fields arrive from opposite sides. where they meet, the overlap is taken out of both, and the lens left in the gap is the mark. nothing is drawn: railo is what the two fields do not share.

the mark builds itself900ms, once

two cuts

one construction, drawn twice. the small cut is not the large one scaled down: the fields move apart until the crescents and the gap carry the same weight, because at 16px whichever is thinner disappears first.

display24px and up

thin crescents around a wide lens. the gap does most of the talking.

r
31
centres
38 / 64
crescent
26
lens
36
micro16px to 24px

the fields move out until crescent and lens weigh the same, so neither one thins away first.

r
34
centres
33 / 67
crescent
34
lens
34
at true size
48
32
24
16

16 is the floor. below it the lens closes and the mark becomes a smudge, so there is nothing to use.

railo clearspace

the mark sets its own margin. the left field is accent, the right is accent-alt, in that order, and the gap between them takes whatever is behind it.

the room around the mark is one lens wide, the same gap the mark leaves in itself. nothing sits closer.

five ways to get railo wrong

most of these look like small adjustments. each one takes out the subtraction, which is the only thing holding the mark together.

the fields meet on the level. tilted, it is a mark about itself.
fill the gap and there is nothing left to read.
no line here. two masses, and the space they leave.
pulled apart, nothing overlaps and nothing is subtracted.
two voices, or it is only a shape.