Downloadable asset
Light and dark artwork sits on a sheet in its own mode; transparent artwork sits on a checkerboard. The download names its format.
Grounds
Logotype for dark backgrounds
Light lettering with the champagne-to-gold mark.
Logotype for light backgrounds
Dark lettering with the champagne-to-gold mark.
Mark for dark backgrounds
Standard flat mark, for heights of 24px and above.
Used on the brand page.
Usage and interface
DemoAsset renders a tray: title and description in the head, the artwork on the stage and a caption with the format badge and a download link styled as ui-button. surface="light" or "dark" sets the stage itself in that mode, so the artwork needs no sheet of its own; "transparent" (the default) uses the checkerboard stage.
<DemoAsset title="Master CSS mark" description="Original SVG artwork." src="/images/logo.svg" alt="Master CSS gold mark" width={216.6} height={120} surface="dark"/>The file is unchanged; only the preview is constrained by the image’s intrinsic dimensions.