Merged
Conversation
Single-page interactive reference displaying all design system specs: brand colors (light/dark), motion tokens, live GSAP animation preset demos (entrance, exit, hover, logo reveal), scroll-triggered stagger reveals, component customization tables, and getting started steps. Respects prefers-reduced-motion throughout. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
…ns, large radius Customizes the design system to match the shadcn/ui create configuration: - Style: Maia (soft and rounded, generous spacing) - Base color: Gray (blue-tinted neutrals, OKLCH hue ~262) - Radius: Large (--radius: 0.75rem) - Body font: Geist Sans - Headline font: Poppins (h1-h4 only, user override) - Icon library: Hugeicons - Color format: OKLCH (Tailwind v4 standard) https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
…vel details Corrections from shadcn-ui/ui apps/v4/registry/themes.ts: - --primary light: 0.034 chroma (was 0.018) - --ring light: oklch(0.707 0.022 261.325) (was foreground color) - Dark --card/--popover: oklch(0.21 0.034 264.665) (differs from background) - Dark --border: oklch(1 0 0 / 10%) (transparency, was solid) - Dark --input: oklch(1 0 0 / 15%) (transparency) - Dark --destructive: oklch(0.704 0.191 22.216) (brighter) - --radius: 0.875rem (large preset, was 0.75rem) Added Maia component-level CSS class patterns from style-maia.css: - Button/Input: rounded-4xl (pill-shaped) - Card: rounded-2xl + ring-1 ring-foreground/10 - Dialog: rounded-4xl + ring-1 ring-foreground/5 - Input background: bg-input/30 (tinted) https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Replace static table-only component section with live interactive examples: - Buttons (primary, secondary, outline, destructive, ghost) with press effect - Inputs with pill shape and tinted bg-input/30 background - Badges (default, outline, brand yellow/blue/magenta) - Cards with ring-1 border and hover-lift animation - Dialog with scaleIn/scaleOut (back.out(1.7) overshoot) - Sheet with slideInRight/slideOutRight - Dropdown with slideInDown/fadeOut - Tooltip with fast fadeIn/fadeOut (150ms) - Toast with slideInRight/slideOutUp and auto-dismiss - Accordion with expandIn height animation - Tabs with fadeIn crossfade (150ms) All animations use GSAP presets matching the design system spec. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- Buttons: background shift on hover per variant (primary, secondary, outline, destructive, ghost) with 150ms ease-out transition - Inputs: inset border ring on hover, smooth transition to focus ring - Accordion triggers: muted color on hover - Tabs: foreground color on hover for inactive tabs - Toast close button: background highlight + color shift on hover - Dropdown items: transition on existing hover background https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Buttons: - filter: brightness() for visible colour shift on hover (1.2 primary, 0.94 secondary, 1.15 destructive) - Tinted glow shadows via color-mix (primary/destructive get coloured bloom, outline/ghost get muted fills) - CSS :active brightness(0.92) for instant press dim - GSAP: micro-lift y:-1 on hover, scale(0.97) press with back.out(2) spring recovery Cards: - CSS filter: brightness(1.015) + shadow bloom on hover - GSAP y:-4 lift (decoupled from shadow for smoother animation) Inputs: - Hover deepens tinted bg (30% → 50% input mix) - Smooth ring transition on focus Accordion: - Background fill on trigger hover (rounded pill area) - GSAP chevron nudge (y:2) on hover as affordance Tabs: - Semi-transparent muted bg pill on inactive hover - Panels now slide-up + fade (y:6→0) instead of fade-only Dropdown: - Entry now uses scale(0.96→1) with back.out(1.5) overshoot - Added :active state on items Toast: - Entry bounce via back.out(1.4) instead of flat ease https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Standalone example-mobile.html showing the design system components assembled into a realistic mobile app UI. Rendered as a phone frame at desktop, full-screen on mobile. Components used: - App bar with logo, notification bell (badge dot), avatar button - Status bar mock (time, signal, wifi, battery) - Greeting section (Poppins h1, Geist body) - Maia pill search input with icon - Stats row — 3 maia-card tiles with colour-coded values - Featured project card (primary bg, progress bar, decorative circles) - Quick actions grid (4 icon+label buttons, brand-colour icon fills) - Task list with maia-card items, priority dots, badges, checkboxes - Tabs (Today / Upcoming / Completed) with GSAP slide-up panel switch - Accordion (Project Notes) with chevron hover nudge - Bottom-sheet dialog (add task) — slides up from bottom - FAB (add task) with bounce hover - Bottom navigation bar with active dot indicator - Toast notifications (slide-up entrance, back.out bounce) All GSAP animations respect prefers-reduced-motion via dur() helper. Brand colours used only for badges, priority dots, quick-action icons and the featured card — not for semantic UI tokens. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- Nav link "Mobile Example" added to site header - New Section 07 embeds example-mobile.html in a styled phone frame (390x780, border-radius 2.75rem, layered box-shadow) via <iframe> — fully interactive in-page - Sidebar lists all 13 components and 10 animation patterns used - "Open standalone" pill-link to example-mobile.html in new tab https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
All hover/base box-shadows used rgba(0,0,0,0.03–0.1) which is invisible on dark backgrounds. Added .dark overrides for both index.html and example-mobile.html that: - Boost black shadow opacity (0.3–0.55 range) - Add subtle rgba(255,255,255,0.04–0.12) light-edge glow so elevated elements pop off the dark surface Affected: .card, .hover-lift, .theme-toggle, .maia-btn-*, .maia-card, .maia-dialog, .maia-sheet, .maia-dropdown, .maia-toast, .maia-input, .phone-frame, .stat-card, .task-item, .fab https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Changed --background from pure white oklch(1 0 0) to #FAFAFA (--brand-surface) in light mode across index.html, example-mobile.html, and tokens/colors.css. Cards remain white so they naturally lift off the slightly tinted surface. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New file: tokens/spacing.yaml - 4px grid base scale (0–24, matching Tailwind) - Semantic tokens: inline, component, gap, section, page - Per-component spacing map (button, card, dialog, etc.) - Guidelines: generous Maia defaults, gap-over-margin, 44px touch targets, no arbitrary values DESIGN-SYSTEM.md: new Section 7 (Spacing) with full tables for base scale, semantic tokens, component spacing, and rules. Sections 7–9 renumbered to 8–10. File map updated. index.html: new Section 03 (Spacing) with visual scale bars, semantic token cards, component spacing table, and guideline cards. Nav link added. Sections 03–07 renumbered to 04–08. CLAUDE.md: key files table updated with spacing.yaml at #5. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Bump all section spacing tokens up one scale step for more generous vertical rhythm (e.g. section-lg: 5rem → 6rem). Add scale-32 (8rem) to base scale. Increase h1 from 2.25rem to 2.75rem. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Every modification to the design system must now include a corresponding CHANGELOG.md entry with version, date, and specifics. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Brand highlights updated across all files: - --brand-highlight-yellow → --brand-highlight-light-green (#B9F7CE) - --brand-highlight-blue → --brand-highlight-grass-green (#3DC683) - --brand-highlight-magenta → --brand-highlight-dark-green (#15552E) Same values for both light and dark mode. Grass green used for text where dark green would be invisible on dark backgrounds. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Updated the usage example in tokens/colors.css comment block to reference --brand-highlight-grass-green instead. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- .maia-badge-light-green text color: --brand-highlight-light-green → --brand-highlight-grass-green (light green text invisible on light bg) - .maia-badge-dark-green text color: --brand-highlight-dark-green → --brand-highlight-grass-green (dark green text invisible on dark bg) - .hero-title .accent-dark-green: same fix for hero readability https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
…d functional only New 3-tier color philosophy: 1. Neutrals (default) — surfaces, greys, foreground, border 2. Brand greens (purposeful) — decorative is OK but must have intent 3. Non-brand colors (functional only) — e.g. red only for errors/warnings Applied to example-mobile.html: priority dots, stat values, utility links, and icons changed from brand colors to neutrals. Removed arbitrary oklch colors in favour of brand/neutral tokens. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
The three brand badges (light-green, grass-green, dark-green) were nearly identical. Now they form a clear soft → mid → bold progression: - light-green: pastel bg, dark-green text (softest) - grass-green: tinted bg, grass-green text (mid, unchanged) - dark-green: solid dark-green bg, light-green text (boldest) https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New icon guide in DESIGN-SYSTEM.md defines four contexts (inline, quick-action tile, FAB, navigation) with prescribed color, background, size, and stroke-weight. Key rule: one treatment per context, icons use currentColor by default with neutral container backgrounds. Fixed example-mobile.html: all four quick-action icons now use the same neutral bg + currentColor stroke + stroke-width 2 instead of four different mixed treatments (primary, brand-green, dark-green, muted-foreground). https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New components in DESIGN-SYSTEM.md and shadcn-customizations.yaml: - Chart: Recharts-backed, --chart-1..5 tokens, Maia card shell - Card with Image: image-top variant, aspect-ratio 16/9, overflow hidden - Field: form field wrapper (label + input + desc + error), select, textarea New Icons demo section on the site showing all three icon contexts (inline/toolbar, quick-action tile, navigation) with a dark mode callout explaining currentColor behavior. Dark mode icon guidelines added to DESIGN-SYSTEM.md with do/don't table and common bug patterns. Dark mode shadow overrides added for chart, card-image, select, and textarea components. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- New .icon-btn, .icon-tile, .nav-icon CSS classes with :hover, :focus-visible, and :active states replacing inline JS handlers - Fix .anim-tag dark mode: swap text to --brand-highlight-light-green, raise bg/border opacity for readable contrast - Fix .maia-badge-light-green dark mode: dark-green text was invisible, now light-green text on tinted dark-green background https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Light mode: dark green bg (#15552E), light green text (#B9F7CE). Dark mode: light green bg (#B9F7CE), dark green text/border (#15552E). Poppins 500, 15px, -0.05em letter-spacing, border-radius: 15px. Replaces placeholder grid-square .logo-icon with .logo-badge class. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New .h0 utility class for hero/landing display text. Poppins 400, line-height 1.0, letter-spacing -0.03em. Added Poppins weight 400 to Google Fonts import. Updated typography preview, DESIGN-SYSTEM.md, shadcn-customizations.yaml, and CLAUDE.md. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New Section 02 with: light mode variants (large, default, small, badge-only), dark mode variants on forced-dark panels, side-by-side animated reveal demo, usage rules, and full spec reference table. Refactored logo reveal JS into reusable playReveal()/wireReplay() helpers with ScrollTrigger auto-play. Added .logo-badge-dark CSS class. Renumbered sections 02-08 to 03-09. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Remove "Lineage HQ" wordmark from animated demos. Replace simple scale-in with a richer three-phase GSAP animation: 1. Pill elastic scale-in (scaleX 0→1, elastic.out, 800ms) 2. Staggered character blur-to-sharp (per-char blur 8→0px, 350ms) 3. Settling brand glow pulse (box-shadow fade, 600ms) Added splitBadgeChars() for per-character animation, .logo-char with will-change for GPU acceleration. Updated spec table and section description. Static size demos still show badge + wordmark. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Apply motion design best practices from research:
- Phase 1: scale 0.9→1 with back.out(1.7) + blur dissolve (not
elastic/scale-from-zero which reads cartoonish)
- Phase 2: center-out stagger radiating from the * glyph using
stagger: {each: 0.05, from: "center"}, blur 4px→0
- Phase 3: dual-layer glow (16px tight + 40px diffuse) for
realistic falloff instead of single box-shadow
Total ~1s matching slowest motion token. Updated spec table,
section description, and changelog.
https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
The wordmarks were only removed from the animated demos but still appeared in the static Light Mode and Dark Mode size panels. Simplified both panels to badge-only displays at 3 sizes (22px, 15px, 12px). Removed replay buttons and scroll triggers from static panels. Cleaned up unused wireReplay calls. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New logo variant alongside way*ID badge: - Poppins 600, 36px, -0.05em letter-spacing - Light: #15552E text, Dark: #B9F7CE text - Asterisk (*) uses grass green #3DC683 as accent - Three sizes (36px, 24px, 16px) in both light/dark panels - Animated reveal: left-stagger chars with blur dissolve, asterisk scale pop with back.out(3), text-shadow glow pulse - splitWordmarkChars() preserves .logo-asterisk span while splitting surrounding text into per-character spans - Separate spec reference tables for each logo variant - Section reorganized with sub-headings and divider https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Change .hero-title from bold 800 weight to the h0 spec: Poppins 400, clamp(3.5rem, 8vw, 6rem), line-height 1.0, letter-spacing -0.03em. Lighter weight at larger scale gives a more elegant display feel. Mobile breakpoint updated to clamp(2rem, 8vw, 3.5rem) for fluid scaling. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
Fixes four concrete bugs that would break a developer using the system: 1. Radius conflict: shadcn-customizations.yaml had 0.75rem in two places, corrected to 0.875rem to match DESIGN-SYSTEM.md and Maia spec 2. HOVER.glow wrong color: was rgba(43,195,255) (blue), corrected to rgba(61,198,131,0.35) — brand grass green (#3DC683) 3. assets/logos/README.md fully rewritten: previous content was generic placeholder SVG file slots with no brand info. Now documents both actual logo variants (way*ID badge + Lineage*Labs wordmark) with CSS, HTML, animation specs, size table, and usage rules 4. DESIGN-SYSTEM.md: added missing slideOutLeft/slideOutRight to exit preset table; rewrote logo animation section with actual variant specs https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
New tokens/breakpoints.yaml with Tailwind-aligned breakpoint scale (mobile/sm/md/lg/xl), mobile-first philosophy, container behavior, grid patterns, and 7 responsive guidelines. md: (768px) is the primary layout shift breakpoint. Added §8 Responsive to DESIGN-SYSTEM.md with breakpoint table, container CSS, layout patterns, typography rules, and guidelines. Sections renumbered §8-10 → §9-11. Added Responsive section to index.html with live grid demo (1→2→3 columns on resize), breakpoint indicator, container visualization, and guideline cards. Sections renumbered 05-09 → 06-10. Updated CLAUDE.md Key Files table with breakpoints.yaml at priority 6. https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- h1: clamp(2rem, 4vw, 2.75rem), h2: clamp(1.5rem, 3vw, 1.75rem) - Section spacing and large layout gaps compress one step below md: - Component padding, small gaps, radius, touch targets stay fixed https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
…port) - Global CSS resets: overflow-x:clip on html, overflow-wrap:break-word, media containment (max-width:100%), .table-scroll wrapper class - Safe grid pattern: minmax(min(Xpx, 100%), 1fr) replaces bare minmax() - Overlay components clamped to calc(100vw - 3rem) - All 9 token/comp tables wrapped in .table-scroll containers - Inline 2-col grids collapse below 640px via expanded media query - Documented in DESIGN-SYSTEM.md, breakpoints.yaml, customizations.yaml https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
- min-height not height for full-screen sections - Slides/carousels must overflow-y: auto on mobile - overflow: hidden only for decorative wrappers, never content - dvh not vh (accounts for mobile browser chrome) - Reduce content density or enable inner scroll https://claude.ai/code/session_01JvxUxotit9gCCDHmCCS4hB
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.
No description provided.