The system this site ships from
Color, type, space, radius, shadow, and motion live in one file. The buttons, cards, titles, info rows, and fields below are the same components used on the home page, the sidebar, and the contact form.
See the interfaces in productionColor
Accent, the included and not-included marks, text, and the surfaces cards and fields sit on.
#07b5ff
Primary actions, links, status
#13c37d
Included checks
#ff4d67
Marks for what a package leaves out
rgba(250, 250, 252, 1)
Headings and primary text
rgba(140, 140, 142, 1)
Body copy
rgba(100, 100, 102, 1)
Meta labels
rgba(30, 30, 40, 1)
Page background
rgba(25, 25, 35, 1)
Portrait and media wells
rgba(32, 32, 42, 1)
Sidebar and field icons
linear-gradient(159deg, rgba(45, 45, 58, 1) 0%, rgba(43, 43, 53, 1) 100%)
Cards and panels
linear-gradient(159deg, rgba(37, 37, 50, 1) 0%, rgba(35, 35, 45, 1) 100%)
Form fields
Type
Familjen Grotesk for headlines. Inter for body copy. Sizes and weights used by headings, buttons, and body copy.
Space
The steps already in the layout: chip gaps, sidebar padding, card padding, banner padding.
Radius
Sharp panels stay square. Pills are reserved for status and chips.
3px · Quotes and status messages
15px · Date pills
999px · Status pill and skill chips
Shadow
Two elevations, plus the glow on a hovered link.
Buttons and raised rows
Cards and panels
Link hover glow
Motion
One easing. Duration is the only choice: fast, medium, or slow.
Hover a row. The dot uses that duration.
Components
Each one reads the tokens. Change the component, or change a token, and the site follows.
Info row
Role:
Front-end · React · Next.js · CRODegree:
BA, Visual CommunicationLocation:
Lakewood, COStatus:
Senior product seat
The same rows as the sidebar.
Form field
The contact form uses these fields and this button.