Engineering Sandbox

Design System

A minimalist black-and-white theme with an orange (#ff4400) accent. Built with Instrument Sans and Inter typography.

Typography (Instrument Sans)

Heading 1 / 5xl

Turning Chaos into Strategy

Heading 2 / 4xl

Professional Journey

Heading 3 / 2xl

Methodology

Body Large / xl

I am a people person bridging the gap between design and tech, Waterfall and Agile. I translate complex problems into elegant, buildable solutions.

Body Regular / base

Expertise in both traditional manufacturing and rapid-growth tech industries. I fluently translate requirements between Waterfall structure and Agile flexibility.

Buttons

Default (Primary)
Outline
Secondary & Ghost
Sizes

Cards & Containers

Standard Card
A simple container for content

Cards feature minimal 1px borders, white backgrounds, and slight orange border + negative Y translation on hover.

Featured Card
For important highlights

Use subtle primary color backgrounds (bg-primary/10) for icons or highlights to keep the aesthetic minimal.

Status Card
To indicate a specific state

Accent borders can be applied via Tailwind border utilities to draw attention while retaining brutalist minimalism.

Separators & Elements

Standard Rule

Dotted Separation
Timeline Accents

Step 1: Planning

Define the minimal aesthetic

Step 2: Execution

Build out components in React

Inputs & Badges

Text Input
Badges
DefaultSecondaryOutline