From the logo and color to motion and writing. SSHOW’s principles and guidelines, all in one place.
SSHOW Design · Updated October 2026
Start with the principlesWhen a design decision isn’t clear, we go back to these four.
Each one comes with an example to see for yourself.
Your work first
Panels and buttons stay quiet in neutral tones, leaving the brightest colors to the work. When you present, the tools disappear and only the work remains.
Morning light.
Blue flowers in a glass vase.
Restrained color
Pink, orange, orchid and blue glow softly behind the work, in one place per screen. Text and panels stay neutral to support it.
Next scene
Press to go to the next scene.
Calm motion
Scenes change and new content arrives slowly. Anything that advances on its own always has a pause button.
Morning light.
Blue flowers in a glass vase.
Consistent everywhere
On a big screen or a phone, in light or dark mode, your work looks exactly as you made it. Everything works the same with a mouse, touch or keyboard.
Morning light.
The SSHOW logo is an S drawn as one unbroken line. It carries a story flowing naturally from scene to scene, reaching from the person who shows it to the people who watch. It always uses a single color.
Use the logo in one color, matching the text: dark on light backgrounds, light on dark ones.
Keep its original shape. Don’t rotate or stretch it, or add outlines or shadows.
Never animate the logo itself. If you need motion, move the light or background around it.
Use the logo once per composition, in a single form.
The base is built from black, white and grays.
Four brand colors add a soft glow on top.
Pink, Orange, Orchid, Blue · 135°
| Light | Dark | |
|---|---|---|
| Background | ||
| Card background | ||
| Text | ||
| Secondary text | ||
| Muted text |
Next scene
Press to go to the next scene.
Light
Dark
Use the four brand colors as a set. When items take one color each, keep all four together in one place.
Run the gradient pink, orange, orchid, blue, at 135°.
Don’t use brand colors for text or borders. Save the gradient for the most important button on the screen.
Show pressed and selected states in shades of neutral.
In dark mode, keep the layout and change only the color values.
SSHOW screens use two typefaces: our own for the Latin letters of titles, and one interface typeface for everything else, Korean included. Titles and body text differ by size, weight and letter spacing, and Korean text never breaks in the middle of a word.
How we design SSHOW.
Every screen starts with four principles.
When a design decision isn’t clear, we go back to these four. Each one comes with an example to see for yourself.
Panels and buttons stay quiet in neutral tones, leaving the brightest colors to the work.
SSHOW Design
Build hierarchy with size and weight.
Set body text with a line height of 1.65.
Titles keep the typeface’s own spacing, in Korean and Latin alike.
Keep display titles at weight 800 or lighter.
Our own Latin typeface · Preview
Soft · Even · Open
It stands upright and steps back, so your story comes first.
Letters step back.
Stories step forward.
Soft
Strokes end softly.
Even
The same texture wherever you read it.
Open
Clear even at small sizes.
Let the story come first.
We give content plenty of room and reuse the same spacing values, so every page reads with the same rhythm.
Label
Section title
A short sentence that describes the section.
Side margins follow the screen width, from 80px down to 20px. Section padding follows the screen height: 16% of it (10% on phones), between 56 and 200px.
Align left by default; center only big statements.
Give each screen one big message.
Round corners to suit the size: fully round for buttons and chips, 18–20px for photos, 24–28px for large cards.
Buttons, links, badges, controls and inputs look the same on every screen.
Try them.
Make every button a pill, with its label in semibold (600).
Use one primary button per screen, and make the rest secondary or text buttons.
Buttons shrink to 97% while pressed and return when released.
End links with an arrow: → for another page, ↓ within the page, ↗ for another site. Back links lead with ←.
Motion in SSHOW is built mostly from two curves and four durations, so every screen moves with the same rhythm.
Standard
cubic-bezier(0.22, 0.61, 0.36, 1)
For small changes like color and opacity.
Emphasized
cubic-bezier(0.16, 1, 0.3, 1)
Starts fast, then settles slowly. For elements arriving and settling into place.
When you change scenes in SSHOW, objects with the same name flow into their new shape. Switch between the two scenes to see it.
Morning light.
Keep small changes short and bigger changes a little longer.
Let elements slow down as they arrive, and leave quickly.
Move one big thing at a time.
When reduced motion is on, skip the animation and show the result right away.
SSHOW speaks plainly, one idea per sentence.
It talks about your story before the tool.
Put one idea in each sentence.
Choose everyday words over jargon.
Describe only what people can see on screen.
What do you want to show?
We couldn’t save. Check your connection and try again.
Now, show it.
Do
Link copied.
Don’t
The link copy operation was completed successfully.
Do
Objects with the same name flow into the next scene.
Don’t
Transition interpolation is applied between objects with identical identifiers.
Use sentence case, and speak to people directly as “you.”
Skip exclamation marks and big claims.
Follow standard spelling and punctuation.
Text has strong contrast, and controls are big enough to tap.
Everything works without a mouse, and with reduced motion turned on.
Easy to read
Text keeps a contrast ratio of at least 4.5:1 against its background.
On touch screens, every tap target is at least 44 × 44px, even when the control looks smaller.
Press Tab here
Press Tab to move between controls, and a clear outline shows where you are.
With reduced motion on in your device settings, light and screens that moved on their own stand still.
During the beta, SSHOW runs on the free plan only.
SSHOW Design · Updated October 2026
Press → or Space to go on, Esc to close.Swipe, or tap either side, to go on.