style(theme): apply the Data Controller brand palette and logo #12

Merged

allan merged 1 commits from docs/onbrand-styling into main 2026-09-28 23:03:27 +00:00

Conversation 0 Commits 1 Files Changed 3

+50 -5

hermes commented 2026-09-28 22:55:46 +00:00

Collaborator

Copy Link

Copy Source

The docs site renders as stock Material - an indigo header, indigo links and Open Sans - so it reads as a different product to the marketing site and to the application itself. This puts the two sites on the same palette and typeface.

What changed

Element	Before	After
Header	Material stock indigo #4051b5	Brand slate #314351
Accent (link hover, focus ring, active search hit)	Indigo #526cfe	Brand green #79a843
Body links	Indigo	Slate #314351
Text typeface	Open Sans	Montserrat
Header logo	img/favicon.ico	the application's dc-logo.svg mark

• mkdocs.yml: palette set to a custom primary/accent, font.text set to Montserrat, header logo switched to the application's mark.
• docs/dc-brand.css (new): defines the two brand colours, registered through extra_css.
• docs/img/dc-logo.svg (new): a copy of dc/client/src/assets/dc-logo.svg, the mark the application itself uses.

The colours are the ones the marketing site already uses - slate #314351 is its navbar and hero, and green is its logo accent. Green is deliberately the accent only: at #79a843 on white it is about 2.5:1, below the 4.5:1 that body text needs, so body links stay on the slate (about 10:1) and green is reserved for hover, focus and the active search hit.

A latent bug this also fixes

The palette config was a mapping (palette: primary: White, accent: Amber). The Material version this repo builds against - build.sh installs the latest mkdocs-material - expects a list of palette entries, so the mapping was silently ignored and the header fell through to Material's default indigo. The site has not been rendering the White/Amber it asked for. The generated HTML still carries data-md-color-primary="White", while palette.css only defines [data-md-color-primary=white] (lowercase), so the attribute matches nothing at all. The list form used here is the one Material currently reads.

Screenshots

Before and after, captured at 1920x1200 from a local mkdocs build of this branch and of main.

Home

Before:

After:

Configuration page (code blocks, admonitions, tables)

Before:

After:

Mobile (480px)

Before:

After:

Deliberately not changed

• Admonition colours (note, tip, warning). They are a semantic set rather than brand colour, and re-colouring them would cost more than it gains.
• theme/ and the rest of mkdocs.yml.

Notes for the reviewer

• No CI runs on this repo's PRs - publish.yml publishes on push to main - so nothing gates this but review.
• The header logo is hidden below the tablet breakpoint, which is Material's own behaviour and is unchanged by this PR (it was hidden before too).

The docs site renders as stock Material - an indigo header, indigo links and Open Sans - so it reads as a different product to the marketing site and to the application itself. This puts the two sites on the same palette and typeface. ## What changed | Element | Before | After | |---|---|---| | Header | Material stock indigo `#4051b5` | Brand slate `#314351` | | Accent (link hover, focus ring, active search hit) | Indigo `#526cfe` | Brand green `#79a843` | | Body links | Indigo | Slate `#314351` | | Text typeface | Open Sans | Montserrat | | Header logo | `img/favicon.ico` | the application's `dc-logo.svg` mark | - `mkdocs.yml`: palette set to a `custom` primary/accent, `font.text` set to Montserrat, header logo switched to the application's mark. - `docs/dc-brand.css` (new): defines the two brand colours, registered through `extra_css`. - `docs/img/dc-logo.svg` (new): a copy of `dc/client/src/assets/dc-logo.svg`, the mark the application itself uses. The colours are the ones the marketing site already uses - slate `#314351` is its navbar and hero, and green is its logo accent. Green is deliberately the accent only: at `#79a843` on white it is about 2.5:1, below the 4.5:1 that body text needs, so body links stay on the slate (about 10:1) and green is reserved for hover, focus and the active search hit. ## A latent bug this also fixes The palette config was a mapping (`palette: primary: White, accent: Amber`). The Material version this repo builds against - `build.sh` installs the latest `mkdocs-material` - expects a list of palette entries, so the mapping was silently ignored and the header fell through to Material's default indigo. The site has not been rendering the White/Amber it asked for. The generated HTML still carries `data-md-color-primary="White"`, while `palette.css` only defines `[data-md-color-primary=white]` (lowercase), so the attribute matches nothing at all. The list form used here is the one Material currently reads. ## Screenshots Before and after, captured at 1920x1200 from a local `mkdocs build` of this branch and of `main`. ### Home Before:  After:  ### Configuration page (code blocks, admonitions, tables) Before:  After:  ### Mobile (480px) Before:  After:  ## Deliberately not changed - Admonition colours (`note`, `tip`, `warning`). They are a semantic set rather than brand colour, and re-colouring them would cost more than it gains. - `theme/` and the rest of `mkdocs.yml`. ## Notes for the reviewer - No CI runs on this repo's PRs - `publish.yml` publishes on push to `main` - so nothing gates this but review. - The header logo is hidden below the tablet breakpoint, which is Material's own behaviour and is unchanged by this PR (it was hidden before too).

before-home.png

109 KiB

after-home.png

106 KiB

before-tables.png

222 KiB

after-tables.png

220 KiB

before-mobile.png

38 KiB

after-mobile.png

40 KiB

hermes added 1 commit 2026-09-28 22:55:46 +00:00

style(theme): apply the Data Controller brand palette and logo ... 6d09a8e1d8

The docs site rendered as stock Material: indigo header, indigo links and
Open Sans. Neither colour nor type matched the marketing site
(datacontroller.io) or the application itself.

- Palette: the slate (#314351) and green (#79a843) already used by the
  marketing navbar, hero and logo accent, wired up via a `custom` palette
  and defined in the new docs/dc-brand.css.
- Type: Montserrat for text, matching the marketing site's headings.
- Logo: the application's own dc-logo.svg mark in the header.

The previous `palette:` mapping form (a dict of primary/accent) is no
longer honoured by the Material version this repo builds against, so the
theme fell through to Material's default indigo - the site was not in fact
rendering the White/Amber it asked for. The list form used here is the one
Material currently reads.

allan merged commit 2e269341df into main 2026-09-28 23:03:27 +00:00

allan deleted branch docs/onbrand-styling 2026-09-28 23:03:27 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

allan (Allan) dcbot henrik hermes (hermes) mihajlo sead trevor Yury

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/docs.datacontroller.io#12