Design System

v1.0 2024

14

COMPONENTS

05

COLOR TOKENS

01 / Foundations

Typography

Display H1

Digital Architect

6rem / 1

Heading H2

Design & Strategy

3rem / Tight

Heading H3

Case Studies

2.25rem / Tight

Body Large

Thoughts on the intersection of design, technology, and human psychology. Exploring how we can build better tools for thought.

1.125rem / Relaxed

Label / Mono

Currently available for Q4 2024

0.75rem / Widest

02 / Foundations

Colors & Surfaces

Main

#EAEAE5

Stone 900

text-stone-900

Stone 500

text-stone-500

Stone 300

border-stone-300

White

bg-white

Stone 200

bg-stone-200

03 / UI Elements

Components

Buttons & Actions

Default

Secondary Action Outline

Text Link Inline Link

Badges & Lists

Glass Badge

List Item

Date Label

Hoverable List Title

Project Card

01

Project Name

Description of the project showing hover states on parent.

Image Area

04 / Foundations

Layout & Grid

12 Column Grid System

05 / Interaction

Motion & Animation

Infinite Marquee

Motion System • Easing: cubic-bezier(0.16, 1, 0.3, 1) • Duration: 1.2s •

.reveal

Scroll Reveal

.reveal .delay-200

Staggered Reveal

.reveal .delay-500

Long Delay

Masked Text Reveal

Animation

06 / Assets

Iconography

solar:atom

solar:layers

solar:clock

solar:cup-star

solar:arrow-up

solar:check