Roland Design System Study

Typography, shapes, and hierarchy analysis

Typography Hierarchy
T1 — Section Header
VCO / VCF / VCA
T2 — Parameter Label
CUTOFF
T3 — Value Scale
0 — 100

Font: Montserrat (closest web alternative to ITC Serif Gothic)
Characteristics: High x-height, geometric, bold weights for clarity

Control Shapes
Cutoff
0 100
Slider with Orange Indicator
Knob with Pointer at 1 o'clock
Button with LED Window
Section Layout
Input
Gain
Level
Process
Param A
Param B
Output
Volume

Layout principles: Left-to-right signal flow. Section headers with orange underline rules. Consistent 2px gaps between sections. Controls aligned to baseline grid.

← Portfolio