Design System
Closegram's visual design is built on a shared Tailwind configuration (packages/tailwind-config) with a custom CSS variable token system and three-mode theming.
Theme modes
The ThemeContext supports three modes:
| Mode | Behavior |
|---|---|
light | Always light |
dark | Always dark |
system | Follows OS preference via prefers-color-scheme |
The resolved theme (light or dark) is applied by toggling the class on <html>. Mode is persisted to localStorage.
const { theme, mode, setTheme, toggleTheme } = useTheme();
// theme: 'light' | 'dark' (resolved)
// mode: 'light' | 'dark' | 'system'
CSS custom properties
Defined in apps/frontend-nextjs/src/app/globals.css and applied globally:
| Token | Light | Dark | Usage |
|---|---|---|---|
--color-background | #ffffff | #000000 | Page background |
--color-foreground | #0f1419 | #e7e9ea | Body text |
--color-card | #ffffff | #16181c | Card surfaces |
--color-card-foreground | #0f1419 | #e7e9ea | Text on cards |
--color-border | #eff3f4 | #2f3336 | Dividers, outlines |
--color-input | #f7f9f9 | #16181c | Input backgrounds |
--color-muted | #f7f9f9 | #16181c | Subtle backgrounds |
--color-muted-foreground | #536471 | #71767b | Secondary text |
--color-primary | #1d9bf0 | #1d9bf0 | Brand blue (interactive) |
Brand accent colors
Defined in packages/tailwind-config/shared-styles.css and extended in Tailwind:
| Token | Value | Usage |
|---|---|---|
--color-blue-1000 | #2a8af6 | Highlights, links |
--color-purple-1000 | #a853ba | Creator badge, gradient |
--color-red-1000 | #e92a67 | Reactions, alerts |
Card tokens (Tailwind colors.card)
| Key | Value |
|---|---|
card.light | #ffffff |
card.dark | #191c1f |
Logo color
| Key | Value |
|---|---|
logo.light | #26292b |
logo.dark | #FFAA00 |
Typography
Body font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif.
Custom brand font: BlueVinyl Bold (served from /assets/fonts/) — used in logo lockups.
Navigation
The main nav (Navigation.tsx) is an icon sidebar that:
- Collapses to icon-only by default
- Expands on hover or when the "More" menu is open
- Force-collapses if the
collapsedprop is set - Highlights the active route via
usePathname()
Nav items: Home, Search, Explore, Messages, Notifications, Create Post, plus a "More" overflow menu with theme switcher and logout.
App routes
| Route | Page |
|---|---|
/home | Main feed |
/search | Search |
/messages | Messages |
/coins | Coins & transactions |
/payments | Payments |
/profile | Own profile |
/[username] | Public profile |
/p/[postId] | Post detail |
/settings | Settings |
/login | Login |
Shared packages
| Package | Purpose |
|---|---|
packages/tailwind-config | Shared Tailwind config + design tokens |
packages/typescript-config | Shared tsconfig.json bases |
packages/eslint-config | Shared ESLint rules |
packages/graphql | Single source of truth — GraphQL schema + operations (Web/Admin) |
packages/apollo-web | Generated TS Apollo client for frontend-nextjs (auth, ws, upload links) |
packages/apollo-admin | Generated TS Apollo client for frontend-admin |
packages/apollo-swift | Generated Swift ClosegramGraphQL module for apps/ios |