The brand, to take away.

---
version: alpha
name: GudeCode
description: >-
  Bordered-grid design language for gudecode.de — hairline rules, near-square
  corners, one loud blue on an otherwise achromatic page. German digital
  craft studio for small and medium businesses.
colors:
  ink: "#050505"
  paper: "#FFFFFF"
  primary: "#0050FF"
  primaryHover: "#0040CC"
  primaryTint: "#EDF3FF"
  accent: "#FFAD00"
  cyan: "#00E0FF"
  border: "#E3E7ED"
  muted: "#F3F4F8"
  mutedForeground: "#686F7D"
  destructive: "#EF4444"
  darkBackground: "#050505"
  darkForeground: "#FAFAFA"
  darkCard: "#0C0C0E"
  darkBorder: "#222225"
  darkMutedForeground: "#9EA3AE"
  darkPrimary: "#1A62FF"
typography:
  display:
    fontFamily: Manrope
    fontSize: 3.75rem
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.03em
  h1:
    fontFamily: Manrope
    fontSize: 3rem
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.03em
  h2:
    fontFamily: Manrope
    fontSize: 1.875rem
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.03em
  h3:
    fontFamily: Manrope
    fontSize: 1.25rem
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.03em
  body-lg:
    fontFamily: Manrope
    fontSize: 1.125rem
    fontWeight: 500
    lineHeight: 1.65
  body-md:
    fontFamily: Manrope
    fontSize: 1rem
    fontWeight: 500
    lineHeight: 1.65
  body-sm:
    fontFamily: Manrope
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: 1.6
  label-caps:
    fontFamily: Manrope
    fontSize: 0.65rem
    fontWeight: 700
    letterSpacing: 0.18em
  mono:
    fontFamily: IBM Plex Mono
    fontSize: 0.75rem
    fontWeight: 500
  wordmark:
    fontFamily: Manrope
    fontSize: 2rem
    fontWeight: 800
    letterSpacing: -0.04em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  full: 9999px
spacing:
  hairline: 1px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  section: 80px
  sectionLg: 112px
  containerMax: 1400px
  gutter: 20px
  gutterLg: 32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.paper}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primaryHover}"
    textColor: "{colors.paper}"
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  chip:
    backgroundColor: transparent
    textColor: "{colors.mutedForeground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  eyebrow:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.mutedForeground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  input:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    height: 40px
    padding: 8px 12px
  brand-square:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.none}"
    size: 0.34em
---

## Overview

GudeCode builds websites for small and medium businesses in Germany: free
first draft, live in fourteen days, cancellable monthly. The design language
has to look like that promise — plain, structural, nothing decorative that
would have to be paid for later.

The system is a **bordered grid**. Structure is carried by hairline rules and
squared corners rather than by shadow, gradient or rounding. Two vertical
rules — the *rails* — run the full height of the page at the container edge,
and every section aligns its content to them. Cells inside a section are
separated by 1px gaps over a border-coloured backing, so a grid stays correct
at every wrap point without a single rule going astray.

The page is achromatic apart from one electric blue. Blue means *action or
identity* — a link, a primary button, the brand square, the active state.
Nothing else is blue. When everything is grey and black, a single blue element
is impossible to miss, which is the whole point.

The tone is German plain-speech: short sentences, no agency vocabulary, prices
and terms stated exactly. Copy is written in German first and translated to
English, never the reverse.

## Colors

Achromatic ground, one accent, and a warning colour used sparingly.

