// System

Design System

The visual and interaction foundation of fred6.nl. Tokens, components, and the decisions behind them.

JetBrains Mono Amber accent Dark only CSS custom properties

// Why this system

Decisions

  1. 01

    Amber accent only, no blue tones

    Blue is the default palette of every SaaS product. Amber creates immediate distinctiveness and reads as warm and contemporary in a tech context. A single accent hue enforces discipline — there is no second colour to reach for.

  2. 02

    Dark only. No toggle.

    The site reflects where the work is going — AI, terminal aesthetics, building in the dark. There is no light mode. This is not a portfolio that pretends it was made in 2018.

  3. 03

    Tags are non-interactive labels

    At 5–10 projects, filtering adds complexity without user value. If the portfolio grows to 20+, a dedicated filter row is the right pattern. Until then, scrolling is the interface.

  4. 04

    JetBrains Mono, one font for everything

    The font Cursor IDE ships with. Tech-forward, highly legible at every size, and immediately signals the creative technologist positioning. Self-hosted as woff2 — no external DNS lookup on load. One family covers display, body, and mono — no switching between typefaces.

  5. 05

    CSS custom properties for all tokens

    No JS token files, no build-time transforms, no runtime overhead. Tokens live in tokens.css as native CSS custom properties, consumed directly in component <style> blocks. The browser does the rest.

  6. 06

    cursor: default on non-interactive elements

    A pointer cursor on a non-clickable element is a broken promise. Tags declare their non-interactive nature at the cursor level, before the user commits to an interaction that will not happen.

// Foundations

Color

A single warm accent against a cool-dark neutral base. No blue tones appear anywhere in the system.

Accent — amber

--color-accent hsl(45 75% 60%)
--color-accent-light hsl(45 80% 70%)
--color-accent-subtle hsl(45 75% 60% / 0.12)
--color-accent-fg hsl(45 55% 68%) Text on dark surfaces

Semantic tokens

--color-surface Page background
--color-surface-raised Cards, chips, inputs
--color-border Dividers, outlines
--color-text Body copy, headings
--color-text-secondary Captions, secondary labels

// Foundations

Typography

JetBrains Mono for everything — display, body, and code. All sizes are fluid clamp() values that scale between mobile and desktop without breakpoint jumps.

Type scale

--text-xs The quick brown fox
--text-sm The quick brown fox
--text-base The quick brown fox
--text-lg The quick brown fox
--text-xl The quick brown fox
--text-2xl The quick brown fox
--text-3xl The quick fox
--text-display Display

// Components

Components

Astro components only. No React, no Vue, no Svelte.

Button

Three variants: primary draws attention, ghost holds space, text for low-emphasis cues. Monospace, uppercase, square corners — terminal aesthetic throughout.

Tag

Non-interactive label. cursor: default, user-select: none. Never add click handlers without building the full filter pattern separately.

Design Systems AI Product Design Creative Technology UI Design Figma

Seen enough to want to talk?

Get in touch