--- version: alpha name: Ferro Brut description: The page is wet concrete. Nothing here is paper, nothing is rounded, and the only bright thing in the system is hazard paint. meta: id: "theme-ferro-brut" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:52+09:00" updatedAt: "2026-09-02T16:52:37+09:00" version: "1.0.0" isNew: false lookbook: tagline: Mid-tone concrete, 3px rules, and one colour you are not allowed to ignore bestFor: Construction and logistics tools, industrial dashboards, bold agency sites, event and festival pages avoidFor: Healthcare, finance, anything that needs to feel gentle or premium defaultMode: light surfaceStyle: outline accentUse: bar primaryBoundary: border caseStyle: headings-upper borderWidth: 3px imageTreatment: grayscale motion: intensity: 2 duration: 120ms ease: "cubic-bezier(0.2, 0, 0, 1)" signature: "Instant state changes. Things snap; nothing eases in." displayFont: Bebas Neue displayKind: sans bodyFont: Roboto Condensed monoFont: Roboto Mono colors: background: "#BEBEB9" foreground: "#000000" card: "#B0AFAB" card-foreground: "#000000" popover: "#B0AFAB" popover-foreground: "#000000" primary: "#C2A200" primary-foreground: "#0E0D09" secondary: "#A0A09A" secondary-foreground: "#000000" muted: "#A0A09A" muted-foreground: "#38362C" accent: "#1E4E2E" accent-foreground: "#FBFAF6" destructive: "#B6322D" destructive-foreground: "#FBFAF6" border: "#95948F" input: "#95948F" ring: "#000000" chart-1: "#AD9000" chart-2: "#8CA723" chart-3: "#3CA24F" chart-4: "#DF8E0D" chart-5: "#CB5E2B" colorsDark: background: "#201F1B" foreground: "#F7F6ED" card: "#2B2A26" card-foreground: "#F7F6ED" popover: "#2B2A26" popover-foreground: "#F7F6ED" primary: "#DFBB00" primary-foreground: "#0E0D08" secondary: "#383731" secondary-foreground: "#F7F6ED" muted: "#383731" muted-foreground: "#A3A196" accent: "#6DB07F" accent-foreground: "#0E0D08" destructive: "#FFA096" destructive-foreground: "#0E0D08" border: "#484741" input: "#484741" ring: "#DFBB00" chart-1: "#D5B200" chart-2: "#9CB92D" chart-3: "#6ED97E" chart-4: "#E08D00" chart-5: "#FFAE8D" typography: display-lg: fontFamily: Bebas Neue fontSize: 92px fontWeight: 800 lineHeight: 1.02 letterSpacing: -0.05em headline-lg: fontFamily: Bebas Neue fontSize: 46px fontWeight: 700 lineHeight: 1.12 letterSpacing: -0.02em headline-md: fontFamily: Bebas Neue fontSize: 26px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.01em body-lg: fontFamily: Roboto Condensed fontSize: 17px fontWeight: 400 lineHeight: 1.62 body-md: fontFamily: Roboto Condensed fontSize: 15px fontWeight: 400 lineHeight: 1.58 body-sm: fontFamily: Roboto Condensed fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Roboto Condensed fontSize: 12px fontWeight: 600 lineHeight: 1 letterSpacing: 0.2em label-mono: fontFamily: Roboto Mono fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em numeral-xl: fontFamily: Roboto Mono fontSize: 64px fontWeight: 700 lineHeight: 1 letterSpacing: -0.03em rounded: none: 0px sm: 0px md: 0px lg: 0px xl: 0px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 28px xl: 60px gutter: 0px margin: 24px measure: 62ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.none}" padding: 14px button-secondary: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.none}" padding: 14px card-article: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.lg}" padding: 20px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Ferro Brut ## Overview Ferro Brut stands on a mid-tone. That single decision is the whole theme: the page is a grey-green concrete at roughly 80% lightness, so there is no white to fall back on, no card that reads as "paper", and no way to create hierarchy by being brighter than the background. Hierarchy has to come from rules, weight and scale instead — which is the point. Everything is separated by a 3px line. Headings are condensed uppercase set very large. The only saturated colour is a hazard yellow used the way it is used on a site: to mark the thing that will hurt you if you ignore it. Personality: heavy, direct, unglamorous, slightly rude. It should look like it was specified rather than designed. ## Colors Concrete, iron, and one paint. - **Ground (#BEBEB9):** Wet concrete. Mid-tone on purpose. Cards move *down* from it, not up — a panel here is darker than the page. - **Primary (#C2A200):** Hazard yellow. Used for the single most consequential action on a screen and for the bar that marks an active row. Never decorative. It sits at 1.33:1 against the concrete, which is deliberate and is why **every yellow fill in this theme carries a 3px ink border**: the boundary supplies the contrast the fill cannot (WCAG G207). A borderless yellow button here is a bug. For the same reason the focus ring is the ink colour, not the primary. - **Accent (#1E4E2E):** Deep moss. The quiet second class: verified, complete, safe. It is the only colour that ever appears at small sizes as text. - **Ink:** near-black with a green bias, so it belongs to the concrete rather than sitting on it. - Charts are analogous — a yellow-green family, not five unrelated hues. This system does not have five equal things to say. Dark mode is the same site at night: the concrete drops to 24% lightness and the hazard yellow gets brighter, because paint under a work light is brighter than paint in the sun. ## Typography Bebas Neue for anything that shouts, Roboto Condensed for anything that explains, Roboto Mono for anything measured. - **Display:** Bebas Neue at 92px and up, uppercase by nature. A hero heading should look like it was stencilled on. - **Headings:** also uppercase, also condensed. This is the one lookbook theme where headings are uppercase and labels are not. - **Body:** Roboto Condensed at 15px, measure capped at 62ch. Condensed body copy is harder to read in quantity, so keep the quantity down. - **Numerals:** Roboto Mono, heavy, large. Quantities are the content. ## Layout A 12-column grid with *zero* gutter — columns butt against each other and are separated by the 3px rule instead of by space. Content runs edge to edge with a 24px margin and no max width until 1600px. Vertical rhythm is 4px, but sections are separated by a full-bleed 3px rule and nothing else. There is no such thing as a floating card here. ## Elevation & Depth There is no elevation. Nothing has a shadow, and nothing may acquire one. Depth is expressed as a tonal step *downward* — a panel is a darker patch of concrete — plus the 3px outline that surrounds every meaningful region. ## Shapes Zero radius everywhere, including inputs, badges and images. The 3px border is part of the shape, not a detail: at that weight it reads as a channel between two surfaces rather than as an outline. Images are hard-cropped rectangles in grayscale. Colour photography is not permitted; the only colour on the page is paint. ## Components - **Buttons:** flat yellow fill, black text, zero radius, 14px padding, 3px border in the ink colour. The border is what makes it look bolted on. - **Cards:** a darker patch of concrete with a 3px outline and 20px padding. No radius, no shadow, no hover lift — hover swaps the border to yellow. - **Tables:** 3px rules between groups, 1px inside a group. Numbers are mono and right-aligned. - **Inputs:** 3px border, zero radius, ground-coloured fill so the field looks cut into the page rather than laid on top. - **Badges:** uppercase condensed on the accent, square, 2px/6px padding. ## Do's and Don'ts - Do let the concrete be the background of everything, including cards. - Do set headings uppercase and enormous. - Do use the hazard yellow exactly once per screen region. - Don't add a radius anywhere, for any reason. - Don't introduce white as a surface — there is no paper in this system. - Don't use colour photography. - Don't ship a yellow fill without its 3px ink border — the fill alone is a 1.33:1 affordance and disappears for a lot of people. - Don't soften the motion. State changes here are 120ms and linear-ish.