feat: new Kinu "Atelier" theme and homepage redesign#104
Draft
developit wants to merge 9 commits into
Draft
Conversation
Introduces a completely new visual identity for the Kinu docs site, matching the "Fluid Ergonomics" design mockup: - New theme.css with warm cream/sage green palette (Atelier theme) overriding all Kinu CSS custom properties - Google Fonts: Public Sans, Newsreader (serif), Manrope (labels) - Redesigned homepage with hero, philosophy (dark), primitives showcase, HTML-first code comparison, and CTA sections - Updated navigation with italic serif logo, uppercase nav links, pill-shaped CTA button, and frosted glass backdrop - New footer with brand, copyright, and links - Full responsive design for all breakpoints - Text selection uses primary (sage green) color https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
✅ Deploy Preview for kinu-sh ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: 0 B Total Size: 37.3 kB ℹ️ View Unchanged
|
Replace fake HTML demos with real interactive Kinu components: - SliderDemo uses real <Slider> with onInput state binding - TodoDemo uses real <Checkbox> + <Label> with toggle state - ButtonDemo uses real <Button> with toast integration - Primitive cards use real <Card> component Remove fake demo CSS (mock slider track/thumb, checkbox divs, fake button styles) and replace with minimal layout-only styles that let the real Kinu component styles shine through. Fix biome lint/format issues (anchor hrefs, formatting). https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
- Add 6rem bottom padding to hero section so the silk image doesn't butt up against the dark philosophy block - Remove per-card titles/descriptions from primitive demos; replace heading with "Go ahead — try them." — the interactive components speak for themselves - Add missing dark mode destructive color variables to theme.css (--k-destructive, --k-destructive-foreground, --k-destructive-hover) so every --k- variable is now set in both light and dark mode - This ensures all Kinu components across the entire docs site (not just the homepage) render with the Atelier theme https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
Each Kinu component CSS file imports variables.css, which declares
:root { --k-primary: ... } with the default blue/slate values.
In dev mode, Vite injects component CSS as separate <style> tags
that load AFTER theme.css, re-establishing the defaults.
Fix: use :root:root selector (specificity 0,2,0) in theme.css
so it always beats the single :root (0,1,0) in variables.css,
regardless of CSS injection order. This ensures the Atelier
theme applies globally across all docs pages in both dev and
production builds.
https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
- Size stat: 0.8kb → 5kb (actual gzipped size) - Code samples: use real API (Button props, Dialog compound components) instead of fabricated Kinu.Button/Kinu.Dialog - "Native Output" → "Rendered DOM", show actual rendered HTML with k= attributes and commandfor/command - Replace ~20 hardcoded color values (#fff, #1c1917, #57534e, etc.) with CSS variable references (--k-background, --k-foreground, --k-muted-foreground, --k-card, --k-border) so the homepage respects dark mode https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
Remove "The Atelier" and "Benchmarks" nav items, replace with "Components" (→/docs) and "Getting Started" (→/getting-started). Change hero "View Benchmarks" button to "View Components" linking to /docs/button. https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
- Remove all "atelier" references (section eyebrow, footer, theme comment) - Rewrite philosophy section: "A Clever Facade" heading, copy about how components map to native HTML elements, stats now show ~5kb total + 0 dependencies with left-border accent - Fix stat-label color (#78716c → #a8a29e) so text is visible on the dark section background - Richer interactive demos (2x2 grid): - Task List: checkbox todo with input to add new items - Controls: slider + switches (dark mode, notifications) - Actions: primary, secondary, outline, ghost button variants - Feedback: interactive progress bar + badge + alert - Each demo card gets a label (Task List, Controls, etc.) - Add section-subhead under "Go ahead — try them" for context - Rewrite CTA: "Ship less. Do more." with component count - Clean up footer: MIT license, useful links, dynamic year https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
- Philosophy copy: less technical, focuses on zero-cost abstraction
and bypassing conventional rendering layers
- Stat label color: #78716c → #d6d3d1 so labels are visible on
dark background; stat is now "5kB JS Total" (not JS + CSS)
- Todo demo: add progress bar showing completion %, badge with
percentage, fix checkbox/label alignment with proper gap
- Switch alignment: use plain <label> instead of <Label> component
to avoid kinu's [k="label"] { display: inline-block } overriding
the flex layout
- Footer: replace copyright with "Built by developit" linking to
GitHub profile
https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b
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.
Introduces a completely new visual identity for the Kinu docs site,
matching the "Fluid Ergonomics" design mockup:
overriding all Kinu CSS custom properties
showcase, HTML-first code comparison, and CTA sections
pill-shaped CTA button, and frosted glass backdrop
https://claude.ai/code/session_01We7s5ycpW1D9Lr8Zu2J56b