feat: create Kinu atelier theme and redesign homepage#103
Draft
feat: create Kinu atelier theme and redesign homepage#103
Conversation
Introduces the "Technical Atelier" theme — an editorial, warm, earthy design language using Newsreader (serif/headline) and Manrope (body) fonts, with a refined color palette centered on deep forest green (#2c4c44) and parchment tones (#f7f5f0). New files: - demo/src/kinu-theme.css: CSS Custom Property overrides for the atelier theme (colors, fonts, border-radius, extended surface/outline tokens) - demo/src/homepage.css: All homepage-specific styles (nav, hero, laboratory, architecture, features grid, footer sections) Changes: - Completely redesigned homepage (home.tsx) with editorial sections: hero with italic serif headline, laboratory workspace demo, architecture showcase with quote card, features grid, and dark footer with newsletter signup - Redesigned navigation (nav.tsx) with atelier-style fixed nav bar, serif italic logo, uppercase tracked links, and CTA button - Added Google Fonts (Newsreader + Manrope) to index.html - Removed ~500 lines of old homepage CSS from style.css - Applied theme font to global body styles https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
✅ 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: 14 kB ℹ️ View Unchanged
|
Replace all static HTML mockups with real, interactive Kinu components: - Hero section: Real Card with Avatar, Badge, Progress, Checkbox, Label, Input, Tooltip, and Button — fully interactive task list demo - Laboratory: TaskOrchestrator uses real Checkbox/Label components, SystemParameters uses real Slider and Button with live state - Showcase section: 4 interactive demo cards (FormDemo, DataDemo, SettingsDemo, NotificationDemo) using Card, Input, Slider, Switch, Progress, Alert, Dialog, toast, and Button components - CTA section: Real Button components linking to demo apps - Footer: Real Input component for newsletter (styled for dark background) All components are automatically themed via CSS Custom Properties overridden in kinu-theme.css — the deep forest green, warm parchment, and editorial typography apply to every Kinu primitive. https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
- Replace custom .atelier-cta-btn with real <Button> component in nav and homepage — the editorial look (uppercase, tracked, small font) is now applied globally to all [k="button"] via kinu-theme.css - Remove --k-radius override so buttons/cards keep default 0.5rem radius - Rewrite features section copy with real, grounded descriptions from the actual Kinu docs: - "HTML Commands, Not Event Handlers" — the command/commandfor system - "~5kB Total" — actual bundle size for 50+ components - "Platform-Native" — real <dialog>, <progress>, form validation - "CSS-Driven" — attributes as selectors, no runtime branching - "AI-Readable" — transparent prop-to-DOM forwarding https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
…e clipping Laboratory section: - Replace fake "Task Orchestrator" and "System Parameters" with the real component demos (Form Controls, Data Visualization, Settings Panel, Notifications) in a 2x2 Card grid - Remove ~130 lines of fake task/params CSS and components - Remove redundant standalone "Showcase" section (demos are now in Lab) Quote card clipping: - Change .arch-image-wrapper from overflow:hidden to overflow:visible so the quote card beside "A Clever Facade." is no longer clipped - Add overflow:hidden to .arch-image-bg to keep the background contained https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
Move text-transform:uppercase, smaller font-size, and letter-spacing from the global [k="button"] theme rule to targeted selectors: .atelier-nav [k="button"] .hero-actions [k="button"] Buttons in the demo cards, CTA, docs, and getting-started pages now render with default Kinu button text styling. https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
Dark mode: - Add warm dark variant of the atelier palette for both @media (prefers-color-scheme: dark) and .dark class - Use :root:root selector for higher specificity so theme overrides beat the default variables.css dark mode - Warm near-black backgrounds (hsl 40 10% 10%) instead of cold blue, muted green primary for dark backgrounds Content: - Fix stats: "No-Dep / External Weight" → "0 / Dependencies" - Fix stats: "0.3ms / Runtime Latency" → "~5kB / JS + CSS Total" https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
Replace the four fake nav links (Collections, Philosophy, Atelier, Archive) with two real ones: Docs (/docs) and Demos (/linear). https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
Nav structure: - Restructure nav with .nav-left (sidebar trigger + logo), centered .atelier-links, and right-aligned .nav-actions - .nav-left and .nav-actions use flex:1 so links stay centered - Sidebar trigger on docs pages now sits to the left of the logo Demos dropdown: - Replace plain "Demos" link with DropdownMenu using Kinu's DropdownMenuTrigger/Content/Item components - Lists Linear, Chat, Music, and Dashboard demos - Trigger button styled to match .atelier-link appearance https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
- Fix "5kB JS + CSS Total" → "5kB JS Total" (CSS size not advertised) - Fix "~5kB Total" → "~5kB JS" in features card - Add Docs ghost button to nav-actions (left of Get Started) - Remove redundant Docs link from center nav links - Fix settings demo: scope .setting-item with .settings-demo parent to prevent dashboard responsive styles from making it stack vertically https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
Footer: - Replace the fake 4-column corporate footer (newsletter, legal, mailing list) with a simple one-row footer: logo + tagline on the left, three real links (Documentation, Get Started, GitHub) on the right - Use hsl(var(--kinu-inverse-surface)) instead of hardcoded #242521 so it adapts to dark mode - Remove ~100 lines of newsletter/column/copyright CSS Scaling: - Set font-size: 110% on .home so homepage Kinu components render at 110% scaling factor https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y
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 the "Technical Atelier" theme — an editorial, warm, earthy design
language using Newsreader (serif/headline) and Manrope (body) fonts, with a
refined color palette centered on deep forest green (#2c4c44) and parchment
tones (#f7f5f0).
New files:
(colors, fonts, border-radius, extended surface/outline tokens)
architecture, features grid, footer sections)
Changes:
italic serif headline, laboratory workspace demo, architecture showcase with
quote card, features grid, and dark footer with newsletter signup
italic logo, uppercase tracked links, and CTA button
https://claude.ai/code/session_01NJKkx3SnwGKqEFLTXdtR7Y