Add LUX branding and monochromatic theme

- Configure Inter font as default for all text - Create monochromatic black/white/grey color scheme - Add LUX logo and favicon - Set up GitHub Action for automated builds - Configure production environment variables Co-authored-by: Hanzo Dev <dev@hanzo.ai>
2026-07-27 03:13:50 +00:00 · 2025-06-26 21:28:57 +00:00
parent 4f0a407f6a
commit 10beed1983
12 changed files with 390 additions and 270 deletions
@@ -0,0 +1,42 @@
+# Network Configuration
+NEXT_PUBLIC_NETWORK_NAME=LUX Network
+NEXT_PUBLIC_NETWORK_SHORT_NAME=LUX
+NEXT_PUBLIC_NETWORK_ID=96369
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=LUX
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=LUX
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+
+# API Configuration
+NEXT_PUBLIC_API_HOST=api-explore.lux.network
+NEXT_PUBLIC_API_PROTOCOL=https
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=wss
+
+# App Configuration
+NEXT_PUBLIC_APP_HOST=explore.lux.network
+NEXT_PUBLIC_APP_PROTOCOL=https
+NEXT_PUBLIC_IS_TESTNET=false
+
+# Branding
+NEXT_PUBLIC_NETWORK_LOGO=/logos/lux-logo-white.png
+NEXT_PUBLIC_NETWORK_LOGO_DARK=/logos/lux-logo-white.png
+NEXT_PUBLIC_NETWORK_ICON=/logos/lux-logo-white.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=/logos/lux-logo-white.png
+NEXT_PUBLIC_OG_IMAGE_URL=/logos/lux-logo-white.png
+
+# Font Configuration
+NEXT_PUBLIC_FONT_FAMILY_HEADING={"name":"Inter","url":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"}
+NEXT_PUBLIC_FONT_FAMILY_BODY={"name":"Inter","url":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"}
+
+# Theme
+NEXT_PUBLIC_COLOR_THEME_DEFAULT=dark
+
+# Features
+NEXT_PUBLIC_HOMEPAGE_CHARTS=["daily_txs", "coin_price", "market_cap"]
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+
+# Stats
+NEXT_PUBLIC_STATS_API_HOST=https://api-explore.lux.network/api/stats
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://api-explore.lux.network/api/visualize
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://api-explore.lux.network
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://api-explore.lux.network
@@ -0,0 +1,79 @@
+name: Build and Push LUX Explorer
+
+on:
+  push:
+    branches:
+      - main
+      - lux-branding
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: luxfi/explore
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GH_PAT }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=sha,prefix={{branch}}-
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=lux-branded
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXT_PUBLIC_NETWORK_NAME=LUX Network
+            NEXT_PUBLIC_NETWORK_SHORT_NAME=LUX
+            NEXT_PUBLIC_NETWORK_ID=96369
+            NEXT_PUBLIC_NETWORK_CURRENCY_NAME=LUX
+            NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=LUX
+            NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+            NEXT_PUBLIC_API_HOST=api-explore.lux.network
+            NEXT_PUBLIC_API_PROTOCOL=https
+            NEXT_PUBLIC_APP_HOST=explore.lux.network
+            NEXT_PUBLIC_APP_PROTOCOL=https
+            NEXT_PUBLIC_IS_TESTNET=false
+            NEXT_PUBLIC_NETWORK_LOGO=/logos/lux-logo-white.png
+            NEXT_PUBLIC_NETWORK_LOGO_DARK=/logos/lux-logo-white.png
+            NEXT_PUBLIC_NETWORK_ICON=/logos/lux-logo-white.png
+            NEXT_PUBLIC_NETWORK_ICON_DARK=/logos/lux-logo-white.png
+            NEXT_PUBLIC_OG_IMAGE_URL=/logos/lux-logo-white.png
+            NEXT_PUBLIC_STATS_API_HOST=https://api-explore.lux.network/api/stats
+            NEXT_PUBLIC_VISUALIZE_API_HOST=https://api-explore.lux.network/api/visualize
+            NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://api-explore.lux.network
+            NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://api-explore.lux.network
@@ -0,0 +1,67 @@
+# Build stage
+FROM node:22.11.0-alpine AS builder
+
+RUN apk add --no-cache libc6-compat python3 make g++ git
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json yarn.lock ./
+COPY tsconfig.json ./
+COPY next.config.js ./
+COPY postcss.config.js ./
+COPY tailwind.config.ts ./
+
+# Copy necessary directories
+COPY types ./types
+COPY lib ./lib
+COPY configs ./configs
+COPY toolkit ./toolkit
+COPY ui ./ui
+COPY pages ./pages
+COPY nextjs ./nextjs
+COPY theme ./theme
+COPY icons ./icons
+COPY mocks ./mocks
+COPY jest ./jest
+COPY playwright ./playwright
+COPY deploy ./deploy
+COPY public ./public
+COPY stubs ./stubs
+
+# Copy environment file
+COPY .env.production .env.local
+
+# Install dependencies
+RUN yarn install --frozen-lockfile --network-timeout 100000
+
+# Build the application
+RUN yarn build
+
+# Production stage
+FROM node:22.11.0-alpine AS runner
+
+RUN apk add --no-cache --upgrade bash curl jq unzip
+
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built application
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+
+# Set permissions
+RUN chown -R nextjs:nodejs /app
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV NODE_ENV=production
+
+CMD ["node", "server.js"]
@@ -2,11 +2,11 @@ version: '3.8'

 services:
  frontend:
-    build:
-      context: .
-      dockerfile: Dockerfile
+    image: ghcr.io/blockscout/frontend:latest
    container_name: lux-explorer-frontend
    restart: unless-stopped
+    ports:
+      - "3100:3000"
    environment:
      # Network configuration
      NEXT_PUBLIC_NETWORK_NAME: LUX Network
@@ -17,11 +17,11 @@ services:
      NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: 18
      
      # Branding
-      NEXT_PUBLIC_NETWORK_LOGO: https://docs.lux.network/img/lux-logo-white.png
-      NEXT_PUBLIC_NETWORK_LOGO_DARK: https://docs.lux.network/img/lux-logo-white.png
-      NEXT_PUBLIC_NETWORK_ICON: https://docs.lux.network/img/lux-logo-white.png
-      NEXT_PUBLIC_NETWORK_ICON_DARK: https://docs.lux.network/img/lux-logo-white.png
-      NEXT_PUBLIC_OG_IMAGE_URL: https://docs.lux.network/img/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_LOGO: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_LOGO_DARK: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_ICON: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_ICON_DARK: /logos/lux-logo-white.png
+      NEXT_PUBLIC_OG_IMAGE_URL: /logos/lux-logo-white.png
      
      # Font configuration
      NEXT_PUBLIC_FONT_FAMILY_HEADING: '{"name": "Inter", "url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"}'
@@ -39,7 +39,11 @@ services:
      NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL: wss
      
      # Network dropdown (all LUX ecosystem networks)
-      NEXT_PUBLIC_FEATURED_NETWORKS: /networks.json
+      NEXT_PUBLIC_FEATURED_NETWORKS: '[]'
+      
+      # App host
+      NEXT_PUBLIC_APP_HOST: explore.lux.network
+      NEXT_PUBLIC_APP_PROTOCOL: https
      
      # Other configurations
      NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: 'true'
@@ -60,8 +64,7 @@ services:
      - "traefik.http.services.lux-explorer.loadbalancer.server.port=3000"
      - "traefik.docker.network=hanzo-network"
    volumes:
-      - ./public/networks.json:/app/public/networks.json:ro
-      - ./public/favicon.ico:/app/public/favicon.ico:ro
+      - /home/z/logos:/app/public/logos:ro

 networks:
  hanzo-network:
@@ -0,0 +1,55 @@
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: ghcr.io/luxfi/explore:lux-custom
+    container_name: explore-lux
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    environment:
+      # Network Configuration
+      NEXT_PUBLIC_NETWORK_NAME: LUX Network
+      NEXT_PUBLIC_NETWORK_SHORT_NAME: LUX
+      NEXT_PUBLIC_NETWORK_ID: 96369
+      NEXT_PUBLIC_NETWORK_CURRENCY_NAME: LUX
+      NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: LUX
+      NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: 18
+      
+      # API Configuration
+      NEXT_PUBLIC_API_HOST: api-explore.lux.network
+      NEXT_PUBLIC_API_PROTOCOL: https
+      NEXT_PUBLIC_API_BASE_PATH: /
+      NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL: wss
+      
+      # App Configuration
+      NEXT_PUBLIC_APP_HOST: explore.lux.network
+      NEXT_PUBLIC_APP_PROTOCOL: https
+      NEXT_PUBLIC_IS_TESTNET: false
+      
+      # Branding
+      NEXT_PUBLIC_NETWORK_LOGO: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_LOGO_DARK: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_ICON: /logos/lux-logo-white.png
+      NEXT_PUBLIC_NETWORK_ICON_DARK: /logos/lux-logo-white.png
+      NEXT_PUBLIC_OG_IMAGE_URL: /logos/lux-logo-white.png
+      
+      # Font Configuration
+      NEXT_PUBLIC_FONT_FAMILY_HEADING: '{"name":"Inter","url":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"}'
+      NEXT_PUBLIC_FONT_FAMILY_BODY: '{"name":"Inter","url":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"}'
+      
+      # Theme
+      NEXT_PUBLIC_COLOR_THEME_DEFAULT: dark
+      
+      # Features
+      NEXT_PUBLIC_HOMEPAGE_CHARTS: '["daily_txs", "coin_price", "market_cap"]'
+      NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: 'true'
+      
+      # Stats
+      NEXT_PUBLIC_STATS_API_HOST: https://api-explore.lux.network/api/stats
+      NEXT_PUBLIC_VISUALIZE_API_HOST: https://api-explore.lux.network/api/visualize
+      NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://api-explore.lux.network
+      NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://api-explore.lux.network
@@ -0,0 +1,51 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.BUNDLE_ANALYZER === 'true',
+});
+
+const withRoutes = require('nextjs-routes/config')({
+  outDir: 'nextjs',
+});
+
+const headers = require('./nextjs/headers');
+const redirects = require('./nextjs/redirects');
+const rewrites = require('./nextjs/rewrites');
+
+/** @type {import('next').NextConfig} */
+const moduleExports = {
+  transpilePackages: [
+    'react-syntax-highlighter',
+    'swagger-client',
+    'swagger-ui-react',
+  ],
+  reactStrictMode: true,
+  webpack(config) {
+    config.module.rules.push(
+      {
+        test: /\.svg$/,
+        use: [ '@svgr/webpack' ],
+      },
+    );
+    config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+
+    return config;
+  },
+  // NOTE: all config functions should be static and not depend on any environment variables
+  // since all variables will be passed to the app only at runtime and there is now way to change Next.js config at this time
+  // if you are stuck and strongly believe what you need some sort of flexibility here please fill free to join the discussion
+  // https://github.com/blockscout/frontend/discussions/167
+  rewrites,
+  redirects,
+  headers,
+  output: 'standalone',
+  productionBrowserSourceMaps: true,
+  serverExternalPackages: ["@opentelemetry/sdk-node", "@opentelemetry/auto-instrumentations-node"],
+  experimental: {
+    staleTimes: {
+      dynamic: 30,
+      'static': 180,
+    },
+  },
+};
+
+module.exports = withBundleAnalyzer(withRoutes(moduleExports));
@@ -1,98 +1 @@
-[
-  {
-    "name": "LUX Mainnet",
-    "shortName": "LUX",
-    "id": 96369,
-    "currencyName": "LUX",
-    "currencySymbol": "LUX",
-    "currencyDecimals": 18,
-    "baseUrl": "https://explore.lux.network",
-    "group": "Mainnet",
-    "icon": "https://lux.network/images/6334ed6d2918e27358af1001_lux-logo-upside-down-triangle-p-800_1-p-500.png",
-    "isTestnet": false
-  },
-  {
-    "name": "LUX Testnet",
-    "shortName": "LUX",
-    "id": 96368,
-    "currencyName": "LUX",
-    "currencySymbol": "LUX",
-    "currencyDecimals": 18,
-    "baseUrl": "https://testnet.explore.lux.network",
-    "group": "Testnet",
-    "icon": "https://lux.network/images/6334ed6d2918e27358af1001_lux-logo-upside-down-triangle-p-800_1-p-500.png",
-    "isTestnet": true
-  },
-  {
-    "name": "ZOO Mainnet",
-    "shortName": "ZOO",
-    "id": 200200,
-    "currencyName": "ZOO",
-    "currencySymbol": "ZOO",
-    "currencyDecimals": 18,
-    "baseUrl": "https://explore.zoo.network",
-    "group": "Mainnet",
-    "icon": "https://zoo.network/logo.png",
-    "isTestnet": false
-  },
-  {
-    "name": "ZOO Testnet",
-    "shortName": "ZOO",
-    "id": 200201,
-    "currencyName": "ZOO",
-    "currencySymbol": "ZOO",
-    "currencyDecimals": 18,
-    "baseUrl": "https://testnet.explore.zoo.network",
-    "group": "Testnet",
-    "icon": "https://zoo.network/logo.png",
-    "isTestnet": true
-  },
-  {
-    "name": "SPC Mainnet",
-    "shortName": "SPC",
-    "id": 36911,
-    "currencyName": "SPC",
-    "currencySymbol": "SPC",
-    "currencyDecimals": 18,
-    "baseUrl": "https://explore.spc.network",
-    "group": "Mainnet",
-    "icon": "https://spc.network/logo.png",
-    "isTestnet": false
-  },
-  {
-    "name": "SPC Testnet",
-    "shortName": "SPC",
-    "id": 36912,
-    "currencyName": "SPC",
-    "currencySymbol": "SPC",
-    "currencyDecimals": 18,
-    "baseUrl": "https://testnet.explore.spc.network",
-    "group": "Testnet",
-    "icon": "https://spc.network/logo.png",
-    "isTestnet": true
-  },
-  {
-    "name": "Hanzo Mainnet",
-    "shortName": "HANZO",
-    "id": 36963,
-    "currencyName": "HANZO",
-    "currencySymbol": "HANZO",
-    "currencyDecimals": 18,
-    "baseUrl": "https://explore.hanzo.network",
-    "group": "Mainnet",
-    "icon": "https://hanzo.network/logo.png",
-    "isTestnet": false
-  },
-  {
-    "name": "Hanzo Testnet",
-    "shortName": "HANZO",
-    "id": 36962,
-    "currencyName": "HANZO",
-    "currencySymbol": "HANZO",
-    "currencyDecimals": 18,
-    "baseUrl": "https://testnet.explore.hanzo.network",
-    "group": "Testnet",
-    "icon": "https://hanzo.network/logo.png",
-    "isTestnet": true
-  }
-]
+[]
@@ -1,126 +1,35 @@
+import luxColors from './lux-colors';
+
+// Monochromatic grayscale palette
+const gray = {
+  '50': { value: '#FAFAFA' },
+  '100': { value: '#F5F5F5' },
+  '200': { value: '#E5E5E5' },
+  '300': { value: '#D4D4D4' },
+  '400': { value: '#A3A3A3' },
+  '500': { value: '#737373' },
+  '600': { value: '#525252' },
+  '700': { value: '#404040' },
+  '800': { value: '#262626' },
+  '900': { value: '#171717' },
+};
+
 const colors = {
-  green: {
-    '50': { value: '#F0FFF4' },
-    '100': { value: '#C6F6D5' },
-    '200': { value: '#9AE6B4' },
-    '300': { value: '#68D391' },
-    '400': { value: '#48BB78' },
-    '500': { value: '#38A169' },
-    '600': { value: '#25855A' },
-    '700': { value: '#276749' },
-    '800': { value: '#22543D' },
-    '900': { value: '#1C4532' },
-  },
-  blue: {
-    '50': { value: '#EBF8FF' },
-    '100': { value: '#BEE3F8' },
-    '200': { value: '#90CDF4' },
-    '300': { value: '#63B3ED' },
-    '400': { value: '#4299E1' },
-    '500': { value: '#3182CE' },
-    '600': { value: '#2B6CB0' },
-    '700': { value: '#2C5282' },
-    '800': { value: '#2A4365' },
-    '900': { value: '#1A365D' },
-  },
-  red: {
-    '50': { value: '#FFF5F5' },
-    '100': { value: '#FED7D7' },
-    '200': { value: '#FEB2B2' },
-    '300': { value: '#FC8181' },
-    '400': { value: '#F56565' },
-    '500': { value: '#E53E3E' },
-    '600': { value: '#C53030' },
-    '700': { value: '#9B2C2C' },
-    '800': { value: '#822727' },
-    '900': { value: '#63171B' },
-  },
-  orange: {
-    '50': { value: '#FFFAF0' },
-    '100': { value: '#FEEBCB' },
-    '200': { value: '#FBD38D' },
-    '300': { value: '#F6AD55' },
-    '400': { value: '#ED8936' },
-    '500': { value: '#DD6B20' },
-    '600': { value: '#C05621' },
-    '700': { value: '#9C4221' },
-    '800': { value: '#7B341E' },
-    '900': { value: '#652B19' },
-  },
-  yellow: {
-    '50': { value: '#FFFFF0' },
-    '100': { value: '#FEFCBF' },
-    '200': { value: '#FAF089' },
-    '300': { value: '#F6E05E' },
-    '400': { value: '#ECC94B' },
-    '500': { value: '#D69E2E' },
-    '600': { value: '#B7791F' },
-    '700': { value: '#975A16' },
-    '800': { value: '#744210' },
-    '900': { value: '#5F370E' },
-  },
-  gray: {
-    '50': { value: '#F7FAFC' },
-    '100': { value: '#EDF2F7' },
-    '200': { value: '#E2E8F0' },
-    '300': { value: '#CBD5E0' },
-    '400': { value: '#A0AEC0' },
-    '500': { value: '#718096' },
-    '600': { value: '#4A5568' },
-    '700': { value: '#2D3748' },
-    '800': { value: '#1A202C' },
-    '900': { value: '#171923' },
-  },
-  teal: {
-    '50': { value: '#E6FFFA' },
-    '100': { value: '#B2F5EA' },
-    '200': { value: '#81E6D9' },
-    '300': { value: '#4FD1C5' },
-    '400': { value: '#38B2AC' },
-    '500': { value: '#319795' },
-    '600': { value: '#2C7A7B' },
-    '700': { value: '#285E61' },
-    '800': { value: '#234E52' },
-    '900': { value: '#1D4044' },
-  },
-  cyan: {
-    '50': { value: '#EDFDFD' },
-    '100': { value: '#C4F1F9' },
-    '200': { value: '#9DECF9' },
-    '300': { value: '#76E4F7' },
-    '400': { value: '#0BC5EA' },
-    '500': { value: '#00B5D8' },
-    '600': { value: '#00A3C4' },
-    '700': { value: '#0987A0' },
-    '800': { value: '#086F83' },
-    '900': { value: '#065666' },
-  },
-  purple: {
-    '50': { value: '#FAF5FF' },
-    '100': { value: '#E9D8FD' },
-    '200': { value: '#D6BCFA' },
-    '300': { value: '#B794F4' },
-    '400': { value: '#9F7AEA' },
-    '500': { value: '#805AD5' },
-    '600': { value: '#6B46C1' },
-    '700': { value: '#553C9A' },
-    '800': { value: '#44337A' },
-    '900': { value: '#322659' },
-  },
-  pink: {
-    '50': { value: '#FFF5F7' },
-    '100': { value: '#FED7E2' },
-    '200': { value: '#FBB6CE' },
-    '300': { value: '#F687B3' },
-    '400': { value: '#ED64A6' },
-    '500': { value: '#D53F8C' },
-    '600': { value: '#B83280' },
-    '700': { value: '#97266D' },
-    '800': { value: '#702459' },
-    '900': { value: '#521B41' },
-  },
-  black: { value: '#101112' },
+  // Use gray for all color scales
+  green: gray,
+  blue: gray,
+  red: gray,
+  orange: gray,
+  yellow: gray,
+  teal: gray,
+  cyan: gray,
+  purple: gray,
+  pink: gray,
+  
+  // Pure black and white
+  black: { value: '#000000' },
  white: { value: '#ffffff' },
+  
  whiteAlpha: {
    '50': { value: 'RGBA(255, 255, 255, 0.04)' },
    '100': { value: 'RGBA(255, 255, 255, 0.06)' },
@@ -133,30 +42,35 @@ const colors = {
    '800': { value: 'RGBA(255, 255, 255, 0.80)' },
    '900': { value: 'RGBA(255, 255, 255, 0.92)' },
  },
+  
  blackAlpha: {
-    '50': { value: 'RGBA(16, 17, 18, 0.04)' },
-    '100': { value: 'RGBA(16, 17, 18, 0.06)' },
-    '200': { value: 'RGBA(16, 17, 18, 0.08)' },
-    '300': { value: 'RGBA(16, 17, 18, 0.16)' },
-    '400': { value: 'RGBA(16, 17, 18, 0.24)' },
-    '500': { value: 'RGBA(16, 17, 18, 0.36)' },
-    '600': { value: 'RGBA(16, 17, 18, 0.48)' },
-    '700': { value: 'RGBA(16, 17, 18, 0.64)' },
-    '800': { value: 'RGBA(16, 17, 18, 0.80)' },
-    '900': { value: 'RGBA(16, 17, 18, 0.92)' },
+    '50': { value: 'RGBA(0, 0, 0, 0.04)' },
+    '100': { value: 'RGBA(0, 0, 0, 0.06)' },
+    '200': { value: 'RGBA(0, 0, 0, 0.08)' },
+    '300': { value: 'RGBA(0, 0, 0, 0.16)' },
+    '400': { value: 'RGBA(0, 0, 0, 0.24)' },
+    '500': { value: 'RGBA(0, 0, 0, 0.36)' },
+    '600': { value: 'RGBA(0, 0, 0, 0.48)' },
+    '700': { value: 'RGBA(0, 0, 0, 0.64)' },
+    '800': { value: 'RGBA(0, 0, 0, 0.80)' },
+    '900': { value: 'RGBA(0, 0, 0, 0.92)' },
  },
-  // BRAND COLORS
-  github: { value: '#171923' },
-  telegram: { value: '#2775CA' },
-  linkedin: { value: '#1564BA' },
-  discord: { value: '#9747FF' },
-  slack: { value: '#1BA27A' },
+  
+  // Grayscale brand colors
+  github: { value: '#171717' },
+  telegram: { value: '#525252' },
+  linkedin: { value: '#404040' },
+  discord: { value: '#737373' },
+  slack: { value: '#525252' },
  twitter: { value: '#000000' },
-  opensea: { value: '#2081E2' },
-  facebook: { value: '#4460A0' },
-  medium: { value: '#231F20' },
-  reddit: { value: '#FF4500' },
-  celo: { value: '#FCFF52' },
+  opensea: { value: '#404040' },
+  facebook: { value: '#525252' },
+  medium: { value: '#171717' },
+  reddit: { value: '#737373' },
+  celo: { value: '#F5F5F5' },
+  
+  // Include LUX specific colors
+  ...luxColors.colors,
 };

-export default colors;
+export default colors;
@@ -1,38 +1,44 @@
 export default {
  colors: {
+    // Pure black background
    level: 'hsl(0 0% 0%)',
    level0: 'hsl(0 0% 0%)',
-    level1: 'hsl(0 0% 12%)',
-    level2: 'hsl(0 0% 18%)',
-    level3: 'hsl(0 0% 25%)',
+    level1: 'hsl(0 0% 5%)',
+    level2: 'hsl(0 0% 10%)',
+    level3: 'hsl(0 0% 15%)',

-    muted: 'hsl(0 0% 70%)',
-    muted1: 'hsl(0 0% 70%)',
-    muted2: 'hsl(0 0% 55%)',
-    muted3: 'hsl(0 0% 40%)',
-    muted4: 'hsl(0 0% 25%)',
+    // Grey shades for muted elements
+    muted: 'hsl(0 0% 60%)',
+    muted1: 'hsl(0 0% 60%)',
+    muted2: 'hsl(0 0% 45%)',
+    muted3: 'hsl(0 0% 30%)',
+    muted4: 'hsl(0 0% 20%)',

+    // Pure black background, white accent and foreground
    background: 'hsl(0 0% 0%)',
    accent: 'hsl(0 0% 100%)',
-    foreground: 'hsl(0, 0%, 97%)',
+    foreground: 'hsl(0 0% 100%)',

+    // Primary: white background, black text (for buttons)
    primary: {
      main: 'hsl(0 0% 100%)',
-      hover: 'hsla(0, 0%, 100%, 0.85)',
+      hover: 'hsl(0 0% 90%)',
      fg: 'hsl(0 0% 0%)',
    },

+    // Secondary: desaturated greys
    secondary: {
-      main: 'hsl(250, 5%, 53%)',
-      hover: 'hsl(254, 7%, 62%)',
+      main: 'hsl(0 0% 30%)',
+      hover: 'hsl(0 0% 40%)',
      fg: 'hsl(0 0% 100%)',
-      '1': 'hsl(254, 7%, 62%)',
-      '2': 'hsl(254, 7%, 62%)',
-      '3': 'hsl(262, 7%, 82%)',
+      '1': 'hsl(0 0% 40%)',
+      '2': 'hsl(0 0% 50%)',
+      '3': 'hsl(0 0% 60%)',
    },

+    // Navigation: grey to white on hover
    nav: {
-      main: 'hsl(0 0% 70%)', // was 40% in lux
+      main: 'hsl(0 0% 60%)',
      hover: 'hsl(0 0% 100%)',
      current: 'hsl(0 0% 100%)',
    },
@@ -4,8 +4,8 @@ import type { ExcludeUndefined } from 'types/utils';

 import config from 'configs/app';

-export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter, InterFallback';
-export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Poppins';
+export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
+export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Inter';

 export const fonts: ExcludeUndefined<ThemingConfig['tokens']>['fonts'] = {
  heading: { value: `${ HEADING_TYPEFACE }, sans-serif` },