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.

• Modern, minimal, not a template

  Quiet, but not old-fashioned, and never the look every AI-built site has. The charts, the numbers and Karsten's photo are the decoration. The list of what is not allowed is under Rules.

• Six 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.

• One web font: IBM Plex

  Since 2 October 2026 every page uses IBM Plex Sans, served from our own server (no request to Google), so the site looks the same on a Mac and a Windows PC. IBM Plex Mono sets prices that stand in a column on the homepage.

• 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.

Design strategy: a modern look that comes from trading

Karsten set the direction on 29 September 2026. The site should look modern and minimal, but not old-fashioned, and not like the template that almost every site built with AI tools shares. The work runs in small steps, and Karsten decides after each one.

Step 1: say what is not allowed

Done on 29 and 30 September 2026. The list is under Rules on this page and in AGENTS.md, so no work session brings these elements back. It changes no page by itself.

Step 2: a look taken from the charts

Started on 2 October 2026 with the homepage sample (draft V2 "Chart Hero"), approved by Karsten the same day. The idea is to take the design from the work itself instead of from a template. Forecasts and blog follow.

• Thin horizontal lines as the main element, drawn like price levels on a chart.
• The three level colours as markers: yellow #ffd814, light green #9be870 and orange #ffa500, only for things that matter.
• Digits of equal width for every price and number, so columns line up like on a trading screen.
• One clear modern font instead of the system font. A little technical, no newspaper serif.
• Small, sharp corners of 2 to 4 pixels.
• Chart navy #0d1b33 as the brand colour, so the site and the charts match.

Order

1. The "not allowed" list. Done.
2. The homepage as a sample, with before and after screenshots. Karsten decides. Done: approved on 2 October 2026.
3. Only then the forecasts and the blog.

Exception, 2 October 2026: Karsten moved step 3, the left sidebar, ahead of the homepage sample. It is built in today's look; when step 2 comes, only font and colours change, not the layout.

Step 3: left sidebar for forecasts and blog

Built on 2 October 2026 (SideNav.astro). There is only one sidebar, on the left; it replaces the contents list on the right.

• Forecasts: all forecasts grouped as metals, indices, forex, energy and interest rates. The current market is bold and underlined like the active menu item; its sections are opened underneath, in short form without the market name.
• Blog: all topics from src/data/topics.ts, the post's topic highlighted, its sections underneath (from four H2 up, as before). Topic pages show the same list.
• From 1280px only. Narrower screens get a box to open at the top ("Markets" or "Topics"), plus the "On this page" or "Contents" box as before.
• Charts first. Forecast pages grow to 1360px from 1280px, so the charts stay about as wide as before: 1,044 instead of 1,052px at 1440px, 1,000 instead of 1,052px at 1280px.
• New menu item "Topics" after Blog, leading to the overview /blog/topics/.

This page is updated in the same commit as every design change. The plan itself is in Karsten's office notes, ~/Project-office/decisions-and-plans.md.

Decisions so far

Where the design stands today

The site is live on kagels-trading.com since 20 September 2026. This is what a reader sees now, page type by page type.

Where the site still breaks the rules

The "not allowed" list is newer than most of the site. These places still use a banned element. They are changed in step 2, starting with the homepage, not one by one in between.

Checked in the source files on 30 September 2026. Round things that really are round (the portrait, the back-to-top button, the lightbox close button, the small markers on charts) are allowed.

Drafts waiting for a decision

Five homepage drafts from 29 September 2026, with the same content and colours as today. They are local files and not published, in ~/Claude/builds/2026-09/design-varianten-taste/. They were made before the "not allowed" list, so each has to be checked against it.

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. Since 26 September 2026 the bull and the bear stand left of the name, and the name reads "KagelsTrading" in one word, "Kagels" bold and "Trading" regular, a little more than half as tall as the animals and centred on them (Karsten, in the style of Interactive Brokers). The animals keep their old shapes; the letters are Inter (SIL Open Font License), turned into paths.

• Logo blue#084ec5The bull and the bear left of 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 bull and bear 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

