chore(docs): rebrand Pages site to match usesmileid.com by beastawakens · Pull Request #6 · smileidentity/api-reference

Ed Fricker (beastawakens) · 2026-05-08T14:50:05Z

User description

Summary

Pulls the visual identity from usesmileid.com and applies it to the OpenAPI reference Pages site.

Brand palette extracted from the corporate site stylesheet:

Navy #151F72 (primary) / #001096 (deep) / #00065C (deepest)
Brand blue #1E40AF (CTAs, links)
Orange #FF9B00 (accent — used here for active sidebar item, warning method color)
Cream #F9F0E7 (warm panel background)
Body ink #1F2937 / #4A5565
Font: Epilogue (loaded from Google Fonts with proper system fallbacks)

What changes visually

New fixed top header with Smile ID wordmark + orange-dot accent, "API Reference" subtitle, links to docs.usesmileid.com and usesmileid.com.
Spec-selector sidebar restyled in deep navy with an orange left-border on the active item.
Redoc itself rethemed: navy primary, brand-blue links, brand-aligned HTTP method colours, Epilogue typography. Per-spec sidebar in warm cream, right panel (request samples) in dark navy.
Mobile breakpoint collapses the outer sidebar above the content under 768px.

Stays the same

 /  markers — kept exactly so the upstream sync regen step continues to work.
Spec list (14 entries) — same content, same ?spec=<file> URL scheme, deep-linkable.
File layout — single docs/index.html, no per-spec files.

Test plan

CI passes on this PR
After merge, deploy-docs.yml redeploys Pages
Visit the Pages URL and confirm the new branding renders, all 14 specs are reachable, deep links still work, and Redoc still renders the request/response panels correctly

🤖 Generated with Claude Code

PR Type

Enhancement

Description

Rebrand Pages site with Smile ID corporate visual identity
Add fixed header with wordmark, subtitle, and external links
Restyle sidebar in deep navy with orange accent highlights
Apply Epilogue font and brand color palette to Redoc theme

Diagram Walkthrough

flowchart LR
  A["Old Montserrat/Roboto styling"] -- "replaced by" --> B["Epilogue font + brand palette"]
  C["Simple blue sidebar"] -- "restyled to" --> D["Deep navy sidebar with orange accents"]
  E["No header"] -- "added" --> F["Fixed header with wordmark + links"]
  G["Basic Redoc theme"] -- "enhanced to" --> H["Brand-aligned Redoc theme with cream sidebar + dark right panel"]

File Walkthrough

Relevant files

Enhancement

index.html `Full visual rebrand with corporate palette and layout` docs/index.html Added CSS custom properties for brand colors, typography, and layout dimensions Introduced a fixed top header with Smile ID wordmark (orange dot accent), subtitle, and external navigation links Restyled the spec-selector sidebar with deep navy background, orange active-item border, uppercase section heading, and a footer linking to GitHub Updated Redoc theme configuration with brand palette (navy primary, brand-blue links, HTTP method colors, Epilogue typography, cream sidebar, dark right panel) Added mobile responsive breakpoint collapsing sidebar at 768px Changed semantic markup (`div#content` → `main#content`, `h1` → `h2` for sidebar heading) Dynamic document title now reflects the selected spec name	+204/-39

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

