The Oztix logo, always in its fixed brand colour.
import { Logo } from '@oztix/roadie-components/logo'
<Logo />
normal is the mark and the wordmark together. mark is the mark alone, for tight spaces such as an app icon or a collapsed navigation. wordmark is the word alone.
<div className='grid justify-items-start gap-6'> <Logo variant='normal' /> <Logo variant='mark' /> <Logo variant='wordmark' /> </div>
product pairs the mark with a product name, rendered as live text in place of the wordmark. When it's set, variant is ignored.
<Logo product='Studio' />
The logo's height is set with the size prop, not a className. One value scales the mark, the gap and the product name together. xs is 20px, sm 24px, md 32px (the default), lg 40px, xl 48px.
Logo sizes sit one step below Button and IconTile, whose md is 40px, so a size='md' logo pairs with a size='sm' button.
The logo's colour is fixed. It is always Oztix blue, identical in light and dark mode, and unaffected by a surrounding intent.
The logo-wordmark and logo-product slots hold their own gap and clip, so a parent can collapse either to the mark's square by animating its grid-template-columns from 1fr to 0fr.
<Logo size='lg' />
Do
Set one height through size. The width follows the logo's proportions.
<Logo className='h-12 w-40' />
Don’t
Don't set a width or a separate height. That stretches or crops the artwork and leaves the gap and product name at the old size.
Do
Use the product's one- or two-word name, in title case.
Don’t
Don't repeat "Oztix" or add a tagline. The mark already says Oztix, and the name never wraps.
<Logo />
Do
The logo is always Oztix blue. It doesn't take an intent or a colour prop, and it doesn't follow a surrounding intent.
<Logo className='text-[#0191eb]' />
Don’t
Don't hard-code a colour. It won't change with the theme.
aria-label to name it something else, such as "Oztix home" inside a link.aria-hidden and it drops its role and name.dir prop.`normal` is the mark and wordmark; `mark` and `wordmark` are one part each.
Defaults to normal.
Product name set as live text in place of the wordmark, naming the logo `Oztix {product}`.
The logo's height: `xs` 20px, `sm` 24px, `md` 32px, `lg` 40px, `xl` 48px.
Defaults to md.