Better In Ui Taste

Rules:

• Always use token names in Tailwind: text-[var(--color-text)] or map tokens to Tailwind utilities via @theme.
• Never hardcode hex values in component files.
• Brand blue #2563EB is the only accent color. No secondary accent.

2. Typography

Font: Geist Sans (primary), Geist Mono (metrics, code, timestamps).

/* src/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;
}

Type Scale

Rules:

• Body text is 15px, NOT 14px (14px feels cramped on a professional tool).
• Name + headline text is always 500 weight, never bold (bold feels aggressive).
• Timestamps, connection count, reaction counts → --font-mono at --text-xs.
• No text below 11px. No text above 28px except marketing pages.

3. Layout

App Shell (3-column desktop, 1-column mobile)

Desktop (≥1024px):
┌──────────────────────────────────────────────────────────┐
│ TopNav (h-14, sticky)                                    │
├──────────┬───────────────────────────┬───────────────────┤
│ Sidebar  │  Main (flex-1, max-w-2xl) │  Right (w-80)     │
│ w-60     │  px-4 py-6                │  hidden <1280px   │
│ sticky   │                           │  sticky           │
│ top-14   │                           │  top-14           │
└──────────┴───────────────────────────┴───────────────────┘

Mobile (<768px):
┌──────────────────┐
│ TopNav (h-14)    │
├──────────────────┤
│ Main (full width)│
│ px-4 py-4        │
├──────────────────┤
│ BottomNav (h-16) │
└──────────────────┘

// AppShell.tsx pattern
<div className="min-h-screen bg-[var(--color-bg)]">
  <TopNav />
  <div className="mx-auto max-w-screen-xl px-4">
    <div className="flex gap-6 pt-14"> {/* pt = topnav height */}
      <Sidebar className="hidden lg:block w-60 shrink-0 sticky top-14 h-[calc(100vh-3.5rem)]" />
      <main className="flex-1 min-w-0 max-w-2xl py-6">{children}</main>
      <aside className="hidden xl:block w-80 shrink-0 sticky top-14 h-[calc(100vh-3.5rem)] py-6">{rightPanel}</aside>
    </div>
  </div>
  <BottomNav className="lg:hidden" />
</div>

Spacing Scale

Use Tailwind's 4px-base scale. Key values:

• 2 (8px) — tight: icon padding, badge padding
• 3 (12px) — compact: list item padding
• 4 (16px) — default: card padding, section gaps
• 6 (24px) — comfortable: section spacing
• 8 (32px) — loose: page-level separation

4. Cards

All feed items, job listings, profile summaries, and conversation previews use the Card primitive.

Anatomy

┌─ card ─────────────────────────────────────────────────┐
│  bg-white dark:bg-[--color-bg-secondary]                │
│  border border-[--color-border]                         │
│  rounded-xl                                             │
│  p-4 or p-5                                             │
│  hover:shadow-sm transition-shadow                      │
│                                                         │
│  ┌─ card-header ──────────────────────────────────────┐ │
│  │  [Avatar 40px]  [Name 500]  ·  [Timestamp mono]   │ │
│  │                 [Headline secondary]               │ │
│  └────────────────────────────────────────────────────┘ │
│                                                         │
│  ┌─ card-body ────────────────────────────────────────┐ │
│  │  Post content, 15px, line-clamp-5 by default      │ │
│  └────────────────────────────────────────────────────┘ │
│                                                         │
│  ┌─ card-actions ─────────────────────────────────────┐ │
│  │  [👍 Like]  [💬 Comment]  [↗ Share]               │ │
│  │  text-sm text-[--color-text-secondary]             │ │
│  └────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘

Rules:

• rounded-xl on all cards (12px radius). Never rounded-lg (too small) or rounded-2xl (too bubbly).
• No drop shadow on cards in rest state. shadow-sm on hover only.
• No card within card (no nested cards).
• Dividers between card sections use divide-y divide-[--color-border].

Job Card (additional fields)

┌─ job card ──────────────────────────────────────────────┐
│  [Company logo 48px]  Title (600 weight)                │
│                       Company · Location · Remote badge │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  💰 $120k – $160k  (emerald, --font-mono, always shown) │
│  📅 Posted 2 days ago · Expires in 28 days              │
│  [Apply]  [Save]                                        │
└─────────────────────────────────────────────────────────┘

Salary is always text-[var(--color-salary)] in --font-mono. Never hidden. If somehow missing, show "Salary not disclosed" in --color-error.

5. Avatars

// Three sizes only
<Avatar size="sm" />   // 32px — comment threads, compact lists
<Avatar size="md" />   // 40px — feed cards, nav
<Avatar size="lg" />   // 96px — profile page header

// Always with initials fallback:
// bg-[--color-brand-subtle] text-[--color-brand] font-medium

Rules:

• Always rounded-full.
• Always provide alt text: "Avatar for {name}".
• On error, show initials (first + last name initial), never broken image icon.
• Online indicator: 8px green dot, absolute bottom-right, ring-2 ring-white dark:ring-[--color-bg].

6. Interactive Elements

Buttons

// Primary — brand blue, white text
<Button variant="primary">Connect</Button>
// bg-[--color-brand] text-white hover:bg-[--color-brand-hover]
// px-4 py-2 rounded-lg font-medium text-sm

// Secondary — border, transparent bg
<Button variant="secondary">Message</Button>
// border border-[--color-brand] text-[--color-brand] bg-transparent
// hover:bg-[--color-brand-subtle]

// Ghost — no border, text only
<Button variant="ghost">View profile</Button>
// text-[--color-text-secondary] hover:bg-[--color-bg-tertiary]

// Destructive
<Button variant="destructive">Disconnect</Button>
// bg-[--color-error] text-white hover:bg-red-700

All buttons: transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-brand]

Input / Textarea

/* Base input styles */
border border-[--color-border]
bg-[--color-bg]
rounded-lg
px-3 py-2
text-base              /* 15px */
text-[--color-text]