Apply Smile ID corporate styling to the OpenAPI reference site: - Add a fixed top header with "Smile ID" wordmark + orange-dot accent, "API Reference" subtitle, and quick links to docs.usesmileid.com / usesmileid.com. - Switch the sidebar to deep navy (#00065C) with orange left-border accent on the active spec, matching the brand palette pulled from usesmileid.com. - Theme Redoc with the same palette: navy primary (#151F72), brand-blue links (#1E40AF, hover #001096), orange warnings (#FF9B00), green success (#00A544), red error (#FB2C36). - Use Epilogue (the corporate font) loaded from Google Fonts, with proper system-font fallbacks. Apply it to Redoc body, headings, and as the wrapper font. - Style HTTP method colors to match the corporate palette (GET = brand blue, POST = green, PUT = orange, DELETE = red, PATCH = purple). - Switch Redoc's per-spec sidebar to warm cream (#F9F0E7) and the request-sample right panel to dark navy (#0B0F2C) for a Stripe-like contrast layout. - Add a small footer block at the bottom of the spec-list sidebar pointing back to the GitHub repo. - Mobile: collapse the outer sidebar to a top strip under 768px. The SPEC_LIST_START/END markers are preserved unchanged so the upstream sync workflow's regen step still works. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

prfectionist · 2026-05-08T14:50:47Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪
🏅 Score: 85
🧪 No relevant tests
🔒 No security concerns identified
🔀 No multiple PR themes
⚡ Recommended focus areas for review SRI Missing The Redoc standalone script is loaded from a CDN without a Subresource Integrity (SRI) hash. If the CDN is compromised, arbitrary JavaScript could be injected into the page. Consider adding an `integrity` attribute to the script tag. <script src="https://cdn.redoc.ly/redoc/v2.4.0/bundles/redoc.standalone.js"></script> Mobile Usability On mobile (max-width 768px), the sidebar is capped at `max-height: 30vh` with `overflow-y: auto` inherited from the base rule. If there are 14 spec entries, users on short viewports may not realize the list is scrollable since there's no visible scroll indicator or toggle mechanism. @media (max-width: 768px) { #app { flex-direction: column; } #sidebar { width: 100%; flex: 0 0 auto; max-height: 30vh; } }

prfectionist · 2026-05-08T14:50:53Z

PR Code Suggestions ✨

No code suggestions found for the PR.

Copilot

Pull request overview

Rebrands the GitHub Pages OpenAPI reference wrapper (HTML/CSS + Redoc theme) to match usesmileid.com’s visual identity while keeping the existing spec-selection behavior and URL scheme.

Changes:

Adds a fixed top header with Smile ID branding and external links.
Restyles the outer spec-selector sidebar and overall typography/colors (Epilogue + new palette).
Updates Redoc theme configuration (colors, typography, sidebar/right-panel styling) and sets the document title per selected spec.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Three fixes bundled together: - Fix #app height bug. `height: 100vh` plus `padding-top` made the effective height exceed the viewport and produced a double scrollbar. Switch to `height: calc(100vh - var(--header-h))` plus `margin-top` so the layout stays inside the viewport. - Switch the meta description and sidebar footer copy from "Smile Identity" to "Smile ID" to match the rest of the page. - Drop the `paths:` filter on validate.yml. The filter scoped runs to spec/ruleset changes only, but `validate` is now a required check on main, so any PR that doesn't touch specs (this one included) sat permanently waiting for a check that would never fire. Spectral lint is ~10 seconds and parallelizes fine, so always-on is the simplest correct behavior. Workflow file changes on a PR run with the HEAD ref's version, so this PR will trigger the unfiltered validate on itself and unblock. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings May 8, 2026 14:50

Copilot started reviewing on behalf of Ed Fricker (beastawakens) May 8, 2026 14:50 View session

prfectionist Bot added the Review effort 1/5 label May 8, 2026

Ed Fricker (beastawakens) self-assigned this May 8, 2026

Copilot AI reviewed May 8, 2026

View reviewed changes

Comment thread docs/index.html

Comment thread docs/index.html Outdated

Ed Fricker (beastawakens) merged commit 492edcf into main May 8, 2026
2 checks passed

Ed Fricker (beastawakens) deleted the chore/docs-brand-styling branch May 8, 2026 14:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(docs): rebrand Pages site to match usesmileid.com#6

chore(docs): rebrand Pages site to match usesmileid.com#6
Ed Fricker (beastawakens) merged 2 commits into
mainfrom
chore/docs-brand-styling

Ed Fricker (beastawakens) commented May 8, 2026 •

edited by prfectionist Bot

Loading

Uh oh!

prfectionist Bot commented May 8, 2026

Uh oh!

prfectionist Bot commented May 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Ed Fricker (beastawakens) commented May 8, 2026 • edited by prfectionist Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Summary

What changes visually

Stays the same

Test plan

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

prfectionist Bot commented May 8, 2026

PR Reviewer Guide 🔍

Uh oh!

prfectionist Bot commented May 8, 2026

PR Code Suggestions ✨

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Ed Fricker (beastawakens) commented May 8, 2026 •

edited by prfectionist Bot

Loading