Visual reference / Phosphor

Phosphor.
Design system.

Phosphor brings green terminal type, cyan console frames, and a quiet perspective grid into a readable portfolio. These are the same tokens and components used throughout the site.

Return to the portfolio

[01] Palette

Color with a purpose.

Near-black surfaces create depth. Pale text carries the content; green and cyan establish hierarchy.

Canvas

#050907

--color-canvas

Page background

Surface

#09110d

--color-surface

Panel backgrounds

Raised surface

#0f1c15

--color-surface-raised

Hover states and code blocks

Text

#d6e8dc

--color-text

Readable body copy

Muted

#94ad9d

--color-muted

Supporting text

Phosphor

#76ff9c

--color-primary

Headings and primary actions

Cyan

#91dfe5

--color-secondary

Metadata and secondary accents

Border

#2b4a38

--color-border

Structural lines

Strong border

#4b8060

--color-border-strong

Emphasized panel outlines

Ink

#051008

--color-ink

Text on green actions

[02] Typography

One family. A clear hierarchy.

IBM Plex Mono is hosted locally in regular and bold. The display heading above demonstrates the fluid scale; body copy keeps a comfortable reading rhythm.

type specimenIBM Plex Mono / 400 + 700

Heading / bold

Build with intent.

Lead / regular

Useful software begins with understanding the problem.

Body / 16px minimum / 1.75 line height

A generous line height and restrained reading width keep technical explanations approachable. Bold adds emphasis without introducing another font family.

Metadata / 12px minimum

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 / { } [ ] < >

[03] Components

Frames that organize the work.

Caption bars label content, actions lead somewhere useful, and technology tags remain simple labels.

navigation + actionsinteractive specimens

Navigation

Primary and secondary actions

Explore my work Get in touch

professional workcard + technology tags

01 / NextIp

Customer service platform

I worked on backend modernization and real-time messaging for a multichannel customer service platform.

Read the professional work summaries

[04] Article primitives

Room for the details.

Long-form content uses the same palette, spacing, and borders. Code and tables scroll within their own frames on small screens.

reading surfaceprose / code / table

A shared visual contract

A token such as --color-primary carries one role across headings, actions, and selected navigation. Reusing that role keeps the interface consistent.

Keep content readable before adding atmosphere.

export const palette = {
  primary: '#76ff9c',
  secondary: '#91dfe5',
} as const;

Article primitive reference
Element	Purpose	Behavior
Inline code	Name a token or identifier	Subtle raised surface
Code block	Explain an implementation	Local horizontal scrolling
Blockquote	Emphasize a useful principle	Phosphor border accent
Table	Compare structured information	Outlined rows and readable headers

[05] Principles + accessibility

The interface serves the content.

visual principlesclarity / restraint / consistency

Make each detail earn its place.

Use frames to group related content, cyan for supporting context, and green for emphasis.

Keep glow on accents. Give paragraphs open space and a calm reading surface.

Use the spacing scale consistently: 4, 8, 12, 16, 24, 32, 48, 64, and 96px.

accessible by defaultkeyboard / responsive / reduced motion

Readable and usable at every size.

Visible keyboard focus and a skip link support direct navigation.
Actions provide at least 44px of interaction height.
Meaningful headings and link labels describe their destinations.
Responsive panels stack into a single column on small screens.
Reduced-motion preferences preserve the complete static composition.

Phosphor.Design system.