Six 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#0f2a5cHomepage hero, the second part of a two-tone H2, FAQ questions, links on light
• --color-chart-bg#0d1b33Chart background; summary box and FAQ heading strip since 29 September
• --color-border#e5e5e5Every hairline and card edge
• --color-background#ffffffPage background

Colours that are not variables yet

These 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. The chart background also 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 since 2 October 2026: IBM Plex Sans, with the system stack as fallback (system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif). Loaded in Base.astro from the packages@fontsource/ibm-plex-sans and@fontsource/ibm-plex-mono, Latin only: weights 400, 500, 600 and 700, italic 400 and 700. IBM Plex Mono 500 for prices in a column (homepage). 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

Every page uses 3px since 7 October 2026, when prop trading followed the homepage, forecasts, blog, forecast overview, about page and search. Only real round things stay round: portrait photos and the back-to-top button.

The target is 2 to 4px (strategy step 2). The homepage uses 3px since 2 October 2026, and so do the forecasts, the blog, every chart and the summary and FAQ boxes; the remaining pages follow when step 2 reaches them. Until then, new elements there take the value of their neighbours, so a page does not end up with a mix.

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

Fourteen components, two layouts, two shared stylesheets and three markdown plugins that shape how posts look. Build with these before writing anything new.

Patterns

The shapes that carry almost every page. They are shown here as they are built, not as pictures of themselves. Patterns marked "on the way out" break a rule and are replaced in step 2.

Two-tone H2

Since 30 September 2026 in posts and forecasts. The part before the first colon is bold black, the rest regular in navy #0f2a5c. Tight line height and balanced lines. New H2 are best written as "Topic: statement".

Summary box

The first H2 of a post or forecast, "… in 30 seconds", becomes this box on its own. Dark blue, white and light blue only, no label above the heading. Forecasts show exactly four short items: price now, short term, key support, next target.

FAQ box

A dark heading strip, then light questions with fine lines between them and a small "Q". Made from an H2 "Frequently asked questions …" or "FAQ …".

Scenario cards

In forecasts, recognised by the heading: "Bullish …" or "Bull case …" turns light green, "Bearish …" or "Bear case …" light red. Other cards stay neutral.

Hero box

Dark blue, 12px corners, white text. Since 29 September 2026 only on the homepage and the forecast overview; forecasts and posts open black on white. At most one dark block per page area. The label above the headline, still on the live pages, is on the way out.

Figure tiles (on the way out)

The number is 2.2rem in dark blue, the label sits underneath in the soft grey. Not allowed since 29 September 2026 (rows of big numbers). Still on the homepage and the forecast overview.

Card

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

Price levels

The real component (LevelList.astro): a price ladder on thin lines, highest level first. A short line in the chart's level colour marks each price: orange for resistance, yellow for the price at analysis, light green for support. Prices in IBM Plex Mono, so the digits line up.

Range row

Label above, range in IBM Plex Mono, between a thin line above and below. Used for forecast ranges (gold, DAX, Dow Jones). Since 2 October 2026 without the coloured left edge.

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.

Publication choice: white bars on navy

Recorded on 2 October 2026 after comparing a white-background candlestick chart with a navy-background chart using white OHLC bars (open, high, low and close). Use Karsten's white bars on #0d1b33 as the forecast standard. In the examples, the dark chart looked cleaner and more distinctive, with price movement standing out clearly.

This is our editorial choice, not a measured reader preference or proof that dark backgrounds are always easier to read. The examples differed in market, timeframe, proportions and indicator density. Background colour and chart type are separate decisions: candlesticks can also work on navy, and their bodies can help when teaching individual candle patterns. That teaching use does not change the forecast standard.

Readability checks before publication

