Reloop

Overview

Reloop is a developer-first, open-source email infrastructure platform positioned at the intersection of simplicity and power. The brand embodies 'Technical Minimalism'—a design philosophy that strips away unnecessary ornamentation to expose clean, functional interfaces that respect the developer's time and cognitive load. The UI evokes clarity and efficiency: a bright, spacious white canvas with a vivid cobalt-blue accent (#006ffe) that commands attention on CTAs and key interactions. The emotional response is one of confidence and accessibility—users feel they are working with a mature, trustworthy platform that doesn't hide complexity behind skeuomorphism or decoration.

Reloop's voice is direct, precise, and unpretentious. The copy avoids marketing hyperbole; instead, it speaks in concrete terms about what the platform does and why it matters. Vocabulary leans technical but remains accessible to mid-level developers. Example sentence: 'Deploy Reloop in minutes—self-hosted or on our infrastructure, with the same reliability as proprietary platforms.'

Colors

The color system is anchored in a high-contrast, light-mode-first palette designed for clarity and accessibility. Primary (#006ffe) is a saturated cobalt blue used exclusively for call-to-action buttons, active states, and key interactive elements—it is the brand's signature accent and appears sparingly to maintain visual hierarchy. The surface stack ranges from pure white (#ffffff, surface) through subtle grays (surface-container-low at #f5f5f5, surface-container-high at #e8e8e8) to support layering and depth without resorting to shadows. On-surface text is a near-black (#171717) for maximum legibility at 16px body size. Secondary (#0066cc) provides a supporting accent for secondary CTAs and status indicators. Tertiary (#5f5f5f) is a mid-gray used for disabled states, metadata, and de-emp

Typography

The type system uses Inter exclusively, a geometric sans-serif that pairs technical precision with approachability. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and sets the tone of authority. Headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks content into digestible chunks. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs; body-md (16px, 400 weight, 24px line-height) is the default for all running text and ensures 1.5 line-height for comfortable reading. Label-md (14px, 600 weight) is applied to button text and form labels; label-sm (12px, 500 weight) to badges and metadata. Negative letter-spacing (-0.04em to -0.0

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Sections are separated by lg spacing (40px) vertically, creating a rhythm that feels neither cramped nor excessive. The gutter (24px) is applied consistently to left/right padding on containers, ensuring content never touches the viewport edge on mobile. Hero sections use a two-column layout (text on left, illustration on right) at desktop, collapsing to single-column on tablet and mobile. Card grids use 3 columns at desktop, 2 at tablet, 1 at mobile. White-space is generous: the hero copy has 40px margin-bottom before the CTA row, and CTAs themselves have 24px gap between them. Container padding is 24px on desktop, 16px on tablet, 12px on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 4

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container layering, avoiding the heavy drop-shadows common in Material Design. Level 1 (Base): the page background is pure white (#ffffff) with no shadow. Level 2 (Standard Card): 20px padding, 1px border in #cccccc, and box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.03). This shadow is soft and diffuse, suggesting light from above without drama. Level 3 (Elevated/Modal): same border, but box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a more pronounced lift. Hover states on cards increase the shadow to

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied judiciously to soften the interface without introducing organic or playful aesthetics. Buttons use lg radius (1rem / 16px), creating a pill-like appearance that feels modern and clickable. Cards use xl radius (1.5rem / 24px), distinguishing them from buttons and suggesting containment. Input fields use DEFAULT radius (0.5rem / 8px), a subtle curve that maintains a technical feel. Badges and small UI elements use full radius (9999px) for maximum softness. The rationale: larger, more prominent elements (buttons, cards) get

Components

Action Elements Buttons are the primary interactive element. Button-primary uses backgroundColor: #006ffe, textColor: #ffffff, padding: 12px 24px, height: 48px, rounded: 1rem, and label-md typography (14px, 600 weight). On hover, the background shifts to #0056cc (a darker blue, -10% lightness); on active, to #003d99. The transition is instantaneous (no animation) to feel responsive. Button-secondary is identical in size and shape but has a transparent background, #006ffe text, and a 1px border in #cccccc; on hover, the background becomes surface-container-low (#f5f5f5). Both button variants use font-weight: 500 at 15.5px (slightly smaller than label-md) to fit the 48px height comfortably.

Containers & Surfaces Cards are the primary container for content. Standard card: backgroundC

Do's and Don'ts

**Do**

• Do use primary (#006ffe) exclusively for CTAs, active states, and focus indicators—never for body text or backgrounds.
• Do maintain the 24px gutter on all container edges and use the spacing scale (4px, 12px, 24px, 40px, 64px) for all margins and padding.
• Do apply 1px borders in #cccccc to all cards and inputs to define edges; rely on subtle shadows (0 2px 24px rgba(0, 0, 0, 0.08)) rather than heavy drop-shadows.
• Do use Inter at 16px body-md with 1.5 line-height for all running text; apply -0.01em to -0.04em letter-spacing on headlines to tighten visual mass.
• Do use rounded: 1rem for buttons, 1.5rem for cards, 0.5rem for inputs, and 9999px for badges—never deviate from this hierarchy.

**Don't**

• Don't use secondary (#0066cc) or tertiary (#5f5f5f) for primary CTAs; primary (#006ffe) is the only accent color for main actions.
• Don't apply background gradients, overlays, or glassmorphism effects to cards—keep surfaces flat and defined by borders and shadows only.
• Don't use shadows heavier than 0 3px 8px rgba(0, 0, 0, 0.15); excessive shadows break the minimalist aesthetic.
• Don't use system fonts or fallback sans-serifs; Inter must load via @font-face or Google Fonts link, with Geist Mono for code blocks.
• Don't apply animations or transitions to button hover states; color changes should be instantaneous to feel responsive and technical.