devlove
Sign inJoin

Design system

Every component we use. New components are designed here first, then used in the app.

Colours & type

Colour tokens

Gold, green and red come from Myanmar's flag colours. Always use tokens (bg-primary), never raw hex.

src/app/globals.css

background

card

muted

secondary

accent

primary (gold)

success (green)

live (red)

destructive

foreground

Typography

Geist for Latin, Noto Sans Myanmar picks up Myanmar script automatically.

Geist + Noto Sans Myanmar (layout.tsx)

Build together

Page title

Section heading

Body text. Hackathons and events for everyone from Myanmar.

Muted helper text

Mono — 12.5 avg

မြန်မာ တည်ဆောက်သူများ ပူးပေါင်းတည်ဆောက်ရာ

Hero background (proposed, awaiting approval)

Sunrise over Myanmar pagodas in the gold palette. Meant for the landing hero with a dark gradient over the lower half so text stays readable. Not used in the app yet.

public/art/hero-bg.png (source: hero-bg.pen, made with pentool)
Sunrise over pagodas and hills

Where Myanmar's builders build together

Logo

A code chevron inside a heart: dev + love. Gold tile with a dark heart. Used in the navbar and as the browser icon.

public/logo.svg, src/app/icon.svg (source: public/art/logo.pen, made with pentool)
devlove logodevlove

Pattern

Faint kalaga-style lattice for hero and section bands.

.bg-pattern in globals.css
.bg-pattern

Buttons & badges

Button

One primary action per view. Links styled as buttons use buttonVariants().

components/ui/button.tsx
Link as button

Badge

Status and category labels. Gold = live/active, outline = type, lock = secret.

components/ui/badge.tsx
liveupcominghackathonbanned secret

Cards

FeatureShowcase

Landing page features: one big section per feature, copy + live visual, alternating sides.

components/feature-showcase.tsx
Events

Your community, your events

Host public events, or keep them invite-only for your own community, school or team.

  • Public or secret (invite link only)
  • Hackathon, meetup, workshop or conference
  • Drafts save automatically
People

Profiles & teams

Show your skills and find teammates in every city, state and region, and across the diaspora.

  • Skills, links and location on your profile
  • Find teammates by skill
  • Join or form a team per event
Projects

Projects

Keep a portfolio of what you build and reuse it across submissions.

  • One portfolio, many submissions
  • Tags, demo and repo links
  • Edit once, update everywhere
Judging

Fair judging

Add judges, score submissions 1-10 and publish a leaderboard when it's over.

  • Invite judges per event
  • Scores 1-10, hidden until published
  • Public leaderboard
  1. 1Rice Price Tracker9.2
  2. 2Township Map8.7
  3. 3Shan Tea Market8.1

ProjectCard

Projects in lists and the portfolio.

components/cards.tsx

Card (base)

Generic container for stats and panels.

components/ui/card.tsx
Registrations
Last 7 days

128

Forms

Field / Area / NativeSelect

Labelled inputs used inside ActionForm (server actions, error line, toast on success).

components/action-form.tsx

Shown in Myanmar time and yours

DraftSaver

Drops into a form and autosaves to the server. Shows its status line; see /events/new.

components/draft-saver.tsx

Draft saved. Discard draft

People

UserChip

Avatar and name that links to a profile.

components/cards.tsx

Avatar

Image with an initials fallback.

components/ui/avatar.tsx
AACAC

Overlays & tabs

Dialog

Confirmations and small forms.

components/ui/dialog.tsx

Tabs

Switch between related views on one page.

components/ui/tabs.tsx
About content

Layout & states

PageHeader

Title, optional description and right-aligned actions at the top of every page.

components/cards.tsx

Portfolio

Everything you've built, in one place.

LegalDoc

Privacy policy and terms pages: title, last updated, intro and headed sections. Used at /privacy and /terms.

components/legal-doc.tsx (text in lib/legal.ts)

Privacy Policy

Last updated November 11, 2026

Short intro paragraph.

What we collect

First paragraph.

Second paragraph.

Empty state

Dashed box, one sentence, one action.

pattern (see /portfolio)

You haven't built anything here yet.

Skeleton & Separator

Loading placeholders and dividers.

components/ui/skeleton.tsx, separator.tsx

Content below the divider