Ink & Signal
A dark, research-led visual system built for clarity, trust, and evidence-rich storytelling.
This guide documents the portfolio's core visual decisions so new case studies, thumbnails, artifacts, and presentation pages can feel consistent without becoming repetitive.
The portfolio should feel measured, useful, and alive
Research First
Structure pages around problem, evidence, process, and outcome. Visual polish should make the work easier to understand.
Quiet Confidence
Use generous dark space, low-contrast surfaces, and restrained motion so case-study artifacts stay central.
Signal Over Noise
Teal accents mark important labels, outcomes, links, and proof points. Avoid using the accent as decoration everywhere.
Evidence Has Texture
Show real screens, sketches, journey maps, prototypes, and videos in consistent frames with concise captions.
Dark foundations with teal signal
The palette is intentionally narrow. Dark layers create depth; teal marks meaning, motion, and priority.
Ink Black
Primary page background and visual anchor.
Deep Surface
Secondary bands, CTA blocks, and subtle depth.
Section Alt
Alternating case-study sections and process areas.
Primary Text
Headlines, important labels, and high-value content.
Muted Text
Descriptions, captions, body copy, and context.
Signal Teal
Links, emphasis, metric highlights, and active states.
Expressive display type, disciplined body copy
Display · Syne
Use Syne for hero titles, section headings, metrics, and short emphasis. Keep the weight mostly regular so the tone stays editorial rather than loud.
Scale
Reusable patterns for case-study storytelling
Buttons
Use filled teal for primary action. Use tinted ghost buttons for secondary links and contact actions.
Tags & Labels
Small uppercase labels create hierarchy without adding bulky UI. Tags should be short, scannable, and evidence-based.
Project Cards
Cards combine artifact imagery, project type, concise description, and a low-friction case-study link.
Information architecture work framed through research, testing, and iteration.
Outcome Blocks
Use impact strips, result cards, and outcome boxes when the reader needs the takeaway before the details.
Frame process artifacts like evidence
Screens, sketches, prototypes, and videos should sit in consistent frames with restrained overlays and direct captions.
Keep additions consistent without freezing the system
Dark space, measured pacing, and clear copy make complex UX work easier to absorb.
Labels, metrics, and captions should name the work plainly instead of over-explaining.
The portfolio should still feel personal: warm, direct, and rooted in user understanding.
- Use teal to signal emphasis, interaction, and proof.
- Pair every artifact with a short, useful caption.
- Alternate section density so long pages keep rhythm.
- Adding decorative accents that do not clarify the work.
- Using generic stock imagery where real process evidence exists.
- Overcrowding cards with long labels or repeated tags.