[BRAND] Add visual identity: icons, logo, palette, theme, redesign UI — fixes #94

[saadbhattii]

Closes #94

Summary

Hi again! I initially started to design your icon, logo, color palette & fonts simultaneously when I soon found myself needing to verify if all of it really looked unique collectively. As I turned to your documentation, no combinations really satisfied me, hence I found myself completely changing your documentation UI even though it wasn't asked! So I did that to verify my designs, and after reworking & redesigning the UI, I arrived at my final result as well! Everything is designed individually to fit collectively for H-hat's unique visual identity. Moreover, I designed everything to fit in with both of the themes: light and dark. The logo has been designed carefully to satisfy both themes as well!

File Changes (Overview)

1. Updated mkdocs.yml (for custom UI for light and dark themes)
2. Updated docs/stylesheets/extra.css (For UI design, fonts, color palette)
3. Added docs/assets (All the icons and logos in different sizes and backgrounds)
4. Added LICENSE-CC-BY-SA (the license for all the assets including logos and icons)
5. Updated index.md (for displaying the logo on the home page, and some minor punctuation tweaks for visuals)

UI Screenshots (Before)

UI Screenshots (After)

The final look of the documentation would be based on how someone writes the documentation. The logo placement is for the visual verification with the documentation, the one who writes the documentation may present it in a better format!

I recommend running mkdocs serve locally to truly experience overall 'feel' of the UI!

What's included (Details)

Brand Assets (all CC BY-SA 4.0, my original Figma designs — not AI generated)

• icon_light.svg — icon for light theme header
• icon_dark.svg — icon for dark theme header (CSS-swapped automatically)
• logo_dual_theme_no_bg.png — transparent background logo for docs homepage
• logo_white_bg.png — logo on white background
• logo_black_bg.png — logo on black background
• favicon-16.ico, favicon-32-a.ico, favicon-48.ico, favicon-64.ico,
  favicon-128.ico — multi-size favicons, verified visible at 32px in browser tab
• LICENSE-CC-BY-SA — CC BY-SA 4.0 license file covering all above assets

Theme & Design

• UI design system: hard shadows, bold uppercase headings, strong border strokes
• Light theme: warm off-white background (#efeded), orange primary (#E99E08), no pure white or black used
• Dark theme: deep charcoal background (#1e1e1e), orange accent (#de9905), no pure white or black used
• Subtle grid background pattern on both themes
• Font changed to Lexend (body text) and Space Mono (code/monospaced)
• CSS-based automatic logo swap between light and dark themes
• Code blocks styled with hard black border, drop shadow, and sharp corners to match the design system.
• Custom scrollbar styled to match the theme
• Smooth transitions on nav links and interactive elements

Documentation

• Logo displayed on index.md homepage via centered image tag
• Removed italics from the introductory sentence in index.md

mkdocs.yml changes

• Logo and favicon paths updated to new brand assets
• Font declarations updated to Lexend and Space Mono
• Palette updated to primary: custom and accent: custom to allow full CSS variable control
• Commented out privacy plugin, it was causing local build failures by timing out on external font downloads (pre-existing issue, unrelated to this PR).
• Commented out unnecessary UI features.

Notes

• Locally tested with mkdocs serve and verified across Chrome, Firefox, Edge, and Brave
• The privacy plugin was commented out as it was causing pre-existing build issues unrelated to this PR. The maintainers may want to restore this separately once the underlying issue is resolved.

[Doomsk]

Thank you @saadbhattii for the great work! I really enjoyed the new design! I will finish reviewing the PR in more details, but so far I am quite satisfied. Although, 3 points I am still unsure, namely: the background colors and the logo. If you are up to, we can have a synchronized chat on Discord this Thursday (Feb 19th) either 11am UTC or 5pm UTC.
Let me know!

[saadbhattii]

@Doomsk I'd love to chat. 5 PM UTC works great for me. See you on Discord!

[Doomsk]

@saadbhattii you should now also be able to independently set light and dark themes for the code highlighting:

hhat_lang/python/src/hhat_lang/dialects/heather/toolchain/pygments/style.py

Lines 15 to 64 in 45e501e

	class HhatLightStyle(Style):
	"""Heather dialect light theme style syntax highlighting."""
	styles = {
	Token: "",
	Comment: "",
	Name: "",
	Name.Variable: "#3d85c6",
	Name.Function: "#2986cc",
	Name.Builtin: "#f6251e",
	Operator: "bold #6a329f",
	Punctuation: "",
	Punctuation.Marker: "bold #16537e",
	Keyword: "",
	Keyword.Declaration: "",
	Keyword.Symbol: "bold #6a329f",
	String: "",
	Literal: "",
	Literal.Boolean: "",
	Number: "",
	Number.Integer: "",
	Number.Float: "",
	}
	class HhatDarkStyle(Style):
	"""Heather dialect dark theme style syntax highlighting."""
	styles = {
	Token: "",
	Comment: "",
	Name: "",
	Name.Variable: "#9fc5e8",
	Name.Function: "#f9cb9c",
	Name.Builtin: "#f3ec4d",
	Operator: "bold #eb5d39",
	Punctuation: "",
	Punctuation.Marker: "bold #96d2d4",
	Keyword: "",
	Keyword.Declaration: "",
	Keyword.Symbol: "bold #b4a7d6",
	String: "",
	Literal: "",
	Literal.Boolean: "",
	Number: "",
	Number.Integer: "",
	Number.Float: "",
	}

[saadbhattii]

@Doomsk Thanks for flagging this! I'm still working on finalizing the logo and designs, so I'll circle back to the syntax highlighting once that's done. Happy to tackle it as a follow-up!

[saadbhattii]

Hey! @Doomsk, I have addressed the appropriate changes. Here's a summary of what's been updated:

• Updated icons and logos for both themes.
• Added attribution.md for proper asset attribution
• Synced with the latest changes from main

[Doomsk]

Hey! @Doomsk, I have addressed the appropriate changes. Here's a summary of what's been updated:

• Updated icons and logos for both themes.
• Added attribution.md for proper asset attribution
• Synced with the latest changes from main

Great! Thanks @saadbhattii for addressing them. Everybody seems to love the new logo! I'm glad we spent some time trying out many ones. We are ready to proceed to what's left.