How this site is built to look

Start here

This is the English site, kagels-trading.com, built new in Astro. Pages are plain files in this repository and the whole site is generated at build time, so there is no theme, no page builder and no database.

• The design is deliberately quiet

  A dark blue box, real numbers, plain cards. No gradients, no glow, no dotted backgrounds, no generic icons. The charts and the figures are the decoration.

• Five colours and one width

  The shared values live in the :root block of Base.astro. Everything else is styled inside the component it belongs to.

• No web font

  The site uses the reader's system font. Nothing is downloaded, and the page looks slightly different on a Mac than on a Windows PC. That is intended.

• Content beats decoration

  Karsten's charts, his photo and the price levels carry the pages. When something new is added, it is added in small steps and it has to earn its place.

Logo

Two colours, no more. The wordmark is blue and black on white, and it is never recoloured, tinted or put on a busy background.

• Logo blue#084ec5The two bulls above the name
• Logo black#000000The whole wordmark, both words

Where the files are

Two versions, one geometry

On white the logo blue reaches 7.23:1, which is comfortable. On the dark blue it would fall to 1.93:1 and the bulls would disappear, so dark surfaces get the white version instead. Both files hold the same 35 paths in the same places: only the fills differ, and the shapes are never redrawn.

Left, the original on white and on any light surface. Right, kagels-trading-logo-white.svg on the dark blue. The white version is for dark grounds only: on white it is invisible.

Colour

Five colour variables, declared once in src/layouts/Base.astro, used everywhere. The chips fill from the variables themselves.

• --color-text#111111Body text, headings
• --color-text-soft#555555Captions, meta lines, secondary text
• --color-accent-dark#0f2a5cHero box, figures, active borders
• --color-border#e5e5e5Every hairline and card edge
• --color-background#ffffffPage background

Colours that are not variables yet

Four more colours are written directly into the components that use them. They are part of the look, so they belong here even though they do not have a name yet. Two more sit outside the stylesheet altogether: the logo blue above, which lives in the logo file, and the chart background #0d1b33, which lives in TradingView and is baked into every exported chart.

Contrast

Text has to stay readable, so these are the pairs the site actually uses, measured against the WCAG rule of 4.5:1 for normal text.

Type

One family, the system stack: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif. Body text is 1.125rem with a line height of 1.6.

Sizes are set per page rather than in one scale, so the same level can differ between a text page and a forecast. These are the sizes in use.

Prices and price levels always use font-variant-numeric: tabular-nums, so the digits line up in a column. How a price is written (decimals, currency sign, points) is decided in src/lib/prices.ts, not in the markup.

Layout and spacing

Corners

Four radii are in use, and they are not interchangeable: 12px for a hero box and the author box, 10px for cards, images and the level list, 8px for buttons and range rows, 6px for the small hint on a chart.

Grids

Card rows are repeat(auto-fit, minmax(...)) with a minimum between 200px and 260px, so they fold from three columns to two to one without a media query. Only the layouts that carry a photo or a sidebar switch at 1024px and 700px.

Components

Nine components and two layouts. Build with these before writing anything new.

Patterns

Six shapes carry almost every page. They are shown here as they are built, not as pictures of themselves.

Hero box

Dark blue, 12px corners, white text, a label in #b9ccff above the headline. It opens the homepage and every forecast.

Figure tiles

The number is 2.2rem in dark blue, the label sits underneath in the soft grey. Used for facts a reader should remember.

Card

1px border, 10px corners, heading and one soft grey line. On hover the border turns dark blue. Nothing else moves.

Price levels

The current price sits in the dark blue row at the top, the levels underneath in tabular figures.

Range row

A thin border with a 4px dark blue edge on the left. Used for forecast ranges.

Table

Header row on #f4f6fa, every cell framed, and the whole table scrolls sideways on a phone instead of breaking the page.

Charts

Charts are the most valuable thing on this site, so they get their own rule. Karsten draws them in TradingView and exports them as images, which means the background colour is baked into every file. It is decided once and then left alone.

What can be drawn on it

Measured against the chart background, so nothing is chosen by eye.

Line colours for levels

Horizontal levels are the one thing drawn on almost every chart, so they get a small fixed set. All three clear 8:1 on the background, which means a one pixel line still reads.

Three colours are enough. A fourth and a fifth turn a chart into a colour code the reader has to learn, and the price action stops being the loudest thing on the screen.

How to keep them identical

• Save a TradingView template and load it for every export.Six charts in one forecast have to look like six pictures of the same screen, not six settings.
• Grid lines stay quiet. A faint white is enough on this background. Visible grid lines compete with the price itself.
• The background is never edited afterwards. Changing it later means exporting every chart on the site again.
• Labels in English. Text inside the image cannot be translated later, so it has to be right when the chart is exported.
• Charts go through ChartFigure.astro, which gives them the 10px corners, the caption and the click that opens them larger.

Rules

Decisions that are already made. They are in AGENTS.md in full, with the date and the reason.

Design direction

The current look is the starting point and gets developed in small steps, not reinvented. Modern touches sparingly: no gradients, no glow, no dot or grid backgrounds, no generic icons, no "Get started".

Charts

Every chart goes through ChartFigure.astro and can be opened larger by clicking it. Charts carry German and English labels for now.

External links

Always a new tab, always through ExternalLink.astro or the markdown plugin, always rel="noopener" without noreferrer, so a linked provider can see where the visitor came from.

No affiliate links

Providers are linked directly, never through the German redirects.

Copy

English, plain, no dashes as punctuation. Write two sentences instead of one with an insert.

Prices

Formatted by src/lib/prices.ts, which knows dollars, points and exchange rates. Never formatted by hand in a page.

Addresses

Forecasts keep the addresses the old WordPress site used, so their rankings survive without a redirect.

Internal links

A new article links to the ones it belongs with, and they link back to it. A dead internal link breaks the build.

Translations

Every translation from the German site follows docs/translation-checklist.md. Where it disagrees with AGENTS.md, AGENTS.md wins.

Where things live

Not settled yet

An honest list, so nobody designs into a gap that is already known.

• The palette is only half named. Five colours are variables, four more are written into the components that use them. If the dark blue ever changes, those four have to be found by hand.
• There is no type scale. Sizes are chosen per page, so an h2 is 1.9rem on the homepage and 1.4rem on a text page. It works, but it is a decision each time rather than a rule.
• Older charts still carry German labels in their pixels.New exports are English. The old ones are replaced market by market, whenever a forecast gets new charts anyway.
• The site is not on its own domain yet. It runs on the workers.dev address until the old WordPress site is redirected.
• This page has no mockup. It was built from the files it documents, which is the one place where that is the right way round.