Style Guide - Kenten Au Portfolio

Interactive Elements

In-text link

CSS selector:

Sample code:


          Every decision is backed by <a href="#">quantitative
          data</a>, not guesswork.

Rendered element:

Every decision is backed by quantitative data, not guesswork.

Navigation Link

CSS selector:

.nav-link, .nav-link-active

Sample code:


          <a href="#" class="nav-link">My Works</a> <a href="#"
          class="nav-link nav-link-active">Home</a>

Rendered element:

My Works Home

Buttons

CSS selectors:

.btn.btn-primary, .btn.btn-ghost

Sample code:


          <a href="#" class="btn btn-primary">View My Works</a>
          <a href="#" class="btn btn-ghost">Get in Touch</a>

Rendered element:

View My Works Get in Touch

Call-to-action button

CSS selector:

.work-card-cta

Sample code:

<div class="work-card-cta">View project</div>

Rendered element:

View project

Image as a Link

CSS selector:

.work-card-img

Sample code:


          <a href="#"> <img class="work-card-img"
          src="images/p1-banner.jpg" alt="Foodie Buddy banner"> </a>

Rendered element:

Text Elements

Headings

CSS selectors:

h1.hero-name, h2.section-title, h2.project-title, h3

Sample code:


          <h1 class="hero-name">Kenten Au</h1> <h2
          class="section-title">Where I've worked</h2> <h2
          class="project-title">Foodie Friends</h2> <h3>Data
          Scientist Intern</h3>

Rendered element:

Kenten Au

Where I've worked

Foodie Friends

Data Scientist Intern

Eyebrow label

CSS selector:

.eyebrow

Sample code:

<p class="eyebrow">01 - About</p>

Rendered element:

01 - About

Paragraphs

CSS selectors:

p.lead, p

Sample code:


          <p class="lead">I sit at the intersection of design and
          data.</p> <p>What sets me apart is how I get there:
          evidence over assumption.</p>

Rendered element:

I sit at the intersection of design and data.

What sets me apart is how I get there: evidence over assumption.

Skill / tag chips

CSS selector:

.chips, .chip

Sample code:


          <div class="chips"> <span class="chip">Figma</span>
          <span class="chip">Python</span> <span
          class="chip">TensorFlow</span> </div>

Rendered element:

Figma Python TensorFlow

Combined Elements

Floating Navigation

CSS selector:

.nav-shell, nav.nav

Sample code:


          <div class="nav-shell"> <nav class="nav"> <a
          class="nav-brand" href="#">KENTEN AU</a> <a
          class="nav-link nav-link-active" href="#">Home</a> <a
          class="nav-link" href="#">My Works</a> <a class="nav-link"
          href="#">Contact</a> </nav> </div>

Rendered element:

Work Card

CSS selector:

a.work-card

Sample code:


          <a class="work-card" href="#"> <img class="work-card-img"
          src="images/p1-banner.jpg" alt="..."> <div
          class="work-card-body"> <div class="work-card-main"> <span
          class="project-tag">Mobile App · Design Lead</span> <p
          class="project-index">Project 01</p> <h2
          class="work-card-title">Foodie Friends</h2> <p
          class="work-card-desc">A privacy-first food app.</p>
          </div> <div class="work-card-cta">View project</div>
          </div> </a>

Rendered element:

Mobile App · Design Lead

Project 01

Foodie Friends

A privacy-first food recommendation app, designed and shipped on evidence.

View project

Info Card

CSS selector:

.info-card

Sample code:


          <div class="info-card"> <h3>Roles I'm aiming
          for</h3> <div class="chips"> <span class="chip">UX
          Designer</span> <span class="chip">Data
          Scientist</span> </div> </div>

Rendered element:

Roles I'm aiming for

UX Designer UX Researcher Data Scientist

Experience Item

CSS selector:

article.exp-item

Sample code:


          <article class="exp-item"> <div class="exp-role">
          <h3>Data Scientist Intern</h3> <p
          class="exp-company">AtkinsRéalis</p> <p>Tuning CNNs
          with Keras and TensorFlow.</p> </div> <div
          class="exp-when">Sep 2025 - Jan 2026</div> </article>

Rendered element:

Data Scientist Intern

AtkinsRéalis - Bengaluru, KA

Tuning CNNs with Keras and TensorFlow, and preprocessing large vision and regression datasets.

Sep 2025 - Jan 2026

Process Step

CSS selector:

.process, .process-step

Sample code:


          <div class="process"> <div class="process-step">
          <h3>Research & evidence-gathering</h3> <p>Built
          mood boards and studied heat maps.</p> </div> </div>

Rendered element:

Research & evidence-gathering

Built mood boards of comparable apps and studied heat maps of how users navigate them.

Brand Elements

Fonts

Display font: Anton

Designed with evidence

Headings & body: Manrope

Designed with evidence

Labels: Space Mono

Designed with evidence

Colour Palette

Page Black

#0e0d0b

Card Brown

#1b1813

Gold

#c8a24c

Bright Gold

#e0bd6b

Primary Text

#f3ede0

Muted Text

#a39d8f

Brand Imagery

Hero Portrait

Foodie Friends Banner

Object Detection Banner

↑Top