DATWIN / DESIGN SYSTEM
01 / TYPOGRAPHY
DISPLAY / Satoshi Medium
Clarity you can act on.
BODY / Satoshi Regular
Data, explained.
DATWIN keeps useful information plainspoken, direct and readable. Supporting copy works hard without competing with the message.
LABEL / 14PX / TRACKED
02 / COLOURS
DARK
#0E162D
PRIMARY
#4669E1
ACCENT
#A8F69E
WHITE
#FFFFFF
03 / BUTTONS & CTAS
04 / LAYOUT & SPACING
1200
Main content width
with 40px desktop edges
80
Section breathing room
with 18–42px internal rhythm
1px
Blue rules and quiet borders
organise long-form pages
05 / RECURRING COMPONENTS
Numbered sections bring order to complex stories.
They pair a confident index with a direct statement, then allow the supporting detail to stay calm and useful.
VISUAL STYLE
Colour, light, glass and geometry create depth.
Use the existing blue gradients, crisp borders, generous radii and measured hover movement. Image blocks remain architectural, atmospheric and high-contrast.