How brand tokens flow into every rendered page, and how shared ss- component classes keep buttons, headings, and badges consistent site-wide.
Loading the guide...
Help us make the guides more useful.
2 helpful · 0 not helpful
Seedly Sites is built around a simple idea: define the brand once, and let every page inherit it. Two layers make that work - brand tokens and a per-site library of shared component classes.
The service page above draws its eyebrow badges, heading style, buttons, and color from the same brand layer the home page uses - defined once, inherited everywhere.
The colors and fonts you set in Site Settings compile into the site's design tokens, which drive:
When an element offers a brand-aware style option (a Section's background style, a Button's color variant), prefer it over typing a hex value. Change the primary color in Settings and every token-driven element updates in one move; a hardcoded hex value stays stale forever.
Real brands repeat components: the same CTA button shape, the same uppercase section heading, the same eyebrow badge above headings. Styling each instance by hand drifts apart over time.
The platform's answer is a small set of vetted, named CSS classes with an ss- prefix, stored in the site's Custom CSS and applied to elements through the Classes field on the element's Advanced tab. Because every instance shares the one class, editing that class updates all of them at once.
Classes the platform synthesizes today include:
| Class | Component |
|---|---|
ss-btn | The standard CTA button shape - one canonical padding, corner radius, and typography. Color still comes from the button's native brand style, so primary and secondary CTAs share the shape |
ss-h2 | The recurring uppercase section heading. Normalizes family, weight, and a consistent mobile size while leaving desktop sizes free per heading |
ss-cta-circle | The round CTA badge (a circular "Contact" or "Write Me" button) |
ss-badge | The eyebrow badge - the short highlighted label above a section heading |
ss-faq | FAQ accordion typography matched to the brand |
When you port an existing site, the migration pipeline harvests the source site's brand identity - palette, typography scale, button shape, badge and FAQ styling - and synthesizes the ss- classes from those measured values. The result is written into the site's Custom CSS, so a migrated site arrives already carrying its own design system rather than a pile of one-off styles.
For a site you build by hand, you can create the same kind of library yourself: define shared classes in Settings, Custom CSS (the box shows for operator accounts only, not client logins), then apply them via the Classes field.
The classes are deliberately color-agnostic where possible. They reference the brand tokens (or leave color to the element's native style option), so re-branding the site does not require touching the component CSS.
ss- class in Settings, Custom CSSWhat to avoid:
| Layer | Lives in | Changes propagate by |
|---|---|---|
| Brand tokens | Settings, Branding (colors, fonts) | Editing the setting |
Component classes (ss-) | Settings, Custom CSS + each element's Classes field | Editing the one class |
| Per-element styling | The element's native fields in the builder | Editing that element only |