Techniques
Miro-yellow CTA with warm halo
The signature Miro button — saturated yellow with deep-slate label and a warm yellow halo that intensifies on hover.
.miro-cta {
background: #F4D74C;
color: #050038;
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
border: 0;
border-radius: 8px;
padding: 14px 24px;
box-shadow: 0 4px 12px rgba(244, 215, 76, 0.35);
transition: transform 250ms cubic-bezier(0.4,0,0.2,1),
box-shadow 250ms cubic-bezier(0.4,0,0.2,1);
}
.miro-cta:hover {
transform: translateY(-1px);
background: #FAE266;
box-shadow: 0 6px 18px rgba(244, 215, 76, 0.45);
}
Sticky-note tile
A canonical Miro post-it: small rounded square, sticky-color fill, slight rotation, and a soft offset shadow to mimic paper on whiteboard.
.sticky-note {
display: inline-block;
width: 144px;
height: 144px;
padding: 16px;
background: #F4D74C;
color: #050038;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
border-radius: 4px;
transform: rotate(-2deg);
box-shadow: 2px 4px 8px rgba(5, 0, 56, 0.12);
}
.sticky-note.pink { background: #F472B6; color: #FFFFFF; }
.sticky-note.blue { background: #3B82F6; color: #FFFFFF; transform: rotate(1.5deg); }
.sticky-note.green { background: #10B981; color: #FFFFFF; transform: rotate(-1deg); }
Hand-drawn arrow divider
A whiteboard-style section divider rendered as a 1px deep-slate stroke with a tiny SVG arrowhead — the visual cue that says "Miro board," not "SaaS marketing page."
.hand-arrow {
display: flex;
align-items: center;
gap: 8px;
color: #050038;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
}
.hand-arrow::before {
content: "";
flex: 1;
height: 1px;
background: #050038;
transform: translateY(0) skewY(-0.5deg);
}
.hand-arrow::after {
content: "→";
font-size: 18px;
color: #050038;
transform: rotate(-4deg);
}