Olano Violin

Design system

Foundations

Colour

Semantic — backgrounds

canvas
surface
raised
inverse

Semantic — text

ink
ink-soft
ink-faint

Semantic — borders

line
line-subtle
line-strong

Semantic — accent

accent
accent-hover
accent-muted
accent-contrast

Primitives — grey

grey-0
grey-50
grey-100
grey-200
grey-300
grey-400
grey-500
grey-600
grey-700
grey-800
grey-900
grey-950

Primitives — pink

pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900

Typography

Sans · Roc Grotesk

.type-h1Daniela Olano
.type-h2Violinist · Educator · Composer
.type-h3Performance & Pedagogy
.type-h4A life lived in strings
.type-h5Lessons & Booking
.type-body-lgBody Large — Daniela brings two decades of performance and teaching to every lesson.
.type-body-mdBody Medium — From first position to concerto repertoire, lessons are tailored to each student.
.type-body-smBody Small — Studio sessions are available weekday evenings and weekend mornings.
.type-body-xsBody XS — Photographed at Koerner Hall, Toronto
.type-body-lg-boldBody Large Bold — Daniela brings two decades of performance and teaching to every lesson.
.type-body-md-boldBody Medium Bold — From first position to concerto repertoire, lessons are tailored to each student.
.type-body-sm-boldBody Small Bold — Studio sessions are available weekday evenings and weekend mornings.
.type-body-xs-boldBody XS Bold — Photographed at Koerner Hall, Toronto
.type-eyebrowNow accepting students

Serif · Newsreader

.type-serif-h1Music in every detail
.type-serif-h2Music in every detail
.type-serif-h3Music in every detail
.type-serif-h4Music in every detail
.type-serif-h5Music in every detail
.type-serif-body-lgSerif Body Large — An accent voice for editorial moments and considered introductions.
.type-serif-body-mdSerif Body Medium — An accent voice for editorial moments and considered introductions.
.type-serif-body-smSerif Body Small — An accent voice for editorial moments and considered introductions.
.type-serif-body-xsSerif Body XS — An accent voice for editorial moments and considered introductions.
.type-serif-body-lg-italicSerif Body Large Italic — considered introductions.
.type-serif-body-md-italicSerif Body Medium Italic — considered introductions.
.type-serif-body-sm-italicSerif Body Small Italic — considered introductions.
.type-serif-body-xs-italicSerif Body XS Italic — considered introductions.
.type-serif-quote"The violin sings what words cannot."

Spacing

2xs
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
96px
5xl
128px

Surfaces

bg-canvas
bg-surface
bg-raised
bg-inverse
bg-accent-muted

Borders

line-subtle
line
line-strong

Components

Button

Primary

Secondary

Icon Button

Icon

Sizes

sm
md
lg

Set

ArrowRight
ArrowLeft
ArrowUpRight
X
List
MagnifyingGlass
CaretDown
CaretUp
Check
CalendarBlank
InstagramLogo
Play
Plus
Minus
Eye
Envelope
MusicNotesSimple
SpeakerSlash
SpeakerHigh
MapPin

Badge

Filled

LabelLabelLabel

Outline

LabelLabelLabel

Muted

LabelLabelLabel

Divider

Subtle

Default

Strong

Input

Helper text

Helper text

This field is required

Helper text

Trailing icon slot

Focus a field to see the live focus state (accent border via :focus-within).

Textarea

Helper text

This field is required

Checkbox

Radio

Molecules

Image Placeholder

List Item

Default

List item title

Supporting detail or description text

Icon

List item title

Supporting detail or description text

Details

List item title

Supporting detail or description text

Jun 2026

Organisms

Accordion List

Large

Ceremony

Processional, signing and recessional music tailored to your day

Cocktail hour

Elegant background sets while your guests mingle

Reception

First dance and dinner sets, solo or with accompaniment

Optional caption to provide tertiary information

Galas & award nights

Sophisticated repertoire for upscale corporate functions

Product launches

Modern sets that match your brand moment

Dinner parties

Intimate live music for your gathering

Small

Body text providing more information relating to the accordion item

Body text providing more information relating to the accordion item

Body text providing more information relating to the accordion item