shadcn.io is not affiliated with official shadcn/ui
Brand Kit Onboarding Block for Svelte
A framed window where a logo upload, an accent and a text colour picker and a font choice restyle a drawn welcome email live, with the real contrast ratio of the text on the accent and a pass or fail for AA.
Installation
Overview
Let people set up how their brand looks and check it on a real email before they save, with this brand step for Svelte with Ark UI. It's one framed window in Deckmoor, a presentation-template studio: a top bar with the product's mark, the heading and Save brand kit, over two panes. At the start are the controls: a logo in a File Upload that replaces the initials tile, two Color Pickers with hex fields for the accent and the text that sits on it, and a font in a Native Select (Sans, Serif, Mono, Rounded). Under them a line works out the contrast and says whether the text on the accent passes AA. At the end is a drawn welcome email with a header band, a heading, a button and a footer, restyled on every change. Save brand kit is a Shine Button.
FAQ
How is the contrast worked out?
With the WCAG formula: each color's channels are converted to relative luminance and the ratio is the lighter one plus 0.05 over the darker one plus 0.05. The line shows the ratio to one decimal and says “passes AA” from 4.5 to 1 up, the minimum for normal text. It is real arithmetic on the two colors you chose, not a typed answer.
Where do the colors reach, and where do they not?
Only the sample email's own box, through two CSS variables: the accent paints the header band and the button, and the text color sits on both. The heading and the paragraph stay in the theme, so a pale text color cannot make the email unreadable. The rest of the window, and your site, keep their theme; this block sets colors inline only because the colors are the visitor's content.
What happens to the logo file?
It is read in this tab only. Choosing a PNG, JPEG, WebP or SVG up to 2 MB makes an object URL that shows the picture in the tile and in the email's header; replacing or removing it, or leaving the page, revokes the URL. A wrong type or an oversize file is refused in words under the button. Nothing is uploaded.
What can I type in the color fields?
Six hex digits, with or without the hash. A field keeps what you type and the sample changes once it holds six valid digits; leaving it with anything else shows “Use six hex digits.” in a reserved line. The picker and the field stay in step both ways.
What stays local in the demo, and how do I wire it?
Everything: Save brand kit says “Saved in this demo” (or that the contrast fails) and stores nothing. In your app send the logo to your storage, keep the two colors and the font with the workspace, and build the real email from the same three values.