Synthenis Design Kit

The interface standard for every Synthenis product.

One token system, eighteen components and sixteen languages. Version 3 unifies motion, sound and accessibility under a single production standard.

Components Standards
Synthenis Sans — variable weight 180
18
Components
16
Languages
9
Font weights
2
Easing curves
Components

Rendered live from the Kit 3 runtime.

Every element on this page executes the production component code. Fixed geometry, solid surfaces, controlled motion.

Buttons
Expressive press system
Every press answers with a soft, isolated pulse. Hold, and the button follows your finger before settling back.
Input fields
Quiet focus
Focus changes the surface, never an outline. Fields respond quietly across the entire system.
Toggle switch
Single interaction target
Switch and label act as one target. Every confirmed change answers with a brief haptic pulse.
Checkbox
Responsive selection rows
Card rows for settings and consent screens. The control stays aligned while label and description wrap independently.
Segmented control
Solid sliding thumb
Selection moves directly — nothing fades. Hold the active option to lift the thumb, then drag to reselect.
Syn Select
Instant, solid, drag-safe
Opens instantly on a solid surface — no blur, no entrance animation. Accidental drags never select.
Feedback
Toast and modal
Toasts dismiss with a swipe and pause while the tab is hidden. Dialogs rest on calm, solid surfaces.
Progress & loading
Motion only while moving
Static progress stays solid; shine is permitted only while the value is actively advancing. Skeletons breathe by opacity alone.
Badges, radio, slider
Small controls
Status badges, a single-select radio and a range slider with a white capsule thumb.
Verified Pending New
Color

Named values, two themes.

Each color carries a Synthenis-specific name and a dark–light pair. Select a swatch to copy its current theme value.

Typography

One file. Nine weights.

Synthenis Sans is a single variable file covering the full 100–900 range. The numeral above is bound to the same axis.

Weight spectrum
All 9 weights
100Synthenis Sans Thin
200Synthenis Sans ExtraLight
300Synthenis Sans Light
400Synthenis Sans Regular
500Synthenis Sans Medium
600Synthenis Sans SemiBold
700Synthenis Sans Bold
800Synthenis Sans ExtraBold
900Synthenis Sans Black
Implementation
Single variable file
Served from the Synthenis CDN with font-display: swap. System fallbacks preserve layout before the file resolves.
Motion & sound

Two curves. Nothing else.

A standard curve for structural transitions and a spring curve for tactile responses. Toast notifications announce themselves with noti.wav.

Standard
Structural transitions
Spring
Tactile responses
Sound
noti.wav
Played once per notification. When the browser blocks audio, it fails silently.
Standards

What every release must pass.

Kit 3 is enforced at review. A release that breaks the rules does not ship.

Visual discipline
No decorative radiance
✗No shimmer, glow or sparkle
✗No gradient text
✗No visible focus rings
✓Solid surfaces, calm borders
Accessibility
Minimum requirements
✓Comfortable tap targets
✓Safe margins on every screen
✓Reduced motion respected
✓Icons adapt to every theme
Localization

Sixteen languages. One tone.

This page follows the standard it describes. Sixteen languages, from Türkçe to 日本語 — applied automatically, with full right-to-left support.