- **Ink (#050505):** Near-black for all body and heading text. Not pure black —
  #000 on a bright screen is harsh and reads as unrendered.
- **Paper (#FFFFFF):** The page. Cards sit on it at the same value and are
  separated by rules, not by tint.
- **Primary (#0050FF):** Electric blue. Links, primary buttons, the brand
  square, active tabs, focus rings, the accent hairline in a highlighted
  column. One job: *this is interactive, or this is us.*
- **Primary hover (#0040CC):** The pressed/hover step, never used as a resting
  colour.
- **Primary tint (#EDF3FF):** Quiet blue surface for secondary buttons and the
  highlighted column of a comparison table. Carries no text of its own beyond
  the ink already on the page.
- **Accent (#FFAD00):** Amber, for the recurring offer bar and campaign
  material only. It never appears in product UI — two loud colours competing
  on one screen destroys the blue's meaning.
- **Cyan (#00E0FF):** Deliberate highlight in campaign artwork. Never a
  surface, never a shadcn `accent`.
- **Border (#E3E7ED):** Every hairline. The single most-used non-text colour
  in the system.
- **Muted (#F3F4F8) / muted foreground (#686F7D):** Secondary surfaces and
  secondary text. Metadata, captions, table headers.
- **Destructive (#EF4444):** Errors and destructive confirmations only.

Dark mode inverts the ground rather than the palette: ink becomes the page
(#050505), cards lift one step to #0C0C0E, borders go to #222225, and the blue
brightens to #1A62FF so it holds contrast against black. Any component built
on `foreground`/`background` swaps automatically; any component built on
*fixed* light values will invert wrongly and must be rebuilt on `primary` with
explicit white type.

Measured contrast, light mode: ink on paper 20.4:1, muted foreground on paper
5.05:1, white on primary 5.85:1, primary on primary tint 5.25:1 — all clear
WCAG AA for normal text, and muted foreground is the tightest of them, so it
must not be taken any lighter. Dark mode: foreground on background 19.5:1,
muted foreground on background 8.1:1, white on the brightened primary 4.96:1.

## Typography

Two families do everything.

- **Manrope** — headings *and* body. Headings run at weight 800 with -0.03em
  tracking; body runs at 500. There is no third weight in normal use; bold body
  text is 700 and reserved for a genuine emphasis inside a sentence.
- **IBM Plex Mono** — domains, addresses, code, technology lists, anything the
  reader might type or copy. Its presence is a signal that a string is literal.

Headings are tight and large; the jump from `h2` (1.875rem) to its display
size at the `md` breakpoint (3rem) is deliberate, because these pages are read
on phones first and a 3rem headline there wraps to four lines.

The all-caps label style — 0.65rem, weight 700, 0.18em tracking — marks
eyebrows and section kickers. It is never used for a sentence.

Both faces are self-hosted as woff2 and preloaded; there is no webfont request
to a third party, which is both a performance and a GDPR position.

## Layout

The container is 1400px wide with a 20px gutter, rising to 32px from the `lg`
breakpoint. Two rules are drawn on the container's outer edge — the rails —
and everything on the page aligns to them.

A section that wants to run edge to edge does so by cancelling the container
padding (`-mx-5 sm:-mx-6 lg:-mx-8`), which lands the slab exactly on the
rails. This is the *only* correct way to go full width inside the rails; a
component that sets its own viewport-width padding will visibly cross them.

Vertical rhythm is 80px between sections, 112px from the `md` breakpoint. Grids
of cells are built as `grid gap-px` over a border-coloured background with each
cell painted in the card colour — the 1px gaps become the rules, and they stay
correct however the grid wraps.

## Elevation & Depth

There is essentially none, and that is a decision. Structure comes from rules
and from the ground the element sits on, not from a shadow.

The two exceptions: a large browser frame in a hero or case study carries a
single wide, very soft drop shadow to lift the device off the page, and
overlay surfaces (dialog, dropdown, popover) carry the shadcn default so they
read as floating above the document. Cards, buttons, inputs, chips and tiles
carry no shadow at all.

Depth in the z-axis is a fixed stack: page content below, rails at 60, header
at 100–102, floating action button above that, dialogs and dropdowns at 120.

## Shapes

Squared, with a small radius reserved for controls.

Cards, tiles, table cells, chips, eyebrows, image frames and browser frames
have **no radius**. Buttons, inputs and overlay surfaces use 6px, which is
enough to read as a control without becoming a pill.

Two shapes stay round and both earn it: the traffic lights in a browser frame,
because that is what a browser looks like, and the track of a range slider,
because the handle is round and a square track under a round handle reads as
broken. Everything else that used to be a pill has been squared.

The brand square is the system's smallest shape and its signature: a solid
blue square, 0.34em on a side, set after the wordmark with its bottom edge on
the type's baseline.

## Components

- **Button (primary):** solid blue, white type, 6px radius, no shadow. One per
  view, on the action the page exists for.
- **Button (outline):** 1px border, transparent ground. The default for
  everything secondary.
- **Card:** paper ground, 1px border, no radius, no shadow, 24px padding.
- **Chip:** 1px border, no ground, no radius. Used for feature lists and
  metadata, never as a button.
- **Eyebrow:** all-caps label in a bordered box above a heading.
- **Input:** 40px high, 1px border, 6px radius, blue focus ring.
- **Browser frame:** traffic lights and a squared address bar over a
  screenshot or a live page. The compact variant is the one used inside cards.
- **Rails:** two vertical hairlines at the container edge, drawn from the end
  of the hero to the start of the footer, `md` and up only.

## Do's and Don'ts

**Do**

- Use blue for exactly one thing per view, and make it the thing you want
  clicked.
- Build grids as `gap-px` over a border-coloured backing, so the rules survive
  every wrap point.
- Bleed a full-width slab out to the rails with negative container margin.
- Define colours as `background`/`foreground` pairs so dark mode follows for
  free.
- State prices, terms and timescales exactly, in the copy and in the UI.
- Write German first, then translate.

**Don't**

- Don't add shadows to cards, tiles or buttons to create hierarchy — use a
  rule or a change of ground.
- Don't round anything that isn't a control. No pills.
- Don't build a panel on fixed light colours (`bg-foreground` with
  `text-background`); it inverts wrongly in dark mode. Build it on `primary`
  with explicit white type.
- Don't put a component at viewport width inside the rails; it will cross
  them.
- Don't use amber or cyan in product UI.
- Don't set the wordmark in any face but Manrope ExtraBold, don't re-space it,
  and don't detach the square from the baseline.
- Don't claim a number — customers, industries, ratings — that isn't
  verifiable, in copy or in a UI element.