API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Living style guide
A warm welcome, all the way down.
Not a separate mockup. Every specimen below imports the components used by the site.
Direction: the familiar, slightly off-axis home.
Approved A, grounded in versions/v1 + v2: burgundy on warm paper, peach portrait framing, Newsreader display type and Lato. A personal personal greeting leads; projects carry the substance; the notification stream shares smaller changes from around Burooj's internet.
We considered the activity-first desk and the navigation-first circular index. The welcome stays because it is the direction Burooj selected. The composition revision pairs portrait with introduction and brings the first project into the opening screen. Its layout still awaits Burooj's visual review; preserving the palette is not enough on its own.
The hero, in context
Hey there!
Burooj here!
Frontend developer & designer
I make places on the web. Feel free to look around!
Composition → WelcomeHero imports Heading, Link, and the singular Portrait. The curved arrow below is retained as a historical specimen, no longer placed between the homepage introduction and work.
Circles, without controls
The old menu's unequal burgundy and peach circles return as static artwork beside the desktop introduction. They have no labels, hover effects or click targets and are hidden from assistive technology. Compact layouts omit the cluster so the text and real navigation retain their space.
Foundations
Paper
--color-page Burgundy
--color-accent Peach
--color-surface-strong Note
--color-surface Ink
--color-text Quiet ink
--color-text-soft Rule
--color-border Newsreader gives the page its voice.
Lato does the everyday work: introductions, metadata, navigation, and notes.
Shared colors, type scales, spacing, focus rings and motion timing live in src/design/tokens.css. The decorative corner alone owns its magnetic spring mechanics. Responsive contracts are 40.625rem and 62.5rem. Native media conditions cannot consume custom properties.
Links and wayfinding
A regular menu uses the same typography and link language as the rest of the site. The current destination has a burgundy underline and stronger weight. Every destination stays visible on mobile and works without JavaScript.
Text links use a quiet underline and small directional arrows. Outbound arrows lift with the pointer. Tab has a visible ring. Navigation remains text; stronger rectangular actions are reserved for project destinations.
From parts to real content
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Currently
I’m maintaining bjslab, my home-lab environment for the tools and services I use.
This site Made
The design system has its own little field guide
A working collection of the colors, type, components, and small details behind this site.
Little signals from around my internet.
-
This site Made
-
GitHub Pull request
-
GitHub Pull request
-
This site Project
-
This site Project
-
This site Project
A few things worth sharing, collected by hand.
A note can hold arbitrary content without inventing a new card style.
Beating Shapes
What if shapes could keep time? A black-and-white rhythm experiment that moves geometric forms to the tempo of a track.
A smaller section title
The same heading grammar serves secondary sections.
Work, over time
2024
-
API3 Ecosystem
A discovery site where developers could publish and explore dApps in the API3 ecosystem, combining product UI, data-rich browsing, and supporting content.
Anatomy and contracts
| Component | Parts / slots | Variants | State and boundary |
|---|---|---|---|
| SiteNav | Semantic navigation list → shared Link primitive | Text links; current / hover / focus / press | Always visible and wrapping on small screens. Current page has a strong underline; project details retain the Projects marker. No navigation animation or JavaScript dependency. |
| Link | Label → optional decorative arrow | Text / navigation / action; paper / wine | Native navigation; hover, focus, press, current, disabled. Disabled is a span. |
| Heading | Semantic heading → text or Link slot | Display / page / section / card / label; level 1–4 | Level does not change visual scale. No interactive behavior. |
| MediaFrame | Textured surround → image | Contain / cover | Reserved media space. Optional pointer shortcut beside an accessible title link; no duplicate tab stop. |
| Note | Peach silhouette → arbitrary content slot | Paper silhouette / plain content | Passive. No button behavior or card shadow. |
| TagList | Labeled list → items + editorial separators | One metadata recipe | Not controls; never styled like clickable filters. |
| ProjectRow | MediaFrame + Heading/Link + summary + TagList | Row / stack / feature | Featured work on Home and this guide; ProjectTimeline uses the same primitives for the full chronology. |
| CurrentNote / UpdateEntry | Note + Heading + Link / event glyph + sentence + date + provenance | Canonical current note / mixed notification stream | Projects persist; updates mark anything that changed. Curated events are not live presence. |
| SectionHeading / PageHeader / SectionIntro | Heading + optional context and Link | Section navigation / page title / compact intro | Never duplicate heading typography in the wrapper. |
| LabCard / MediaRail | MediaFrame + Heading/Link / image-video sequence | Lab listing / detail media | Video has native controls, no autoplay. |
| SiteHeader / SiteFooter | Identity + SiteNav / identity + contact Links | Same shared chrome on every route | Active route is semantic; Resume remains available in footer. |
Shared colors and geometry belong to tokens; interaction belongs to its public component; assemblies import their children. The portrait, curve stay singular. Do not paste navigation markup into a page, put raw palette values in a composition, or fork project rows for this guide.