Skip to content

feat(frontend): add v2 design system tokens#121

Merged
DevanshuNEU merged 1 commit into
OpenCodeIntel:mainfrom
DevanshuNEU:feat/110-design-system-tokens
Dec 23, 2025
Merged

feat(frontend): add v2 design system tokens#121
DevanshuNEU merged 1 commit into
OpenCodeIntel:mainfrom
DevanshuNEU:feat/110-design-system-tokens

Conversation

@DevanshuNEU

Copy link
Copy Markdown
Collaborator

Overview

Implements the foundational design system for Frontend v2 redesign. All future components will use these tokens for consistent styling.

Changes

frontend/src/index.css

Complete rewrite with v2 design tokens:

  • Color tokens: Premium dark theme with near-black background (#09090b), indigo accent (#6366f1)
  • Glassmorphism tokens: --glass-bg, --glass-blur, --glass-border for blur effects
  • Typography: Inter (UI) + JetBrains Mono (code), responsive scale
  • Animation tokens: Expo easing, multiple durations, stagger delays
  • Component classes: .glass, .btn-*, .input-glass, .card-glass, .badge-*
  • Utility classes: .hover-lift, .hover-glow, .text-gradient, .scrollbar-thin
  • Shadcn compatibility: HSL variables maintained for existing components

frontend/tailwind.config.js

Extended Tailwind with design tokens:

  • Custom colors mapped to CSS variables
  • Animation presets and keyframes
  • Shadow utilities including glow effects
  • Backdrop blur for glassmorphism

frontend/src/lib/design-tokens.ts (new)

TypeScript constants for JS/TS usage:

  • All color, spacing, animation values as constants
  • Framer Motion variants (fadeIn, scaleIn, blurIn)
  • Helper functions (getCSSVar, setCSSVar)
  • Type exports for type safety

Design Decisions

  • Dark by default: No light mode toggle needed, devs prefer dark
  • Indigo accent: Signals intelligence/premium (vs generic blue)
  • Glassmorphism: Subtle, not overdone - 3-5% opacity backgrounds
  • Animation easing: Expo curves for premium feel

Testing

  • npm run build passes
  • No TypeScript errors
  • CSS custom properties render correctly

Related

Closes #110
Part of Epic #109

Screenshots

N/A - These are tokens, visual testing will come with component implementation (#111, #112)

@vercel

vercel Bot commented Dec 23, 2025

Copy link
Copy Markdown

@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel.

A member of the Team first needs to authorize it.

- Premium dark theme with near-black background (#09090b)
- Indigo accent color (#6366f1) for intelligence/premium feel
- Glassmorphism tokens for blur effects and glass cards
- Animation tokens with expo easing and stagger delays
- Typography scale with Inter + JetBrains Mono
- Shadcn/ui compatibility maintained
- TypeScript constants for JS usage

Closes OpenCodeIntel#110
@DevanshuNEU DevanshuNEU force-pushed the feat/110-design-system-tokens branch from 52627df to c17ac12 Compare December 23, 2025 18:24
@vercel

vercel Bot commented Dec 23, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
opencodeintel Ready Ready Preview, Comment Dec 23, 2025 6:33pm

@DevanshuNEU DevanshuNEU merged commit 2821145 into OpenCodeIntel:main Dec 23, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(frontend): Design system tokens - colors, typography, spacing

1 participant