Phase 2 · Design playground

Ngunnawal Skies style tile

Every colour, font and building block in one place. Flip the theme with the toggle in the header. Colours live in app/globals.css; edit a hex, save, and refresh to see the swatches and contrast ratios update.

← Home

Hero styles

The home page hero uses the photo, zoomed in on the coral streaks. The footer shows the same photo as a wide panorama. The pure-CSS gradient is kept for card art and anywhere a photo would be too busy.

In use · Home page hero

Hi, I'm Ben C, a full-stack developer in Canberra.

See my work Get in touch

Pure CSS gradient

The same sky, drawn in CSS

Cream to peach to coral-pink to gold, taken from the photo. Crisp at any size, and weighs nothing.

Brand marks

The “Ben See” glasses are the favicon and header mark, redrawn as SVG from the original 16px icon. The stacked ABC wordmark is a placeholder in the footer until the redesign is ready (brief in design/LOGO_BRIEF.md).

Ben See glasses · 16, 24, 44, 96 and 160px

Apps by Ben C

ABC wordmark (placeholder) · follows the theme

Colours

Background

--bg · …

Page background

Surface

--surface · …

Cards

Surface 2

--surface-2 · …

Tinted panels, tags

Text

--text · …

Body text (cloud charcoal)

Heading

--heading · …

h1–h4 (slate)

Muted

--muted · …

Secondary text

Border

--border · …

Lines and outlines

Accent

--accent · …

Links, buttons, focus

Slate

--slate · …

Sky blue-grey; text-safe

Peach

--peach · …

Decoration only

Coral

--coral · …

Decoration only

Gold

--gold · …

Decoration only

Contrast checks (WCAG AA)

Normal text needs 4.5:1. Large text, focus rings and UI outlines need 3:1. Peach is expected to fail; that's why it's decoration only.

Aa	Body text--text on --bg	…
Aa	Headings (h1–h4)--heading on --bg	…
Aa	Text on tinted panel--text on --surface-2	…
Aa	Muted text--muted on --bg	…
Aa	Muted on tinted panel--muted on --surface-2	…
Aa	Links--accent on --bg	…
Aa	Links on cards--accent on --surface	…
Aa	Button text--accent-contrast on --accent	…
Aa	Slate text--slate on --bg	…
Aa	Focus ring--accent on --bg	…
Aa	Peach as text (don't)--peach on --bg	…

Typography

Heading 1

Heading 2

Heading 3

Lead paragraph. I build, deploy and maintain production web apps, including medtech and fintech platforms.

Body text. Before becoming a developer, I spent 15 years in research, from theoretical physics to gravitational-wave publications and national statistics.

Small muted text, for captions and metadata.

Font pairs

Every pairing tried so far, with the reason it did or didn't make the cut.

Plus Jakarta Sans + Nunito Sans

✓ Chosen

Full-stack developer in Canberra