Style guide

UniTalkie Brand

This page reflects the live design system used across UniTalkie. All swatches, tokens, and components adapt automatically between light and dark mode — the same tokens power both the marketing site and the product app.

Colors

Semantic color tokens drawn from the radix-luma / olive theme. Use the token name (e.g. bg-primary, text-muted-foreground) — never raw oklch values or Tailwind palette classes.

Semantic tokens

primary--primaryoklch(0.508 0.118 165.612)≈ #007A55 · brand emerald
primary-foreground--primary-foregroundoklch(0.979 0.021 166.113)
secondary--secondaryoklch(0.967 0.001 286.375)
secondary-foreground--secondary-foregroundoklch(0.21 0.006 285.885)
muted--mutedoklch(0.966 0.005 106.5)
muted-foreground--muted-foregroundoklch(0.58 0.031 107.3)
accent--accentoklch(0.966 0.005 106.5)
accent-foreground--accent-foregroundoklch(0.228 0.013 107.4)
destructive--destructiveoklch(0.577 0.245 27.325)
background--backgroundoklch(1 0 0)
foreground--foregroundoklch(0.153 0.006 107.1)
card--cardoklch(1 0 0)
border--borderoklch(0.93 0.007 106.5)
ring--ringoklch(0.737 0.021 106.9)

Brand scale (charts)

chart-1--chart-1oklch(0.845 0.143 164.978)
chart-2--chart-2oklch(0.696 0.17 162.48)
chart-3--chart-3oklch(0.596 0.145 163.225)
chart-4--chart-4oklch(0.508 0.118 165.612)
chart-5--chart-5oklch(0.432 0.095 166.913)

Typography

Geist Sans for UI copy and headings; Geist Mono for code and data. Type scale follows a consistent sizing ramp.

Typefaces

Geist Sansfont-sans

The quick brown fox jumps over the lazy dog. 0123456789

Geist Monofont-mono

The quick brown fox jumps over the lazy dog. 0123456789

Type scale

UniTalkietext-5xl font-semibold tracking-tight
Academic communitytext-4xl font-semibold tracking-tight
Connect with peerstext-3xl font-semibold tracking-tight
Group conversationstext-2xl font-semibold
Direct messagestext-xl font-semibold
UniTalkie brings your university community together — DMs, group chats, events, and more.text-base
Join academic groups and stay updated on campus events.text-sm
Last active 2 minutes agotext-xs text-muted-foreground

Weights

Normal — UniTalkie connects studentsfont-normal
Medium — UniTalkie connects studentsfont-medium
Semibold — UniTalkie connects studentsfont-semibold
Bold — UniTalkie connects studentsfont-bold

Components

Core shadcn/ui primitives as configured in this project. All components consume semantic tokens and adapt to theme changes automatically.

Buttons — variants

Buttons — sizes

Badges

DefaultSecondaryOutlineDestructiveGhost

Form controls

Feedback

Progress (64%)
Skeleton
Loading…

Data display

SKAK
SKMHLO
+4
Academic Group
Computer Science — Year 3 study group
SKMHLO
24 members

Example blocks

Composed patterns built from the primitives above — feature cards, stat displays, form snippets, and notification layouts.

Group chats
Academic and custom groups, up to 100 members — @mentions, polls, and pinned messages keep everyone on the same page.
Up to 100 members
Active students
Last 30 days
2,400+18%
Across West Bank universities
Sign in
Access your UniTalkie account with your university email.
Presentational only — no data submitted
MH
Mariam Hassan2 min ago

Has anyone finished the algorithms homework yet?

3