Aalto University Brand

Overview

Aalto University's brand system embodies Institutional Clarity—a design philosophy that merges Swiss grid rigor with vibrant academic identity. The system serves researchers, students, faculty, and administrators across six schools, each with a distinct color signature (Engineering magenta, Electronics purple, Chemistry green, Arts gold, Business lime, Science orange) layered atop a neutral foundation of black, white, and grays. The aesthetic is contemporary minimalist with institutional authority: clean typography in Inter, generous whitespace, and modular card-based layouts that scale from mobile to desktop. The UI evokes precision, accessibility, and collaborative energy—never playful, never corporate-sterile, always purposeful.

Voice: Direct, inclusive, and evidence-based. Aalto speaks in active voice, avoids jargon unless necessary, and treats users as intelligent peers. Tone is warm but formal, encouraging exploration without condescension. Example sentence: "Explore our design system to build consistent, accessible experiences across Aalto's digital ecosystem."

Colors

The color system operates on two layers: a neutral foundation (white #ffffff, grays from #fafafa to #151515) and a vibrant accent layer. Primary red (#fd6360) anchors call-to-action buttons and key interactions, paired with secondary blue (#46a5ff) for secondary actions and tertiary yellow (#f7e159) for highlights. School-specific colors (Engineering #dc6ade, Electronics #a987ff, Chemistry #5dd089, Arts #ffc341, Business #9bd84c, Science #ff8d4f) are deployed in badges, category tags, and section headers to signal academic domain without overwhelming the interface. On-surface text is near-black (#151515) for 16px+ body copy; on-surface-variant (#505050) for secondary text and disabled states. Surfaces progress from white (#ffffff) through five container levels (#fafafa, #f2f2f2, #e0e0e0, #

Typography

The type system uses Inter exclusively for body and UI, with a 16px baseline for body-md (400 weight, 24px line-height). Display text (64px, 700 weight) anchors hero sections with -0.02em letter-spacing to maintain legibility at scale. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy with -0.01em and 0em letter-spacing respectively. Title-lg (20px, 600 weight) labels cards and sections. Body-lg (18px, 400 weight) is reserved for introductory paragraphs and callouts. Label-md (15px, 600 weight) and label-sm (12px, 500 weight) handle buttons, badges, and metadata. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on display text overlaid on photography to ensure contrast; never rely on color alone for readability over images.

Layout

The layout uses a 12-column grid with 24px gutters on desktop (1280px max-width), collapsing to 8 columns at tablet (768px) and 4 columns on mobile. Container padding is 24px on desktop, 16px on tablet, 12px on mobile. Section spacing follows the lg token (40px) between major sections, md token (24px) between subsections, and sm token (12px) between components. The hero section occupies 110vw height on root pages, creating an immersive entry point; content pages use a standard 64px top-navigation offset. Whitespace is generous: cards have 32px vertical padding, 24px horizontal padding; list items use 12px padding. The grid is fluid on mobile (no fixed breakpoints), scaling proportionally until tablet threshold (768px), then fixed-width at desktop. Never compress spacing below sm (12px) for

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not color darkening. Level 1 (Base): no shadow, white background (#ffffff). Level 2 (Cards, dropdowns): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), 1px border in #e0e0e0. Level 3 (Modals, elevated cards on hover): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), same border. Focus states add a 3px outline in primary red (#fd6360) with 5px blur radius. Disabled states reduce opacity to 0.5 and remove shadows entirely. Dropdown panels use Level 2 shadow with 4px top margin from trigger. Never stack shadows (e.g., no shadow on shadow); use a single,

Shapes

The shape philosophy is Geometric Minimalism: sharp corners (0px radius) for institutional authority, softened only where interaction demands it. Buttons use 0.5rem (8px) radius for subtle approachability without playfulness. Cards and input fields use 0.5rem radius for consistency. Badges and pills use 9999px (full) radius to signal secondary, non-critical information. Modals and dropdowns use 0.5rem radius. The rationale: sharp corners reinforce academic precision; minimal rounding avoids the 'friendly app' aesthetic that would undermine institutional credibility. Exceptions: focus rings use

Components

Action Elements Buttons come in three variants: primary (red #fd6360 background, white text, 0.5rem radius, 15px vertical / 24px horizontal padding, 48px height), secondary (light gray #f2f2f2 background, dark text, 1px outline in #666666), and tertiary (transparent, red text, 1px red border). All buttons use label-md typography (15px, 600 weight). Hover state transitions background-color and border-color over 150ms cubic-bezier(0.4, 0, 0.2, 1). Focus state adds a 3px outline in primary red with 5px blur. Disabled state reduces opacity to 0.5 and removes hover effects. Primary CTA buttons must never be disabled; use secondary variant if action is unavailable.

Containers & Surfaces Cards are white (#ffffff) with 1px border in #e0e0e0, 0.5rem radius, 32px vertical padding, 24px hori

Do's and Don'ts

**Do**

• Do use primary red (#fd6360) exclusively for interactive CTAs and focus states—never use secondary or tertiary colors for primary actions.
• Do maintain 24px gutters and 12px minimum component padding to ensure touch targets are at least 44px × 44px on mobile.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns; never use multiple stacked shadows.
• Do use school-specific colors (Engineering #dc6ade, Electronics #a987ff, Chemistry #5dd089, Arts #ffc341, Business #9bd84c, Science #ff8d4f) only in badges, category tags, and section headers—never as primary interactive colors.
• Do set line-height to 24px for 16px body text and 28px for 18px body-lg to ensure 1.5 ratio for readability.

**Don't**

• Don't use rounded corners larger than 1rem (16px) on buttons or cards; sharp corners reinforce institutional authority.
• Don't apply text-shadow or color overlays on body copy; reserve shadows for display text over photography only.
• Don't mix Inter with serif fonts in the same component; Besley is reserved for future display use, not current UI.
• Don't reduce spacing below 12px (sm token) between interactive elements; maintain minimum 44px touch targets.
• Don't use opacity-based disabled states without also removing hover effects and changing cursor to not-allowed.