Design foundations — heyrian.dev

Brand / The mark

One idea, two scales.

A layered folded-knot for the header, the tab, and wherever heyrian travels.

Header lockup

heyrian.dev

BrandMark + wordmark

Favicon at working sizes

16×16

32×32

64×64

The same connected geometry stays recognizable when it has only 16 pixels to work with.

Depth studies

Three ways to make the mark feel dimensional.

Stack is the active mark; Facet and Fold remain available as explorations.

01 / Facet

Cut planes

Shadowed faces make the mark feel machined and precise.

facet / front + side

02 / Stack

Active mark

Quiet extrusion

Offset layers give the existing geometry a subtle physical lift.

stack / back + face

03 / Fold

Ribbon turn

Overlapping strips suggest a continuous form turning through space.

fold / overlap + shadow

01 / Foundations

Color, type, and a little breathing room.

Neutral by default. Color has a job.

Canvas

--surface

The page beneath everything.

Raised

--surface-raised

Cards and open disclosures.

Subtle

--surface-sunken

Grouped controls and quiet areas.

Border

--border

Structure without visual weight.

Ink

--ink

Headings and primary content.

Language

--color-primary

An accent that follows your choice.

Typography

Start with the idea.Lexend · headings

Then make it concrete, one example at a time.Inter · reading

stack.push(next)System mono · code

Spacing & shape

4

8

12

16

24

32

sm

lg

xl

pill

02 / Components

Small pieces, shared everywhere.

Native controls with a consistent feel.

A language is a lens

The idea stays the same. The code and accent follow the language you choose.

Showing TypeScript in the example below.

Actions with a clear hierarchy

Filled for the main action, a soft accent for emphasis, and an outline for quieter choices.

Useful labels

PatternData structureConceptTrade-off

TypeScriptGoPython

Room for the extra detailOpen a disclosure

Keep the first explanation focused. An implementation detail or a longer example can sit one step deeper, ready when the reader needs it.

03 / Reading

An idea beside its implementation.

Stack

The last thing in is the first thing out.

Think about a history of changes. Add a new change to the top. When you undo, take the most recent change off first.

That order is what makes a stack a stack: last in, first out. The container and method names can change from one language to another.

push adds an item to the top.
pop removes and returns the top item.
An empty stack needs a deliberate response.

A short layout specimen for the lessons to come.

stack.ts

const history: string[] = [];

history.push('First change');
history.push('Latest change');

// The most recent item comes off first.
const latest = history.pop();
console.log(latest); // Latest change

04 / Workflow surfaces

Give the canvas the room.

Composition lives in the rails. Thinking lives in the path.

untitled flowcanvas-first

↥RequestEntry

◆ApplicationService

↔QueueDelivery

▤DatabaseDurable state

+ drop a node to extend the path

A sidebar can hold the vocabulary and the selected-node decisions. The canvas should stay wide enough for relationships to be read at a glance.

05 / Visualizations

Make the structure visible.

Data, relationships, and the steps between them.

Inspect a value. Follow a connection. Step through a process. Each view makes a different part of the idea visible.

Values & structuresPatterns & algorithmsConcepts & techniques

Memory has a shape

Select a cell to inspect it. In a linked list, follow the pointer to discover the logical order.

Adjacent values · address = base + index × 4 bytes

index 0 at 0x100 holds 12.

Schematic addresses, not a runtime memory capture. The array models four adjacent 32-bit values; linked nodes are shown in address order. Object headers, padding, and allocator details are omitted.

A tree, two ways through

Step through a traversal and watch the visit order change. Both use the same tree.

View connections as text

A: Root
B
C
D
E
F
G

A points to B
B points to D
B points to E
A points to C
C points to F
C points to G

Visit order

Pending A
Pending B
Pending C
Pending D
Pending E
Pending F
Pending G

Ordered binary-tree specimen. Breadth-first visits by level; depth-first uses preorder, left child before right. Scroll the diagram horizontally on smaller screens.

Benchmarks with context

Compare values on a shared scale. Select a bar to inspect the reported value.

Sample dataMedian batch time · millisecondsLower is better

ms · zero baseline

Array-backed stack · push · 1.8 ms

What accompanies a real benchmark?

Record the source code and revision, language and runtime version, hardware, input size, warmup, sample count, summary statistic, and spread. Keep the raw measurements alongside the lesson.

Illustrative fixture — these numbers were invented to demonstrate the chart, not measured. No performance conclusion should be drawn from this example.

How work grows

Change the input range or isolate a curve. Points use their actual input sizes on a linear axis.

log₂ n
n
n log₂ n

View data table

Growth of three mathematical functions — exact plotted values
Series	Input size (n)	Modelled work
log₂ n	1	0
log₂ n	2	1
log₂ n	4	2
log₂ n	8	3
log₂ n	16	4
log₂ n	32	5
log₂ n	64	6
n	1	1
n	2	2
n	4	4
n	8	8
n	16	16
n	32	32
n	64	64
n log₂ n	1	0
n log₂ n	2	2
n log₂ n	4	8
n log₂ n	8	24
n log₂ n	16	64
n log₂ n	32	160
n log₂ n	64	384

Mathematical models, not timings or exact algorithmic operation counts. Curves show log₂(n), n, and n·log₂(n) with a coefficient of one; chart scales adjust to the visible series.

Ideas connect to other ideas

Find a concept or select a node to read its relationships. Arrows carry a specific meaning, rather than implying every connection is a prerequisite.

Find a concept9 concepts

Stack

Last in, first out. The behaviour can be implemented with different containers.

Array can implement Stack
Linked list can implement Stack
Stack supports Depth-first search