# Logo The Simbolik brand mark: the full logo, the mark alone, or the wordmark alone, colored by the text roles; or a site's own logo as shapes or as a picture file. Block: `smbk-logo`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only. ## Options | Axis | Values | Default | Meaning | |---|---|---|---| | `brand` | `simbolik` | `simbolik` | Which brand's logo. The logo stays simbolik's, and no license covers it; a product built on the design system replaces it with its own. | | `form` | `logo`, `logomark`, `logotype` | `logo` | The whole logo, the mark alone, or the wordmark alone. Figma calls this "Variant" / "Type". | | `source` | `shapes`, `picture` | `shapes` | Shapes are drawn in the page and take the system's colors, so they follow the theme; a picture is a site's logo file, drawn as an image with its own colors, and a dark version under the dark theme. | Parts: `smbk-logo__mark`, `smbk-logo__type`, `smbk-logo__picture`, `smbk-logo__picture-dark` ## Markup ```html ``` ## React ```tsx import { Logo } from './design-system/components/logo/logo.js'; ``` ## Stylesheet ```css /* smbk-logo — Logo. Figma "logo-simbolik" 363:14503. * Inline SVG: the mark takes the brand border color, the same red in both * themes, and the wordmark the default text color, so it follows the theme. * Or a site's own picture files (source picture, below), which keep their own * colors. * * The block's own rule carries no weight (:where), as the icon's does: the part * rule of the component a logo sits in (the header's, the app bar's, the * footer's) always sets its height, whatever order the stylesheets load in. */ :where(.smbk-logo) { display: inline-block; height: var(--smbk-size-mark-xl); width: auto; vertical-align: middle; } .smbk-logo__mark { fill: var(--smbk-color-border-brand); } .smbk-logo__type { fill: var(--smbk-color-text-default); } /* ---- source: picture ---- A site's logo file, drawn as an image so it keeps its own colors. The block takes the height its place gives it, as the shapes do, and the picture fills that height at its own proportion. A dark version, when given, shows under the dark theme in place of the light one: the theme is read from the same attributes the tokens read (data-theme, or the system's setting when no theme is set), and a light area inside a dark one shows the light picture again. */ :where(.smbk-logo--source-picture) { display: inline-flex; } .smbk-logo__picture, .smbk-logo__picture-dark { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; } .smbk-logo__picture-dark { display: none; } [data-theme="dark"] .smbk-logo__picture:has(+ .smbk-logo__picture-dark) { display: none; } [data-theme="dark"] .smbk-logo__picture-dark { display: block; } [data-theme="dark"] [data-theme="light"] .smbk-logo__picture:has(+ .smbk-logo__picture-dark) { display: block; } [data-theme="dark"] [data-theme="light"] .smbk-logo__picture-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .smbk-logo__picture:has(+ .smbk-logo__picture-dark) { display: none; } :root:not([data-theme]) .smbk-logo__picture-dark { display: block; } :root:not([data-theme]) [data-theme="light"] .smbk-logo__picture:has(+ .smbk-logo__picture-dark) { display: block; } :root:not([data-theme]) [data-theme="light"] .smbk-logo__picture-dark { display: none; } } /* ---- high contrast (forced colors) ---- */ /* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the user's own colors. Nothing here applies outside that mode. */ @media (forced-colors: active) { /* SVG fills are not forced, so the wordmark would keep the page theme's color on the user's background. It takes the palette's text color instead. */ .smbk-logo__type { fill: CanvasText; } } ``` ## Tokens it reads ```json { "size": { "mark": { "xl": { "$type": "dimension", "$value": "{{size.32}}", "$description": "Small fixed marks inside components (dots, bars, keys), extra large." } } }, "color": { "border": { "brand": { "$type": "color", "$value": "{{color.red.600}}", "$description": "Brand-red edge; also the logo’s mark." } }, "text": { "default": { "$type": "color", "$value": "{{color.grey.900}}", "$description": "Main text." } } } } ``` ## Purpose The brand marks, drawn as shapes in the page so they take the system's colors: the mark in the brand red, the same in both themes, the wordmark in the default text color. That is what lets one logo work on both themes without a second image. A site with a logo of its own gives the logo its shapes (`shapes`), in the same form as the built-in logo: a name, the whole logo's frame, the view boxes of the mark and of the wordmark, and their paths. They are drawn and colored the same way. A logo with colors of its own, a gradient or several fills cannot be drawn with two color roles. A site gives it as picture files instead (`picture`, the picture source): the whole logo, and the mark and the wordmark alone where it has those forms, each with an optional dark version. Each is drawn as an image, so it keeps its own colors and nothing inside it runs. ## Anatomy - The block, an inline graphic at the display height. - The mark part, the symbol. - The type part, the wordmark. - With the picture source, the block holds the picture part, the file for its form, and the picture dark part, its dark version, if given, in place of the mark and the type. ## When to use - The header and the footer. - Anywhere the product signs its name. - Shapes for a logo that should follow the theme and the reader's high contrast colors; a picture for a logo with colors of its own. ## When not to use - As an icon inside a control. Use the mark alone at most, and only where the brand itself is the subject. ## Behavior Shapes take the theme's colors as it changes. A picture keeps its colors; under the dark theme its dark version, when given, shows in place of the light one, read from the same theme setting the colors follow, so a light area inside a dark page shows the light picture. ## Accessibility ### What it does for you - The graphic carries an image role and the brand name as its accessible name, or the name a site's own shapes carry. - A picture logo's images carry the logo's name as their text alternative. - It takes no focus and no keys. ### What you must do - When the logo is a link home, make the link's name the brand name. The graphic then needs no name of its own. - Draw a logo that must stay readable in high contrast mode as shapes. A picture cannot follow high contrast mode: it keeps its own colors on the reader's background. ### How to test - With a screen reader, the logo is read as an image named for the brand. Inside a link home, the link is read by the brand name. - With text at 200% and the page 320 pixels wide, the logo keeps its height and its width follows. - In a forced-color mode, a logo drawn as shapes shows its wordmark in the system's text color. A picture logo keeps its own colors on the reader's background, so check that it still reads there. ## Usage rules ### Do - Keep the height; the width follows. - Give a picture logo a dark version unless it reads on both the light and the dark surfaces. - Use a picture only where the logo's own colors matter; shapes follow the theme for free. ### Don't - Recolor it. The two roles are the whole brand rule; on a brand surface use the mark in the on-brand text color by placing it in a container that sets the color. - Ship the simbolik logo on your own product. It stays simbolik's and no license here covers it; replace it with your own logo. - Rely on the order stylesheets load in to size a logo. Its own height is only a starting point that any class overrides, so set its height with a class of your own where you place it.