Step 6 of 6

Apply

Hand the finished colors to the page.

Follow a business

Where the colors go

The finished colors are handed to the page by name, so every component paints them the same way and none holds a brand color of its own.

→Page headerThe glass over its photo; the text panel itself stays white

→Three brand cardsSuggested for you, Connect, What they offer

Suggested for you7.4:1

Connect7.4:1

What they offer7.3:1

→Logo tileThe logo on the background it was drawn for

→Small accentsSession pills and the session card’s date on the activity page

Show logic

Turns the finish into CSS custom properties. Components set these and never read a raw brand color or call a step: BrandCard paints emit.cards[i].style, the header emit.hero.style, the section root emit.page, BusinessMarkTile emit.mark, and the activity page’s title card emit.vivid (the vivid palette, with the ink and the verified stamp’s tone that read on it; Vivid field).

emitBrand(settings, finish): BrandTokens

emit.cards[0].style

--schools-out-color-action-ink#eef4fc

--schools-out-color-action-basetransparent

--schools-out-color-action-floorrgb(0 0 0 / 11%)

--schools-out-color-action-fill#c3dbf3

--schools-out-color-action-fill-ink#182538

--schools-out-color-action-secondary-border#182538

--schools-out-color-action-secondary-ink#182538

--schools-out-color-action-tonalrgb(255 255 255 / 40%)

--schools-out-color-action-tonal-hoverrgb(255 255 255 / 50%)

