Self Aware

Item: Self Aware
Rating: 7.3

Philadelphia design and technology studio building websites for brands.

selfaware.studio Save page

7.3/10MABTU rating

Home

DESKTOP · 1440 × 6,271/ ↗

MOBILE · 390

Section outline · Home

01heroScattered rotated letters on flat yellow panel73
02introLarge serif studio description with read more pill
03workRows of four thumbnails per client with captions2,882
04newsUnderlined serif news links641
05decorationFlat geometric shapes in primary colours
06footerBlack band with scrolling line and social links

Rating · Home

Visual design7.4

UX & clarity7.0

Originality7.0

Craft & consistency7.0

Motion6.5

Performance & a11y9.0

This page scores 7.3; the site score weights the home page double.

Main colours

Light·cream background·vivid

Typography

Clearfaceheading · font · self-hosted Clearfacebody · font · self-hosted Adieuaccent · font · self-hosted

Stack & style

Sanity Tailwind CSS

Minimal Editorial Playful Sticky header Hamburger-only nav Marquee Parallax

Also: Vercel, Google Analytics

Design DNA

Cream canvas with a large serif for body statements and a clean grotesk for the wordmark. The hero is a flat yellow (blue on mobile) panel with the letters of 'Self Aware' scattered and rotated like dropped tiles, followed by a big serif intro and a small blue pill button. Selected projects are rows of four square thumbnails per client with a serif name and one-line description, then a 'View all projects' outline pill, underlined serif news links, a footer of big flat geometric shapes (half circles, rectangles, triangles) and a black contact band with a scrolling line.

Worth borrowing

Scatter and rotate the letters of the studio name inside a flat colour panel as the hero.
Show each project as a row of four square thumbnails with a serif title and one-line summary.
Close with a pile of flat primary-colour shapes above a black contact band.