Stargazer

Stargazer is a dark-canvas layout with cinematic proportions and carefully tuned contrast ratios. Where most layouts treat the background as neutral, Stargazer treats negative space as a first-class design element — the dark field creates visual depth that draws the eye toward content rather than competing with it. This is a layout for showcasing work, presenting portfolios, or framing any content where atmosphere matters as much as information.

Building a dark layout that actually works for extended reading is harder than it appears. The contrast ratio needs to be high enough for legibility but low enough to avoid the harsh glare that causes eye fatigue. We tested Stargazer across multiple ambient lighting conditions and display types, arriving at a foreground/background combination that scores WCAG AAA at the body text level while remaining comfortable for sessions longer than ten minutes.

Designers building portfolio sites, photographers presenting gallery pages, and developers creating documentation for tools with dark-mode-first interfaces will find Stargazer's approach directly applicable. The layout handles images particularly well — photography appears more vibrant against a dark field, and screenshots of code or UI mockups integrate naturally without the jarring contrast shift you get with light-background layouts.

Layout Anatomy

Stargazer uses a centered content column with a 60-character measure — slightly narrower than standard — and very wide margins that are part of the design rather than empty space. The margins create a letterbox effect that focuses attention on the content strip. On larger displays, subtle gradient vignetting at the edges reinforces the cinematic framing. The grid is deliberately simple because the dark canvas does the visual heavy lifting; complex column arrangements would fight the atmosphere.

Spacing and Typography Notes

Vertical spacing is more generous than in light layouts — approximately 2× the standard paragraph spacing. Dark backgrounds make elements feel closer together due to the reduced visual 'weight' of light text on dark surfaces. Compensating with extra spacing prevents the page from feeling crowded. Section breaks use 4× spacing with a faint horizontal line at 8% opacity, barely visible but enough to signal structure to readers who scroll quickly.

Body text uses an off-white (#e8e4dc) rather than pure white to reduce contrast harshness. Headings use a slightly warmer tone (#f5f0e8) and heavier weight. The type scale starts at 17px — a compromise between the standard 16px and Saga's 18px — chosen because the dark background creates an optical illusion where text appears slightly smaller than it actually is. Link colours use the accent orange at reduced saturation to maintain visibility without creating hot spots in the dark field.

Components in This Layout

Stargazer's components are designed to complement the dark canvas. Image blocks have a thin border at 5% opacity that defines their edges against the background. Code blocks use a slightly lighter background (#252525) for subtle contrast. Callout boxes use the accent colour as a left border with a very low-opacity background tint. The most distinctive component is the 'spotlight' block — a section with increased background brightness that draws attention to key content, used sparingly as a visual highlight.

Common Implementation Mistakes

• Using pure white (#ffffff) for body text. The contrast against a dark background causes eye strain within minutes. Off-white at #e8e4dc or similar provides sufficient contrast (WCAG AAA) without the harshness.
• Applying the same spacing values from a light-background layout. Dark backgrounds make elements appear closer together — you need approximately 1.5 to 2× the spacing to achieve the same visual separation.
• Forgetting to test images with transparency. PNG images with transparent backgrounds that looked fine on white will show their alpha edges against a dark canvas. Either ensure solid backgrounds or add a container with appropriate background color.
• Using the dark layout for content that requires dense data tables or complex forms. Dark backgrounds work well for narrative and visual content but become fatiguing when users need to scan structured data repeatedly.
• Neglecting the reduced saturation for accent colours. Saturated colours that work on light backgrounds become distractingly vivid on dark ones. Reduce saturation by 15-20% and test at night with reduced screen brightness.