RSMS

Overview

RSMS is the personal portfolio and design platform of Rasmus Andersson, a Swedish software designer and creator of the Inter typeface family. The brand embodies 'Architectural Minimalism'—a design philosophy that treats digital interfaces as precisely engineered structures, where every pixel serves a function and no element exists without purpose. The aesthetic is deliberately austere: a pure white canvas (rgb(255, 255, 255)) with black typography (rgb(0, 0, 0)) creates a print-like clarity, while a single vivid red accent (#ff5c00, a warm hot-orange) punctuates interactive moments and draws focus to calls-to-action. This restraint evokes intellectual rigor, craftsmanship, and the confidence of a designer who has mastered reduction. The emotional response is one of calm authority—the user feels they are in the hands of someone who understands systems deeply.

The brand voice is direct, precise, and conversational without being casual. Rasmus writes in short, declarative sentences that prioritize clarity over flourish: 'Software is the medium through which I express myself.' The vocabulary is technical yet accessible, avoiding jargon unless it serves the reader. Tone is confident but never arrogant; there is an underlying humility in how the work is presented. The brand personality is that of a craftsperson—someone equally comfortable discussing typeface metrics, compiler design, or the philosophy of simplicity. Example sentence in brand voice: 'Inter is a typeface family carefully engineered for screen legibility at small sizes, with meticulous spacing and optical adjustmen

Colors

The color system operates on a principle of 'monochromatic clarity with strategic accent.' The primary surface is pure white (#ffffff, rgb(255, 255, 255)), providing an uncluttered canvas that emphasizes content. All body text and interactive elements default to black (#000000, rgb(0, 0, 0)) for maximum contrast and legibility at 16px body size. The surface stack uses subtle grays for depth without visual noise: surface-container-low (#f0f0f0) for secondary backgrounds, surface-container-high (#e9ecef) for hover states and elevated surfaces, and outline (#d0d0d0) for borders and dividers. These grays maintain a luminosity ratio that ensures text remains readable (WCAG AA compliant at minimum). The primary accent color is #ff5c00 (hot-orange, a warm red-orange), used exclusively on call-to-

Typography

The type system pairs two optical sizes of Inter: InterDisplay for headlines (32px–56px) and Inter for body and UI text (12px–18px). This distinction mirrors the typeface's own design philosophy—Inter Display is optimized for larger sizes with slightly tighter spacing (letterSpacing: -0.01em to -0.02em), while Inter at body sizes uses neutral spacing (0.01em) to maximize legibility. Headlines use fontWeight 600 (semibold) to establish hierarchy without heaviness; body text is consistently 400 (regular) for neutral readability. The line-height scale is generous: display text uses 64px line-height at 56px font size (1.14x), headlines use 40px at 32px (1.25x), and body uses 28px at 18px (1.56x), creating ample breathing room that reinforces the minimalist aesthetic. Labels and UI text (12px–1

Layout

The layout system uses a 6-column responsive grid (defined via r-grid columns='6') with a fixed container max-width of 1024px. This grid is fluid on smaller screens (columns-s='4', columns-xs='2') to accommodate mobile and tablet viewports. The page rhythm relies on generous whitespace: body padding is 64px on desktop, creating a letterbox effect that centers content and prevents eye strain. Section separation uses lg spacing (40px) between major content blocks (Projects, Thoughts & ideas, Bio), while internal list items use sm spacing (12px) for compact grouping. The gutter between grid columns is 24px (md spacing), providing clear visual separation without feeling cramped. Container max-width of 1024px ensures that line lengths remain optimal for reading (approximately 60–80 characters a

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The base layer is the white surface (#ffffff) with no shadow. Level 1 (cards, dropdowns, input fields) uses elevation-md: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px vertical offset and 8px blur radius, creating a gentle lift that suggests the element is slightly above the surface. Level 2 (modals, popovers, hover states on cards) uses elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.12), a larger shadow with 8px offset and 24px blur, indicating greater separation from the base. Borders are used sparingly:

Shapes

The shape philosophy is 'Technical Precision'—border-radius values are small and intentional, reflecting the engineering mindset of the brand. The rounded scale uses 2px (sm) for minimal rounding on small UI elements like select dropdowns and option panels, 4px (DEFAULT) for buttons and input fields, 6px (md) for list items and menu containers, and 8px (lg) for cards and larger surfaces. No element uses aggressive rounding (>12px) except for badges and pills, which use full (9999px) to indicate their distinct, self-contained nature. The reasoning is functional: 2px–4px rounding softens hard ed

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (filled) and secondary (outlined). Primary buttons use backgroundColor: {colors.primary} (#ff5c00) with white text, 16px 24px padding, 44px height, and 4px border-radius. On hover, the background transitions to #e64a00 (a darker orange) over 150ms ease-out, providing tactile feedback. On active/pressed, the background darkens further to #cc4200. Secondary buttons use a transparent background with a 1px solid border (#d0d0d0) and black text; on hover, they gain a light gray background (#e9ecef) and the border remains visible. Both button variants use label-md typography (14px, fontWeight 600) and cursor: pointer. Links are styled as text with no underline by default; on hover, they gain a 1px b

Do's and Don'ts

**Do**

• Do use the primary accent (#ff5c00) sparingly and only on interactive elements (buttons, active states, focus indicators) to maintain visual hierarchy and prevent color fatigue.
• Do maintain generous whitespace (40px+ between sections, 64px body padding) to reinforce the minimalist aesthetic and improve readability.
• Do use Inter Display for headlines (32px+) and Inter for body text (12px–18px) to leverage the typeface's optical size optimization and maintain legibility across scales.
• Do apply smooth transitions (150ms ease-out) to all interactive state changes (hover, focus, active) to provide tactile feedback without animation excess.
• Do use the surface-container stack (#f0f0f0, #e9ecef, #e0e0e0) for depth and hover states rather than introducing new colors, keeping the palette cohesive.
• Do ensure all text meets WCAG AA contrast ratios: black on white (21:1), primary accent on white (5.5:1), and on-surface-variant on white (7:1).

**Don't**

• Don't use rounded corners larger than 8px on standard UI elements (buttons, inputs, cards); this softens the architectural precision that defines the brand.
• Don't introduce new accent colors beyond primary (#ff5c00), secondary (#12c05b), and tertiary (#0366d6); the monochromatic foundation is the brand's strength.
• Don't apply shadows larger than elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12)) or use drop-shadow filters; this contradicts the flat, print-like aesthetic.
• Don't center-align body text or use justified alignment; left-aligned text maintains the grid-based, architectural feel.
• Don't use animations longer than 300ms or easing functions other than ease-out; this keeps interactions snappy and precise rather than playful.
• Don't exceed the container max-width of 1024px or reduce padding below 24px on desktop; this preserves the letterbox composition and reading comfort.