• Make annotations large enough at the displayed size.Enlarge small labels such as “2023 High”; check both the article view and the enlarged image, including on a phone.
• Keep analysis lines clearly visible. Use the bright palette below and enough line thickness for important trend lines and levels. Faint red, green or blue diagonals must not disappear behind the white price bars.
• Keep the grid quieter than the analysis. Reduce vertical grid prominence so price, levels and trend lines lead the eye.
• Name the market and timeframe in plain English.For example, “Crude Oil Futures: 4-Hour Chart”; a ticker alone is not a sufficient reader-facing title.
• Choose the visible history deliberately. Too many bars compress candles and opening/closing ticks. Larger labels and a suitable number of bars matter more than background colour alone. Keep click-to-enlarge available for fine detail.

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. Contrast alone does not guarantee that a one-pixel line survives image scaling; check the exported image at the size readers actually see.

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".

Not allowed

The typical AI template look, decided on 29 September 2026. Modern and minimal, but not old-fashioned. None of these come back, not even sparingly:

• Small uppercase labels above headlines ("eyebrows").
• Coloured left borders on boxes, quotes and notes.
• Numbered cards like "01, 02, 03".
• Rows of big numbers as decoration.
• Pill buttons and chips with fully round ends.
• Cards inside cards, soft shadows, big rounded corners.
• Gradients, glow, generic icons, dot or grid backgrounds.

Things that really are round stay round: the portrait photo and the round back-to-top button. Since 8 October 2026 no page uses any of these any more; new pages must not bring them back.

One dark block

At most one dark block per page area. The navy hero stays on the homepage; forecast and post headers are black on white since 29 September 2026.

Summary and FAQ

The summary "… in 30 seconds" is a dark box, the FAQ has a dark heading strip with light questions below. Hero colours only: navy, white, light blue #b9ccff. No labels like "In 30 seconds" or "FAQ" above the headings. Rejected: pastel with badges and ticks, coloured left bars, yellow as an accent.

Headings

Two-tone H2 in posts and forecasts: bold black up to the first colon, the rest regular in navy. Write new H2 as "Topic: statement".

Forecast summary

Exactly four items: price now, short term, key support, next target. About two lines each, key numbers in bold, no bold italic. An odd last card runs full width.

Scenario cards

Bull case light green, bear case light red, found by the heading. All other cards neutral.

Forecast sections

Heading, then the chart, then the explanation, then the levels. Charts run the full width of the column next to the sidebar.

Emphasis

Each paragraph gets one bold italic anchor and two to four bold key terms, in posts and forecasts, as on the German site.

Contents list

Automatic from four H2 sections up. From 1280px the sections sit in the left sidebar under the current market or topic and the current one is marked; below that it is a box to open. The author box is its last entry on posts.

Charts

Every chart goes through ChartFigure.astro and can be opened larger by clicking it. New exports are labelled in English; older charts with German labels are replaced when a forecast gets new charts.

Real content first

Karsten's charts, his photo and price levels beat decoration. Software comparisons get real screenshots, knowledge articles get diagrams, and every new article starts with a small image plan.

Logo

Made by scripts/logo/make-logo.py, never edited by hand. White version on dark grounds, never the logo blue on chart navy.

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

Open questions

An honest list, so nobody designs into a gap that is already known. Karsten decides each of these.

• Forecasts and blog in the step 2 look. The font is site-wide since 2 October 2026; thin lines, 2 to 4px corners and chart navy follow page type by page type.
• The summary and FAQ boxes use chart navy, the rule says hero navy. AGENTS.md says #0f2a5c. The stylesheet has used #0d1b33 since 29 September 2026, 18:51, changed in the same commit as a Nasdaq update and not written down. Step 2 plans chart navy as the brand colour anyway, so this is either kept and recorded, or set back.
• Two navies, one brand colour. Hero navy #0f2a5c and chart navy #0d1b33 both live on the site. Step 2 would make #0d1b33 the brand colour, which touches the homepage hero, the links and the second half of every two-tone H2.
• Corners. Today 6 to 12px, the target is 2 to 4px. It changes every card, box and image at once, so it belongs to the homepage sample.
• The palette is only half named. Six colours are variables, the others are written into the components that use them. If a navy changes, those 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. A new font in step 2 is the moment to fix this.
• Older charts still carry German labels in their pixels.New exports are English. The old ones are replaced market by market.