Bila UiTM Cuti

Official UiTM schedule information is hard to use on a phone: static PDFs, portal pages, and sources that do not always agree. Bila UiTM Cuti started from that gap.

Academic calendar

• UiTM's academic calendar is published as PDFs or buried in portal pages — not mobile-friendly, not searchable, easy to misread.
• Students are split into Group A and Group B, each with a different calendar. Many check the wrong group and get the wrong cuti date.
• There was no single fast place to see registration, lectures, examinations, and semester breaks together.

Find My Internship

• Internship listings for Malaysian students sit across many company career pages and job portals — no single place to browse.
• Manually searching costs real hours every application season.
• There was no free aggregator on the same site students already used for cuti dates.

Two features share bilauitmcuti.com and one design system:

• The academic calendar — timelines for registration, lectures, examinations, and breaks in one student-focused app (about).
• Find My Internship — internship listings browsable at bilauitmcuti.com/internship.

The app is not affiliated with UiTM. Schedule answers are best-effort; students should confirm critical dates with official UiTM announcements.

Per the about page, the calendar is built for phones, tablets, and desktop with the same experience across views.

What students can use today:

• Grid and list views with activity filters
• Group A and Group B sessions
• Kedah, Kelantan, and Terengganu regional dates filters
• Countdown to the next activity
• Light and dark themes and PWA install
• AI chat (Cloudflare Workers AI, English and Malay) for dates, breaks, exams, and program context based on the selected program

Programs covered include Foundation/Professional, Pre-Diploma, Diploma, Diploma (Part-Time), Bachelor, Bachelor (Part-Time), Master, and PhD.

The assistant explains schedule context from the student's selected program. Answers may be incomplete or outdated — the product copy is explicit that critical dates must be verified with official UiTM sources.

Find My Internship lives at bilauitmcuti.com/internship — on the same domain as the calendar so students do not need a separate site or account.

The board surfaces internship openings gathered from job portals and company pages — duration, stipend range, and source shown per listing — so students can browse and load more in one place instead of opening dozens of tabs each application season.

The academic calendar and Find My Internship look and behave like one product because they share a single design system — the same semantic tokens, typography, components, and dark-mode treatment on bilauitmcuti.com and bilauitmcuti.com/internship.

That was intentional. Students should not feel a visual jump between the calendar grid and the internship board. The sections below document how that system works in production.

The stack below is what powers the calendar, internship board, and shared UI — one Tailwind + shadcn foundation.

The temptation early on is to hardcode light and dark shell colours in every layout file. It works until you want to nudge the dark-mode card colour and end up hunting through a dozen components.

Instead, every surface asks a role question, not a colour question: is this a card, a popover, or muted helper text? The colour is decided once, centrally, and each component declares what it is and inherits how that currently looks.

The system should know what something is before it knows what it looks like — that is what makes a full theme flip feel instant instead of patchy.

A lot of side projects add dark mode by inverting colors and calling it done. Here, light and dark are two completely, deliberately designed states — which is why the core palette uses OKLCH rather than plain hex. OKLCH describes color the way the eye perceives lightness, so a card that feels one step lighter than the background in light mode still feels like one consistent step in dark mode.

There is also a small but deliberate detail: before React even hydrates, the page already knows whether to paint white-on-dark-text or dark-on-white-text. Nobody should see a flash of the wrong theme — that flicker is a tiny trust violation, and trust is the whole product for a tool students rely on daily.

• Two modes only: light (default) and dark — enableSystem: false.
• Theme stored in localStorage key theme; class toggled on html.
• PWA theme-color follows shell pair (#ffffff light, #1a1a1a dark), synced by theme-toggle.tsx.
• @custom-variant dark (&:is(.dark *)); and standalone (@media (display-mode: standalone)) for PWA header tweaks.
• Transitions disabled globally on theme/color changes — instant switch.

The calendar grid uses four core colours — gray, purple, red, and green — chosen to be read in half a second, the way you glance at a traffic light.

Amber for school holidays and muted gray-violet for weekends required a hierarchy call — a weekend during exam week should still read as exam week first. Program badges use the same pattern at lower intensity: each program keeps a consistent hue so students can pattern-match before reading the label.

Surfaces stack: background, then card, then an elevated layer for chat bubbles and calendar overlays. The fix was naming the elevated dark surface instead of repeating the same hex in three places — a named token survives a redesign; a copy-pasted value does not.

Cards use the largest radius in daily UI; buttons and inputs sit one step smaller. The base radius is 10px and everything else scales from there.

Transitions are disabled globally on purpose. Theme and colour switches happen instantly — no fade, no cross-dissolve. The only places motion survives are small, functional moments:

• Hover opacity shift on controls
• Toggle sliding
• Chat header sliding in

Motion is a cost that has to earn its place. Typography follows the same logic — one scale, used consistently rather than ad hoc sizes per component.

Buttons, dialogs, badges, and tooltips run on shadcn/ui with a neutral base — Radix already solved accessibility and focus handling for overlays. What stays custom is everything that gives Bila UiTM Cuti its face across both the calendar and Find My Internship:

• The calendar colour language
• The type scale
• The elevated-surface treatment
• The pill-shaped badges

The admin internship views added chart series tokens so page views, unique visitors, and submission counts each keep a consistent colour identity — a glance should tell a story instead of requiring every number to be read individually. Buttons and badges stay on shadcn variants; focus and invalid states are checked against elevated surfaces as well as cards.