[
{
« name »: « Form Background »,
« selector »: « .sb-form »,
« styles »: {
« background-color »: « #ffffff »,
« padding »: « 24px »,
« font-family »: « ‘Segoe UI’, sans-serif »
}
},
{
« name »: « Form Title »,
« selector »: « .sb-form h1, .sb-richtext h1 »,
« styles »: {
« color »: « #004165 »,
« font-size »: « 22px »,
« font-weight »: « 700 »,
« margin-bottom »: « 8px »
}
},
{
« name »: « Section Title »,
« selector »: « .sb-form h2, .sb-richtext h2 »,
« styles »: {
« color »: « #004165 »,
« font-size »: « 16px »,
« font-weight »: « 600 »,
« margin-top »: « 20px »,
« margin-bottom »: « 12px »,
« border-bottom »: « 2px solid #004165 »,
« padding-bottom »: « 6px »
}
},
{
« name »: « Field Label »,
« selector »: « .sb-field-label »,
« styles »: {
« color »: « #004165 »,
« font-weight »: « 600 »,
« font-size »: « 13px »,
« margin-bottom »: « 4px »
}
},
{
« name »: « Text Input »,
« selector »: « .sb-field input[type=’text’], .sb-field input[type=’email’], .sb-field select »,
« styles »: {
« border »: « 1.5px solid #004165 »,
« border-radius »: « 25px »,
« padding »: « 8px 16px »,
« font-size »: « 14px »,
« color »: « #333333 »,
« background-color »: « #f7fbff »,
« outline »: « none »,
« width »: « 100% »,
« transition »: « border-color 0.2s »
}
},
{
« name »: « Text Input Focus »,
« selector »: « .sb-field input[type=’text’]:focus, .sb-field input[type=’email’]:focus, .sb-field select:focus »,
« styles »: {
« border-color »: « #004165 »,
« background-color »: « #ffffff »,
« box-shadow »: « 0 0 0 3px rgba(0, 65, 101, 0.15) »
}
},
{
« name »: « Dropdown Select »,
« selector »: « .sb-field select »,
« styles »: {
« border »: « 1.5px solid #004165 »,
« border-radius »: « 25px »,
« padding »: « 8px 16px »,
« background-color »: « #f7fbff »,
« cursor »: « pointer »
}
},
{
« name »: « Checkbox Container »,
« selector »: « .sb-field .ms-Checkbox »,
« styles »: {
« margin-bottom »: « 6px »
}
},
{
« name »: « Checkbox Label »,
« selector »: « .sb-field .ms-Checkbox-label »,
« styles »: {
« color »: « #333333 »,
« font-size »: « 13px »
}
},
{
« name »: « Checkbox Checked »,
« selector »: « .sb-field .ms-Checkbox.is-checked .ms-Checkbox-checkbox »,
« styles »: {
« background-color »: « #004165 »,
« border-color »: « #004165 »,
« border-radius »: « 4px »
}
},
{
« name »: « Radio Button Selected »,
« selector »: « .sb-field .ms-ChoiceField-input:checked + .ms-ChoiceField-field::before »,
« styles »: {
« background-color »: « #004165 »,
« border-color »: « #004165 »
}
},
{
« name »: « Radio Button Border »,
« selector »: « .sb-field .ms-ChoiceField-field::before »,
« styles »: {
« border-color »: « #004165 »
}
},
{
« name »: « Primary Button Subscribe »,
« selector »: « .sb-toolbar .ms-Button–primary, .ms-Button–primary »,
« styles »: {
« background-color »: « #004165 »,
« border »: « none »,
« border-radius »: « 25px »,
« padding »: « 10px 32px »,
« font-size »: « 14px »,
« font-weight »: « 600 »,
« color »: « #ffffff »,
« cursor »: « pointer »,
« transition »: « background-color 0.2s »,
« min-width »: « 120px »
}
},
{
« name »: « Primary Button Hover »,
« selector »: « .sb-toolbar .ms-Button–primary:hover, .ms-Button–primary:hover »,
« styles »: {
« background-color »: « #005a8e »,
« box-shadow »: « 0 4px 12px rgba(0, 65, 101, 0.3) »
}
},
{
« name »: « Secondary Button »,
« selector »: « .ms-Button–default »,
« styles »: {
« border »: « 1.5px solid #004165 »,
« border-radius »: « 25px »,
« color »: « #004165 »,
« background-color »: « #ffffff »,
« padding »: « 10px 24px »
}
},
{
« name »: « Row Spacing »,
« selector »: « .sb-row »,
« styles »: {
« margin-bottom »: « 16px »,
« gap »: « 16px »
}
},
{
« name »: « Field Container »,
« selector »: « .sb-field »,
« styles »: {
« margin-bottom »: « 12px »
}
},
{
« name »: « Form Panel Header »,
« selector »: « .ms-Panel-header »,
« styles »: {
« background-color »: « #004165 »,
« color »: « #ffffff »
}
},
{
« name »: « Required Star »,
« selector »: « .sb-field-required »,
« styles »: {
« color »: « #004165 »
}
}
]