TUM Blockchain Hackathon

Overview

The TUM Blockchain Hackathon is an in-person build event in Munich, hosted by TUM Blockchain Club inside the TBC 26 programme. The identity uses a stark black canvas, a dotted red field and a hand-drawn red 'Hackathon' script over a heavy geometric wordmark, reading as a technical, slightly rebellious builder culture rather than a corporate conference. The movement is best described as Dark Technical Editorial: high contrast, pixel-grid display type and a single hot accent that does all the emotional work.

Tone is direct and factual, favouring dates, places and prize amounts (for example "October 30 – 31, 2026" and "€12,000+") over adjectives. Copy is short, imperative in CTAs ("Apply", "View Prizes") and inviting in partner messaging. Example sentence: "Two days, one House of Communication, and a build window you can actually use."

Colors

Primary (#f44336) is the signature accent: it fills the hero "Apply" CTA, the handwritten "Hackathon" wordmark and the dotted hero field, and it is the only colour a user should read as clickable. Use #cf362d (primary-container) for pressed or hover states of primary surfaces. Secondary (#ffc110) is reserved for highlights such as prize callouts and badges, never for buttons. Secondary-container (#6f3de2) supports gradient glows at very low opacity (#6f3de20d to #6f3de20f) behind sections.

Surfaces stay pure black (#000000) for the page and near-black (#0a0a0c, #11100d) for raised panels. Glass chrome uses rgba(255,255,255,0.08) fills and rgba(255,255,255,0.15) borders. Tertiary (#e9d5ff) and tertiary-container (#ffccd3) are soft pastels reserved for small informational pills; avoid them

Typography

Montserrat is the single family for the entire system, loaded as a variable font (weight 100–900) with a metric-matched Arial fallback at 110.19% size-adjust to limit layout shift. Hierarchy comes from weight and tracking rather than family change: headlines run at weight 900 with -0.025em tracking, body at 400 and labels at 600. Apply letter-spacing: -0.9px to h2 headings at 36px/40px so long display lines stay tight. Small uppercase-style labels at 12px/16px should use letter-spacing: 0.05em to keep them legible on the dotted background.

Layout

Layout is a fluid full-bleed hero with a fixed content column of 860px (lg:w-[860px]) for the floating header and centred hero card. Below 1024px the column becomes fluid with 24px side margins. Use lg spacing (20px) between related blocks and xl spacing (24px) to separate sections, keeping the 4-column grid for schedule and prize cards. Whitespace is generous around the hero composition; the dotted shader fills the viewport edge to edge.

Elevation & Depth

Depth is conveyed by blur and layered translucency rather than colour shifts. Level 1 is the black page with the dotted red shader masked to fade out toward the bottom (mask gradient 0% to 100%, brightness(5)). Level 2 is the floating header: background rgba(0,0,0,0.58), backdrop-filter blur(24px) on sm+, border 1px rgba(255,255,255,0.15), box-shadow 0 18px 80px rgba(0,0,0,0.38). Level 3 is the hero info card and modal-like panels with box-shadow 0 28px 90px rgba(0,0,0,0.38) on a rgba(0,0,0,1) fill.

Shapes

Shape language is Soft-Technical: pill-shaped navigation (border-radius 9999px) contrasts with moderately rounded cards and buttons. Buttons and the Apply CTA use a 20px radius (lg), feature cards use 24px (xl), inputs and list rows use 18px (DEFAULT/md), and small chips use 16px (sm). The pill header signals that the navigation floats above the event content rather than sitting in a rigid bar.

Components

Action Elements Primary buttons are solid #f44336 with white 14px/20px label at weight 600, height 48px, horizontal padding 24px, radius 20px. Hover shifts the fill to #cf362d over 300ms ease. Secondary buttons use rgba(255,255,255,0.08) with a 1px rgba(255,255,255,0.15) border and transition to rgba(255,255,255,0.14) on hover in 300ms.

Containers & Surfaces Feature cards sit on rgba(255,255,255,0.08) with 24px radius and 20px padding, lifting to rgba(255,255,255,0.14) on hover. The hero info card is opaque black with a 1px rgba(255,255,255,0.15) border and the large shadow defined above.

Inputs & Interaction Navigation links animate with a 300ms ease-out vertical slide (translateY(-50%)) revealing a duplicated white label. Focus rings use a 2px outline offset by 2–4px in the

Do's and Don'ts

**Do**

• Use #f44336 only on interactive elements and the signature wordmark accent so it keeps its click-signal meaning.
• Keep the page on pure #000000 and build hierarchy with translucent white fills at 0.08 and 0.14 opacity.
• Set headings at weight 900 with -0.025em tracking and body at weight 400 for consistent Montserrat rhythm.
• Place the floating pill header 16–20px from the viewport top and use backdrop-filter blur(24px) for legibility over the shader.

**Don't**

• Don't use the yellow #ffc110 secondary on buttons; reserve it for prize and status highlights.
• Don't introduce additional font families; Montserrat carries every level of the hierarchy.
• Don't add drop shadows to flat cards on the black canvas; rely on translucency and the 1px white/15 border.
• Don't exceed the 860px content column on desktop, since the header and hero are built around that width.