Summary
The docs site currently uses default Docusaurus/Infima styling (rounded corners, generic blue/green accent colors, Inter/Roboto/Poppins mix) that doesn't reflect the Intech Studio brand system defined in the website repo's docs/DESIGN.md.
Brand reference (from webapps/apps/website/docs/DESIGN.md and src/app.css)
- Fonts: Grifter (headings/highlights), Inter (body), Web IBM BIOS (accent/retro-tech monospace)
- Shape language: sharp corners everywhere (
--radius: 0); rounding reserved only for emphasis/highlighting
- Borders: primary structural/separation tool — black at varying opacity (
border-black/10–border-black/100), border-2 weight as default
- Colors:
branding-blue #0000FA, branding-orange/red #F54708, branding-yellow #E4FF68, ink #000 / paper #fff, dark-gray scale #242424 → #F3F3F3
- Semantic color use: orange = warning, green = success, black = neutral notice — reserved strictly for UX states, not decoration
- Overall character: blocky/angular, block-based grid layout, subtle retro pixel-art/gamer-nostalgia accents layered on a clean technical foundation
Current state
- Docusaurus 2 classic theme (Infima defaults)
- Primary color:
#1555bc (light) / green (dark) — not brand blue
- Default rounded Infima corners, no black border-based separation
- Font mix of Inter/Roboto/Poppins, no Grifter or Web IBM BIOS
- Reads as generic Docusaurus rather than an Intech Studio product
Proposed direction
Docusaurus doesn't have a theme marketplace — brand alignment on sites like this comes from overriding Infima CSS variables (and optionally swizzling components), not installing a prebuilt "skin." Suggested phased approach:
- Infima variable reskin (low effort, high impact):
--radius: 0 (sharp corners) with rounding only for emphasis elements- Black
border-2 dividers between content blocks, matching the website's separation system
branding-blue as --ifm-color-primary; orange/yellow reserved strictly for admonitions (warning/tip), not decoration- Grifter for
h1–h3, Inter for body copy
- Web IBM BIOS for code blocks/inline code — a strong, on-brand tie-in given this is hardware/firmware reference documentation
- Dark-first variant: default to the site's dark palette (black background, white text, sparing color accents) to mirror intech.studio's homepage more closely.
- Deeper structural pass: swizzle sidebar/navbar/admonition components to achieve the blocky grid and thick divider lines described in
DESIGN.md, beyond color/font swaps.
Recommend starting with (1) as a CSS-only change in src/css/custom.css, reusing font assets that already exist in the website repo.
Summary
The docs site currently uses default Docusaurus/Infima styling (rounded corners, generic blue/green accent colors, Inter/Roboto/Poppins mix) that doesn't reflect the Intech Studio brand system defined in the website repo's
docs/DESIGN.md.Brand reference (from
webapps/apps/website/docs/DESIGN.mdandsrc/app.css)--radius: 0); rounding reserved only for emphasis/highlightingborder-black/10–border-black/100),border-2weight as defaultbranding-blue #0000FA,branding-orange/red #F54708,branding-yellow #E4FF68, ink#000/ paper#fff, dark-gray scale#242424→#F3F3F3Current state
#1555bc(light) / green (dark) — not brand blueProposed direction
Docusaurus doesn't have a theme marketplace — brand alignment on sites like this comes from overriding Infima CSS variables (and optionally swizzling components), not installing a prebuilt "skin." Suggested phased approach:
--radius: 0(sharp corners) with rounding only for emphasis elementsborder-2dividers between content blocks, matching the website's separation systembranding-blueas--ifm-color-primary; orange/yellow reserved strictly for admonitions (warning/tip), not decorationh1–h3, Inter for body copyDESIGN.md, beyond color/font swaps.Recommend starting with (1) as a CSS-only change in
src/css/custom.css, reusing font assets that already exist in the website repo.