01 — Main page
Home, navbar, footer. body default.
Colors
Buttons
Say hello
Footer CTA. Hover to expand.
Social icons
Used in footer (and author tooltip). 32×32, hover: scale + shadow.
Inputs
Notes footer subscribe. States: placeholder, error, disabled.
Typography
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Spacing scale
Margin/padding tokens. Bar height = actual pixel value.
Border radius
Tokens used across the site. --border-radius = 12px (globals).
Hovers
Link: underline darkens. Button: background + shadow. Card: optional scale.
Card (glass hover)
Homepage portfolio tile. Empty box with glassy blurred overlay on hover. backdrop-filter: blur(7.5px), background: rgba(0,0,0,0.25).
Context menu (navbar logo)
Right-click the logo in the navbar to see this. Shown here for reference.
Author (Last edited by)
Notes footer. .last-edited-by. Hover avatar for name & title tooltip.
Last edited on Dec 11, 2024 by
Don't use the logo like this
Keep proportions, approved colors, and no extra effects.
Don't use the sygnet (icon) like this
Dark background. Keep proportions, approved colors, clear space.