---
title: "Concrete"
description: "Brutalist poster-style theme with offset shadows and square corners"
canonical_url: "https://docs.farming-labs.dev/docs/themes/concrete"
markdown_url: "https://docs.farming-labs.dev/docs/themes/concrete.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

# Concrete
URL: /docs/themes/concrete
LLM index: /llms.txt
Description: Brutalist poster-style theme with offset shadows and square corners
Related: /docs/themes, /docs/themes/hardline, /docs/customization/colors, /docs/themes/creating-themes

# Concrete Theme

Concrete pairs `concrete` from `@farming-labs/theme/concrete` with `theme: concrete()` and the global CSS import `@farming-labs/theme/concrete/css`.
The expected result is the `#ff5b31` primary, offset-shadow poster styling, `0px` corners, an 896px content width, and a 316px sidebar; this page documents `ui.colors.primary` and `ui.layout.sidebarWidth` overrides.
If only the config changes and the brutalist surfaces do not appear, restore the matching `/concrete/css` import rather than recreating its CSS.

A louder brutalist-style preset with poster typography, offset shadows, square corners, and bold contrast.

## Usage

```tsx title="docs.config.ts"
import { defineDocs } from "@farming-labs/docs";
import { concrete } from "@farming-labs/theme/concrete";

export default defineDocs({
  entry: "docs",
  theme: concrete(),
});
```

```css title="app/global.css"
@import "tailwindcss";
@import "@farming-labs/theme/concrete/css";
```

## Defaults

| Property      | Value                               |
| ------------- | ----------------------------------- |
| Primary       | `#ff5b31`                           |
| Background    | `#f6ead9` (light), `#12100f` (dark) |
| Border radius | `0px`                               |
| Content width | 896px                               |
| Sidebar width | 316px                               |

## Customizing

```tsx title="customizing.tsx"
theme: concrete({
  ui: {
    colors: { primary: "#ff7848" },
    layout: { sidebarWidth: 332 },
  },
}),
```

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).