Rebrand typography to sans-forward design system#122
Open
developit wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for kinu-sh ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Base automatically changed from
claude/implement-kinu-identity-design-AGFyq
to
main
June 4, 2026 12:34
Replaces the Newsreader-italic display treatment with a system-font sans-forward variant, but keeps the original serif design available via a toggle in the theme customizer (default = serif, so the behaviour at first paint matches what's been on the PR). - Font stack: per-OS UI fonts (SF / Segoe / Roboto) with Inter as a designed web-font fallback before bare sans-serif, plus JetBrains Mono behind ui-monospace. - Display headings drop to 300 (sans variant) with 400 em accents carried by the brand color, not a heavy weight jump. - A .theme-serif class on :root selects the serif variant; an override block in style.css restores Newsreader font-family + per-selector size/weight/letter-spacing/italic for the homepage headings, race elements, demo-card internals, logo, and the docs / getting-started h1s, including responsive breakpoints. - Theme customizer gains a Typeface row; the choice persists in the existing settings localStorage entry. An inline script in index.html applies the class before first paint so there's no flash. Reset restores DEFAULT_SETTINGS.typeface (serif). - Logo's font properties move from JSX inline styles onto CSS classes (.kinu-logo-mark-k, .kinu-logo-wordmark) so the same class-based override mechanism reaches it.
developit
force-pushed
the
claude/update-demo-homepage-RXPHT
branch
from
a0b7ce8 to
b645068
Compare
Contributor
|
Size Change: 0 B Total Size: 37.7 kB ℹ️ View Unchanged
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR transitions the design system from a serif-forward to a sans-forward typography hierarchy. The display face changes from Newsreader (serif italic) to Manrope (geometric sans-serif bold), while Public Sans remains the body typeface. This creates a more modern, geometric aesthetic while maintaining the display/body hierarchy.
Key Changes
Font Stack Updates:
--kh-font-serifCSS variable to use Manrope instead of Newsreader (variable name retained for backward compatibility across selectors)Typography Adjustments Across Components:
em): Changed from italic 500 to normal 800 weight with primary colorResponsive Breakpoint Adjustments:
Logo Component Updates:
Implementation Details
--kh-font-serifvariable name is preserved to avoid updating every heading selector and demo route, but now contains the geometric-sans stackemtags) throughout the design now use bold weight (800) with primary color instead of italic stylingfont-feature-settings: "tnum") added to numeric displays for better alignmenthttps://claude.ai/code/session_01DUgxYfgnh6r7HxoNvkm15Y