Design system

This is the visual reference for clmartin.dev. It brings the site’s colours, typography and reusable interface elements together so I can see the overall look and feel in one place. The examples use the same global CSS as the rest of the site.

Colour tokens

7 colours

The core neutral palette, one accent and two functional deadline colours.

--my-black #1a1919 Page background
--my-grey #333232 Borders, dividers, subtle surfaces
--my-white #c9c7c2 Primary text
--my-off-white #b3b2ae Muted / secondary text
--dark-pumpkin #ab4e11 Accents, hover states, link underlines, CTAs
--status-soon #fb923c Upcoming deadlines
--status-urgent #f87171 Immediate deadlines

Typography

Trebuchet MS stack

Body is Trebuchet MS with a system fallback stack. Code is JetBrains Mono (loaded locally where it appears). Line-height 1.5, base 1em. Nothing exotic. The goal is legibility, not flair.

.display-heading

Curtis Martin

h1

Page heading

h2

Shadows stretched long across the road.

h3

Shadows stretched long across the road.

h4

Shadows stretched long across the road.

.intro-role

Software engineer and Care Culture co-founder in Sydney.

.intro-copy

Supporting introduction copy uses a larger size, muted colour and a comfortable reading measure.

.eyebrow / .meta-text

Engineering experience

Co-Founder & Director · 2021–present

body

Shadows stretched long across the road, chasing the last light of day as the hills folded into dusk.

inline code

print("Hello youuuu!")

Links

.underline-link

Solid 1.5px pumpkin underline, 4px offset. Hover thickens to 2.5px and the text lightens. Used for inline links in prose.

Here's an inline sentence with an underline-link example so you can hover it and see the thickness transition.

Selected work

Section heading

Optional context

The homepage combines .section-heading with .section-heading-feature for its eyebrow, larger title, optional context, divider and accent bar.

Cards

.card

The base card supplies the border, radius and hover state. Composition classes add the padding and internal typography required by a particular component.

.card

The shared bordered surface used throughout the site.

Care Culture invoicing tool · 2021–present

Invoice-to-CSV

An example using the same project-card composition as the homepage.

Project link

Tags

.tag

Small bordered pills. Used for stack labels on project cards and anywhere a short one-word metadata chip is useful.

TypeScript Svelte 5 SvelteKit Python FastAPI Docker

Interactive controls

Learning primitives

Reusable controls from the Learning tracker: filter pills, disclosure rows, progress and task status.

.filter-pill
.disclosure / .progress-track
1
Complete the accessibility practical
COSC560 Due in 5 days
.due-status
Scheduled Due soon Urgent

Call-to-action buttons

.cta-primary / .cta-secondary

Two flavours: a filled pumpkin primary and an outlined secondary. The primary inverts on hover (fill drops, text becomes pumpkin) rather than darkening.

Lists

.accent-list / article lists

The homepage evidence list uses pumpkin markers. Article content uses its own chevron marker within the .blog-post-content scope.

.accent-list
  • Built internal systems
  • Automated repetitive work
  • Maintained operational tools
.blog-post-content ul
  • Article chevron marker
  • Indented for long-form prose