Logo variants
The logo component ships in four responsive sizes. Each size is tuned for a specific touchpoint.
Sultan Techsm
Mobile menu
Sultan Techmd
Header & footer
Sultan Techlg
CV profile
hero
Homepage hero
Usage by context
Header
Sultan Tech- Variant
- md
- Where it appears
- Primary navigation mark. Always left-aligned in the top bar.
- Clear space
- Keep 8 px of clear space on every side of the mark container.
- Text treatment
- Text stays visible at this size for instant brand recognition.
Footer
Sultan Tech- Variant
- md
- Where it appears
- Footer brand anchor. Used at the top of the contact column.
- Clear space
- Same clear space as the header (8 px). Never smaller than md here.
- Text treatment
- Text visible to reinforce the brand at the end of every page.
Hero
Sultan Tech- Variant
- hero
- Where it appears
- Homepage hero centerpiece. Stacked layout with mark above the wordmark.
- Clear space
- Center in a large glass panel. Keep at least 24 px padding around it.
- Text treatment
- Large, bold, and used as the main visual hook on the homepage.
Mobile Menu
Sultan Tech- Variant
- sm
- Where it appears
- Mobile slide-down menu header. Replaces the desktop mark when the menu opens.
- Clear space
- Clear space reduces to 6 px on the small mark.
- Text treatment
- Text stays visible but scaled down for narrow screens.
Brand color tokens
All logo and UI colors are defined as CSS custom properties in src/styles.css. Use these tokens when designing anything around the logo.
Primary
--color-primary
Logo accent, CTAs, glows, active links
Background
--color-background
Page background, dark surfaces
Card
--color-card
Glass panels behind the logo
Indigo Light
--color-indigo-light
Borders, subtle outlines
Glow
--color-glow
Hero glow, logo drop-shadow
Foreground
--color-foreground
Wordmark text, headings
Clear space
Sultan TechThe dashed border represents the minimum clear space around the logo.
Keep the area around the logo free of text, icons, busy patterns, or other visual noise. The minimum clear space is equal to the height of the small mark stroke:
- sm variant6 px
- md variant8 px
- lg variant12 px
- hero variant24 px
What not to do
Never stretch, skew, rotate, or distort the logo mark.
Do not place the logo on a busy background without a glass panel.
Do not change the wordmark color independently of the mark.
Do not use the logo smaller than the sm variant in any interface.
Do not crop the clear-space padding around the mark.