renCal

Overview

renCal is a free, open-source desktop calendar designed for developers and power users who value simplicity, control, and plaintext data storage. Built for Omarchy and Linux, with macOS support, it embodies a "Hacker Minimalism" aesthetic—stripping away unnecessary UI chrome to expose pure functionality. The design philosophy rejects skeuomorphism and ornament in favor of a monochromatic canvas (near-black #131313 background, white text) punctuated by a single, vivid accent: a burnt-orange primary color (#f56213) used exclusively for call-to-action buttons, interactive states, and brand identity. The visual language is deliberately austere, evoking the clarity and precision of terminal interfaces and code editors, yet refined enough for professional calendar management.

The brand voice is direct, technical, and unpretentious. renCal speaks to its audience as peers—developers who understand CalDAV, iCloud sync, and plaintext .ics files. Sentences are short, active, and jargon-aware without being gatekeeping. The tone avoids marketing hyperbole; instead, it lists capabilities matter-of-factly. Example: "Events stored as plaintext .ics files—sync with Google, iCloud, Outlook, or CalDAV." Typography is anchored in Geist Mono for headings and UI labels, reinforcing the hacker aesthetic, while Inter serves body copy for readability at smaller sizes.

Colors

The color system is built on a high-contrast, dark-first foundation optimized for extended screen time and accessibility. Surface (#131313) is the dominant background—a near-black that reduces eye strain while maintaining sufficient contrast for white text (on-surface: #ffffff, WCAG AAA compliant at 16.5:1 ratio). The surface stack is minimal: surface-container-lowest (#050505) for the deepest layers, surface-container (#131313) for standard cards, and surface-container-highest (#2a2a2a) for elevated modals or hover states. Outline (#414141) and outline-variant (#505050) define subtle borders and dividers, creating visual separation without harshness.

Primary (#f56213) is the brand's signature accent—a warm, saturated orange deployed exclusively on primary CTAs (Download button), focus st

Typography

The type system pairs Geist Mono (headings, labels, UI) with Inter (body, descriptions). Geist Mono is a technical monospace font that reinforces the hacker aesthetic and is used at display (60px, 400 weight), headline-lg (40px), headline-md (28px), and all label sizes (16px–12px). This creates a distinctive, code-like appearance for the information hierarchy. Inter serves body-lg (18px) and body-md (16px) for longer-form content, providing superior readability at smaller sizes while maintaining visual cohesion. Letter-spacing is minimal (0 to -0.02em) to preserve the compact, technical feel. Line-height is set to 1.5× font-size for body text (e.g., 16px font with 24px line-height) to ensure comfortable reading on dark backgrounds. For small labels over busy calendar grids, apply text-shad

Layout

The page layout follows a 12-column grid with a max-width of 1200px, centered on the viewport. The hero section uses full-width background (surface: #131313) with centered content and generous vertical padding (lg spacing: 40px between sections). The header is fixed or sticky, with 16px vertical padding and 40px horizontal padding, containing the logo, navigation links, and GitHub icon. Navigation uses uppercase labels in label-md typography (16px Geist Mono, 400 weight) with hover underlines in primary color. The main content area respects a gutter of 24px on desktop, reducing to 12px on tablet and 8px on mobile. Cards and containers use md spacing (24px) for internal padding and lg spacing (40px) for section separation. The calendar grid below the hero is rendered with a 7-column layout

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered backgrounds. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for small interactive elements like badges or tooltips, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for modals and elevated surfaces. Cards are defined by a 1px solid border in outline-variant (#505050) rather than shadow alone; the combination of border + subtle shadow creates a "floating" effect without visual heaviness. On hover, cards transition from md to lg

Shapes

The shape philosophy is "Technical Minimalism"—sharp, precise corners with minimal rounding, reflecting the aesthetic of code editors and terminal interfaces. Border-radius follows a strict scale: sm (2px) for small interactive elements like badges or tight button groups, DEFAULT (4px) for standard buttons, inputs, and cards, md (6px) for slightly larger containers, lg (8px) for modals and elevated surfaces, and full (9999px) for pill-shaped buttons or circular avatars. Buttons use DEFAULT (4px) radius; cards use lg (8px) to create subtle visual distinction from buttons. Inputs use DEFAULT (4p

Components

Action Elements Buttons are the primary interactive element and must always use primary color (#f56213) for the main CTA. button-primary has backgroundColor: {colors.primary}, textColor: {colors.on-primary} (#131313), padding: 8px 12px, height: 40px, rounded: {rounded.DEFAULT} (4px), and typography: {typography.label-md} (16px Geist Mono, 400 weight). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-fixed-dim} (#ff6b35) over 150ms. Secondary buttons use backgroundColor: rgba(255, 255, 255, 0.05), textColor: {colors.on-surface-variant}, and a 1px border in outline-variant; on hover, increase background opacity to 0.1 and textColor to {colors.on-surface}. All button transitions must use cubic-bezier(0.4, 0, 0.2, 1) timing for consistency.

Containers

Do's and Don'ts

**Do**

• Do use primary (#f56213) exclusively for primary CTAs, focus states, and brand-critical interactions—never use it for decorative elements or secondary UI.
• Do maintain high contrast between text and background; on-surface (#ffffff) on surface (#131313) achieves 16.5:1 WCAG AAA compliance.
• Do use Geist Mono for all headings and UI labels to reinforce the technical, hacker aesthetic; reserve Inter for body text only.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for consistent, snappy feedback.
• Do use the outline-variant border (#505050) for subtle dividers and card borders; never use pure white or pure black borders.
• Do respect the 40px minimum touch target for all interactive elements; use padding and spacing to achieve this without oversizing visual elements.

**Don't**

• Don't use secondary (#666666) or tertiary (#e9ecef) colors for primary CTAs or interactive highlights—primary (#f56213) is the only accent color.
• Don't apply shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.2)); the dark background already provides depth, and excessive shadows muddy the interface.
• Don't use rounded corners larger than {rounded.lg} (8px) for standard UI elements; the technical aesthetic demands sharp precision, not soft, organic curves.
• Don't mix Geist Mono and Inter within the same heading or label; maintain strict separation: Geist Mono for UI, Inter for body.
• Don't use opacity-based text (on-surface-variant: rgba(255, 255, 255, 0.7)) for primary content; reserve it for helper text, metadata, and secondary labels only.
• Don't apply color changes on hover without also changing background or shadow; ensure hover states are visually distinct through multiple properties (background + shadow + color).