--schools-out-color-action-tonal-bordercolor-mix(in srgb, #182538 12%, transparent)

--schools-out-color-action-tonal-ink#182538

--schools-out-color-action-focus#182538

--card-surfaceradial-gradient(ellipse 81.12% 93.60000000000001% at 108.3% 85.0% in srgb, #6fc6ff, transparent …

--card-media-surface#ffffff

--card-glass-blurblur(21px)

--card-glass-saturation1.5

--card-glass-veilcolor-mix(in srgb, var(--schools-out-color-canvas) 54.72%, transparent)

--card-glass-veil-endcolor-mix(in srgb, var(--schools-out-color-canvas) 60.72%, transparent)

--card-ink#182538

--card-textureurl("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2…

--card-texture-opacity0.34

--card-texture-size160px

--card-texture-blendsoft-light

--card-blurnone

--card-shadownone

--card-fallbacktransparent

emit.hero.style

--schools-out-color-action-ink#eef4fc

--schools-out-color-action-basetransparent

--schools-out-color-action-floorrgb(0 0 0 / 26%)

--schools-out-color-action-fill#d3d8dd

--schools-out-color-action-fill-ink#182538

--schools-out-color-action-secondary-border#182538

--schools-out-color-action-secondary-ink#182538

--schools-out-color-action-tonalrgb(255 255 255 / 40%)

--schools-out-color-action-tonal-hoverrgb(255 255 255 / 50%)

--schools-out-color-action-tonal-bordercolor-mix(in srgb, #182538 12%, transparent)

--schools-out-color-action-tonal-ink#182538

--schools-out-color-action-focus#182538

--card-surfacelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--card-media-surface#ffffff

--card-glass-blurblur(32px)

--card-glass-saturation1.5

--card-glass-veilcolor-mix(in srgb, #e5f1fe 58%, transparent)

--card-glass-veil-endcolor-mix(in srgb, #e5f1fe 64%, transparent)

--card-ink#182538

--card-texturenone

--card-texture-opacity0

--card-texture-size160px

--card-texture-blendsoft-light

--card-blurblur(19px)

--card-shadow0 8px 24px rgb(26 29 41 / 6%)

--card-fallback#ffffff

--card-glass-radius32px

emit.page (190 variables)

--schools-out-brand-surface-pinklinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-pink#182538

--schools-out-brand-field-pinklinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-pink#182538

--schools-out-brand-card-texture-pinknone

--schools-out-brand-card-texture-opacity-pink0

--schools-out-brand-card-texture-size-pink160px

--schools-out-brand-card-texture-blend-pinksoft-light

--schools-out-brand-card-blur-pinkblur(19px)

--schools-out-brand-card-shadow-pink0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-pink#ffffff

--schools-out-brand-hero-texture-pinknone

--schools-out-brand-hero-texture-opacity-pink0

--schools-out-brand-hero-texture-size-pink160px

--schools-out-brand-hero-texture-blend-pinksoft-light

--schools-out-brand-hero-blur-pinkblur(19px)

--schools-out-brand-hero-shadow-pink0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-pink#ffffff

--schools-out-brand-surface-bluelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-blue#182538

--schools-out-brand-field-bluelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-blue#182538

--schools-out-brand-card-texture-bluenone

--schools-out-brand-card-texture-opacity-blue0

--schools-out-brand-card-texture-size-blue160px

--schools-out-brand-card-texture-blend-bluesoft-light

--schools-out-brand-card-blur-blueblur(19px)

--schools-out-brand-card-shadow-blue0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-blue#ffffff

--schools-out-brand-hero-texture-bluenone

--schools-out-brand-hero-texture-opacity-blue0

--schools-out-brand-hero-texture-size-blue160px

--schools-out-brand-hero-texture-blend-bluesoft-light

--schools-out-brand-hero-blur-blueblur(19px)

--schools-out-brand-hero-shadow-blue0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-blue#ffffff

--schools-out-brand-surface-orangelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-orange#182538

--schools-out-brand-field-orangelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-orange#182538

--schools-out-brand-card-texture-orangenone

--schools-out-brand-card-texture-opacity-orange0

--schools-out-brand-card-texture-size-orange160px

--schools-out-brand-card-texture-blend-orangesoft-light

--schools-out-brand-card-blur-orangeblur(19px)

--schools-out-brand-card-shadow-orange0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-orange#ffffff

--schools-out-brand-hero-texture-orangenone

--schools-out-brand-hero-texture-opacity-orange0

--schools-out-brand-hero-texture-size-orange160px

--schools-out-brand-hero-texture-blend-orangesoft-light

--schools-out-brand-hero-blur-orangeblur(19px)

--schools-out-brand-hero-shadow-orange0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-orange#ffffff

--schools-out-brand-surface-yellowlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-yellow#182538

--schools-out-brand-field-yellowlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-yellow#182538

--schools-out-brand-card-texture-yellownone

--schools-out-brand-card-texture-opacity-yellow0

--schools-out-brand-card-texture-size-yellow160px

--schools-out-brand-card-texture-blend-yellowsoft-light

--schools-out-brand-card-blur-yellowblur(19px)

--schools-out-brand-card-shadow-yellow0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-yellow#ffffff

--schools-out-brand-hero-texture-yellownone

--schools-out-brand-hero-texture-opacity-yellow0

--schools-out-brand-hero-texture-size-yellow160px

--schools-out-brand-hero-texture-blend-yellowsoft-light

--schools-out-brand-hero-blur-yellowblur(19px)

--schools-out-brand-hero-shadow-yellow0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-yellow#ffffff

--schools-out-brand-surface-olivelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-olive#182538

--schools-out-brand-field-olivelinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-olive#182538

--schools-out-brand-card-texture-olivenone

--schools-out-brand-card-texture-opacity-olive0

--schools-out-brand-card-texture-size-olive160px

--schools-out-brand-card-texture-blend-olivesoft-light

--schools-out-brand-card-blur-oliveblur(19px)

--schools-out-brand-card-shadow-olive0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-olive#ffffff

--schools-out-brand-hero-texture-olivenone

--schools-out-brand-hero-texture-opacity-olive0

--schools-out-brand-hero-texture-size-olive160px

--schools-out-brand-hero-texture-blend-olivesoft-light

--schools-out-brand-hero-blur-oliveblur(19px)

--schools-out-brand-hero-shadow-olive0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-olive#ffffff

--schools-out-brand-surface-greenlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-green#182538

--schools-out-brand-field-greenlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-green#182538

--schools-out-brand-card-texture-greennone

--schools-out-brand-card-texture-opacity-green0

--schools-out-brand-card-texture-size-green160px

--schools-out-brand-card-texture-blend-greensoft-light

--schools-out-brand-card-blur-greenblur(19px)

--schools-out-brand-card-shadow-green0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-green#ffffff

--schools-out-brand-hero-texture-greennone

--schools-out-brand-hero-texture-opacity-green0

--schools-out-brand-hero-texture-size-green160px

--schools-out-brand-hero-texture-blend-greensoft-light

--schools-out-brand-hero-blur-greenblur(19px)

--schools-out-brand-hero-shadow-green0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-green#ffffff

--schools-out-brand-surface-redlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-red#182538

--schools-out-brand-field-redlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-red#182538

--schools-out-brand-card-texture-rednone

--schools-out-brand-card-texture-opacity-red0

--schools-out-brand-card-texture-size-red160px

--schools-out-brand-card-texture-blend-redsoft-light

--schools-out-brand-card-blur-redblur(19px)

--schools-out-brand-card-shadow-red0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-red#ffffff

--schools-out-brand-hero-texture-rednone

--schools-out-brand-hero-texture-opacity-red0

--schools-out-brand-hero-texture-size-red160px

--schools-out-brand-hero-texture-blend-redsoft-light

--schools-out-brand-hero-blur-redblur(19px)

--schools-out-brand-hero-shadow-red0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-red#ffffff

--schools-out-brand-surface-violetlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-violet#182538

--schools-out-brand-field-violetlinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-violet#182538

--schools-out-brand-card-texture-violetnone

--schools-out-brand-card-texture-opacity-violet0

--schools-out-brand-card-texture-size-violet160px

--schools-out-brand-card-texture-blend-violetsoft-light

--schools-out-brand-card-blur-violetblur(19px)

--schools-out-brand-card-shadow-violet0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-violet#ffffff

--schools-out-brand-hero-texture-violetnone

--schools-out-brand-hero-texture-opacity-violet0

--schools-out-brand-hero-texture-size-violet160px

--schools-out-brand-hero-texture-blend-violetsoft-light

--schools-out-brand-hero-blur-violetblur(19px)

--schools-out-brand-hero-shadow-violet0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-violet#ffffff

--schools-out-brand-surface-teallinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-ink-teal#182538

--schools-out-brand-field-teallinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-hero-ink-teal#182538

--schools-out-brand-card-texture-tealnone

--schools-out-brand-card-texture-opacity-teal0

--schools-out-brand-card-texture-size-teal160px

--schools-out-brand-card-texture-blend-tealsoft-light

--schools-out-brand-card-blur-tealblur(19px)

--schools-out-brand-card-shadow-teal0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-card-fallback-teal#ffffff

--schools-out-brand-hero-texture-tealnone

--schools-out-brand-hero-texture-opacity-teal0

--schools-out-brand-hero-texture-size-teal160px

--schools-out-brand-hero-texture-blend-tealsoft-light

--schools-out-brand-hero-blur-tealblur(19px)

--schools-out-brand-hero-shadow-teal0 8px 24px rgb(26 29 41 / 6%)

--schools-out-brand-hero-fallback-teal#ffffff

--schools-out-brand-neutral-materiallinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-detail-materiallinear-gradient(150deg, rgb(255 255 255 / 0.652), rgb(255 255 255 / 32%) 42%, rgb(201 211 231 / …

--schools-out-brand-neutral-material-blurblur(19px)

--schools-out-brand-neutral-material-shadow0 8px 24px rgb(26 29 41 / 6%)

--schools-out-color-action-ink#eef4fc

--schools-out-color-action-base#ffffff

--schools-out-color-action-floorrgb(0 0 0 / 29%)

--schools-out-color-action-fill#ffffff

--schools-out-color-action-fill-ink#182538

--schools-out-color-action-secondary-border#182538

--schools-out-color-action-secondary-ink#182538

--schools-out-color-action-tonalrgb(255 255 255 / 40%)

--schools-out-color-action-tonal-hoverrgb(255 255 255 / 50%)

--schools-out-color-action-tonal-bordercolor-mix(in srgb, #182538 12%, transparent)

--schools-out-color-action-tonal-ink#182538

--schools-out-color-action-focus#182538

--schools-out-color-ink#182538

--schools-out-color-ink-mutedcolor-mix(in srgb, #182538 68%, transparent)

--schools-out-color-ink-neutral#182538

--v2-card-radiusvar(--schools-out-radius-container)

--v2-card-padding24px

--v2-gap16px

--v2-section-gap48px

--v2-content-width1584px

--v2-image-share50%

--v2-hero-height440px

--v2-border-opacity12%

--v2-card-shadownone