# How dlang.org is designed

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

Last updated: 2026-07-28

## Design character

dlang.org is a **classic language homepage**: helpful, slightly old-web in structure, and honest about being a community/docs hub. A **brick-red** (`#b03931`) top bar and matching primary buttons anchor the brand. Below, light gray and white bands hold intro copy, a code sample card, sponsor logos, and practical News/Learn/Community/Documentation columns. It prioritizes clarity over fashion.

What should survive adaptation:

- Brick-red as the single strong accent
- Code sample adjacent to the pitch
- Logo/proof row for industry use
- Utility multi-column link sections

## Foundations

### Color

Measured:

- Accent: `#b03931`
- Primary text: `#333333`
- Secondary text: `#999999`

Surfaces are light gray hero band + white lower sections. Links inside body copy often pick up the red accent. Buttons: filled red primary, white secondary with gray border.

### Typography

Declared families unknown. Body ~15px / 21px line-height weight 400. Headings jump to ~30px. The stack reads as a standard readable sans for docs/marketing hybrid pages.

### Spacing and layout

Radius **4px** on buttons/inputs. Home is vertically stacked sections with a two-column hero (copy + code). Lower content uses multi-column grids. Spec TOC page is denser documentation navigation on the same palette.

## Visual language

- Flat surfaces, minimal shadow
- Simple bordered code card
- Corporate logo strip
- Sidebar-ish latest announcements cards on the home right column
- Red text links as the interactive cue

## Components and states

- **Top nav:** red bar, white wordmark/links, search
- **Primary button:** solid red (“Download”, “Donate”)
- **Secondary button:** white outline
- **Code panel:** monospaced sample in a light card
- **Content cards:** announcements list with thumbnails
- **Spec TOC:** hierarchical documentation links

## Practical guidance

**Preserve**

- One red accent + gray text system
- Code beside the value prop
- Straightforward sectioning for Learn/Docs/Community

**Avoid**

- Rewriting it as a dark neon devrel landing
- Dropping the code sample from the hero story
- Over-rounding everything into a consumer app look

## Scope note

Home and language spec TOC (pins 6415, 6416). Declared fonts not available; system is desktop-viewport documented here.

## Captured pages

[![Home — pitch, code, community](https://pin.fontofweb.com/6415?format=jpg)](https://design.withfudge.com/share/pin-6415)

[Home — pitch, code, community](https://design.withfudge.com/share/pin-6415)

[![Language spec table of contents](https://pin.fontofweb.com/6416?format=jpg)](https://design.withfudge.com/share/pin-6416)

[Language spec table of contents](https://design.withfudge.com/share/pin-6416)

## Colors

- `#b03931`
- `#333333`
- `#999999`
- `#ffffff`