# How evilmartians.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/evilmartians.com-design)

Last updated: 2026-07-28

## Design character

Evil Martians is a dark, highly crafted developer consultancy brand. Home and Chronicles articles sit on deep black with white type, sharp composition, and playful-serious 3D editorial art. A muted mauve/rose (`#663f4c`) appears as a measured accent against the monochrome chassis. The voice is expert, slightly mischievous, never corporate-blue.

What should survive adaptation:
- Black marketing canvas with white display type
- 3D/illustrative article heroes as the emotional peak
- Small 4px radii on chips and controls
- Clear left rail / utility nav on long articles

## Foundations

### Color

Measured:
- `#ffffff` text/surfaces on dark
- `#663f4c` accent (mauve/rose)

Visually: pure black canvas, white headlines, gray secondary text, light mode article body below the dark hero on Chronicles posts.

### Typography

Families unsupported. Observed article/UI sizes:
- Small UI ~12.5/22 (300–400)
- Body-ish ~15/36 in some editorial measures (airy)
- Display heroes are huge white sans on black (visually 48px+ class)

Home uses bold short claims; articles use strong title + readable long-form.

### Spacing and layout

- Padding top 48px common; 24/36 also frequent
- Horizontal padding ~48px on content shells
- Bottom padding 12–48px stacks
- Article: dark hero full-bleed, then light reading column

Radii: 4px dominant (chips, small controls).

## Visual language

- Flat dark UI chrome + sculptural 3D heroes
- Topic chips as dark rounded rectangles
- Author rows with avatars
- Thin hairline rules
- Taxonomy: media publication, dark mode, illustration, limited palette

## Components and states

- Martian mark + “Hire Martians” white button
- Vertical section list (Services, Clients, Blog…)
- Article hero with topics + authors
- Light-mode long-form body beneath
- Floating event badge sometimes present

## Practical guidance

**Preserve** black hero theater, white type, mauve as rare accent, 4px chips.  
**Avoid** generic purple AI gradients and stock photography.  
**Adaptation** for expert consultancies and engineering blogs that want character.

## Scope note

Home + OKLCH Chronicles article (4 captures). Colors partially measured; font families unsupported. Product pages beyond home/article not in this set.

## Captured pages

[![Evil Martians design and develop high performance developer tools that scale](https://pin.fontofweb.com/8132?format=jpg)](https://design.withfudge.com/share/pin-8132)

[Evil Martians design and develop high performance developer tools that scale](https://design.withfudge.com/share/pin-8132)

[![OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://pin.fontofweb.com/8133?format=jpg)](https://design.withfudge.com/share/pin-8133)

[OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://design.withfudge.com/share/pin-8133)

[![OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://pin.fontofweb.com/8135?format=jpg)](https://design.withfudge.com/share/pin-8135)

[OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://design.withfudge.com/share/pin-8135)

[![OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://pin.fontofweb.com/8134?format=jpg)](https://design.withfudge.com/share/pin-8134)

[OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ t](https://design.withfudge.com/share/pin-8134)

## Colors

- `#663f4c`
- `#ffffff`
- `#000000`