Styleguide
Design system
- Version
- 1.0
- Typefaces
- Degular, Input Mono
- Grid
- 12 columns, 24px gutter
- Themes
- One site theme, six project themes
The system this portfolio is built on: one indigo accent, two typefaces, a 12-column grid and a handful of components. Every project page re-points these tokens to its own brand.
The language borrows from two places. Swiss International Style gives it the strict grid, the big grotesk headings, the hairline rules and the single accent. American signage gives it its details: the Facts panels are set like a Nutrition Facts label, and project numbers are highway exit tags.
01 /
Brand
Archery Luna.
- Accent#615FFFRGB:97/95/255
- Accent strong#4F39F6RGB:79/57/246
- Accent soft#7C86FFRGB:124/134/255
- Ink#111111RGB:17/17/17
- Ink 2#333331RGB:51/51/49
- Muted#5C5C58RGB:92/92/88
- Paper#FAFAF9RGB:250/250/249
- Surface#FFFFFFRGB:255/255/255
- Placeholder#E8E8E5RGB:232/232/229
The accent is my favourite colour, which is why it leads the palette. I love its richness: a deep, saturated indigo that stays vivid on paper white and holds its own next to the ink. And in the dark it can read as a bold, beautiful blue.
Degular Display
- RegularCurious
- ItalicCareful
- BoldBuilt
I'm a developer who loves to build cool and interesting projects.
01 / SELECTED WORK · LONDON, UK
02 /
Type
One family at every size: Degular Display Bold for display and headings, Degular Text for running copy, and Input Mono for labels.
- --text-displayclamp(76px, 12.5vw, 200px) / 700Johan Sebastian Luna
- --text-h2clamp(44px, 5.4vw, 80px) / 700Johan Sebastian Luna
- --text-contactclamp(44px, 7vw, 112px) / 700Johan Sebastian Luna
- --text-projectclamp(36px, 4vw, 60px) / 700Johan Sebastian Luna
- --text-leadclamp(22px, 2.2vw, 32px) / 400Johan Sebastian Luna
- --text-statementclamp(26px, 2.8vw, 40px) / 400Johan Sebastian Luna
- --text-body-lg22px / 400Johan Sebastian Luna
- --text-body17px / 400Johan Sebastian Luna
- --text-facts-title32px / 700Johan Sebastian Luna
- --text-facts-row15px / 400Johan Sebastian Luna
- --text-tag19px / 700Johan Sebastian Luna
- --text-label13px / 500 / monoI build stuff!!
03 /
Grid
Twelve columns with a 24px gutter inside a fluid page margin. Below 820px every column spans the full row.
04 /
Components
The pieces every page is assembled from. Project themes restyle them through the same tokens.
Rule
components/ui/Rule.tsxMonoLabel
components/ui/MonoLabel.tsxExitTag
components/ui/ExitTag.tsxFloralityWhiskr
FactsLabel
components/ui/FactsLabel.tsxFacts
- Role
- Developer
- Stack
- React, Next.js, TailwindCSS, TypeScript, etc.
- Based in
- London, UK
- Status
- Working on Florality LTD and the next phase of Luna Cleaning Solutions.
- Interests
- Video games, Anime, Building personal projects
Project Facts
- Owner
- Florality LTD
- Role
- CEO and Founder
- Year
- 2026 - Present
- Stack
- React, React Native, Express, Expo, Next.js, TailwindCSS, TypeScript, TRPC, PostgreSQL, PowerSync, MongoDB, Redis, Kubernetes, Cloudflare R2, Clerk, and PlanetScale
Project Facts
- Owner
- Florality LTD
- Role
- Full-stack
- Year
- 2026 - Present
- Stack
- React, Next.js, Go, PostgreSQL, Redis, Kubernetes, Cloudflare R2, Clerk, and PlanetScale
- Live
- whiskr.art
Nutrition Facts
Coca-Cola Original
My favourite drink
1 serving per container
Serving size1 can (355mL)
Amount per serving
Calories140
% Daily Value*
- Total Fat 0g
- 0%
- Sodium 45mg
- 2%
- Total Carbohydrate 39g
- 14%
- Total Sugars 39g
- Includes 39g Added Sugars
- 78%
- Protein 0g
*The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
SiteHeader
components/ui/SiteHeader.tsxSectionHeader
components/ui/SectionHeader.tsx01 /
Selected Work
7 entries
03 /
Contact
ProjectRow / ProjectIndex
components/ui/ProjectRow.tsxHover a row for its preview (820px and up, with a mouse)
- 01
Florality
In March 2026, after simply plural announced its shutdown, someone joked about me buying it, I took the idea seriously and started working on an alternative to Simply Plural. The result is Florality.
CEO and Founder
- 02
Whiskr
A platform for people to upload their own custom markdown or HTML pages, called pawprints. This is an alternative to Rentry.
Full-stack
- 03
Ladybyrd
A toyhouse alternative for artists to upload their work and find people who want to commission them.
Full-stack
Media
components/ui/Media.tsxNextProjectBar
components/ui/NextProjectBar.tsxContactBlock
components/ui/ContactBlock.tsx03 /
Contact
BackToTop
components/ui/BackToTop.tsx05 /
Project guides
Each case study documents the brand it was built in: logo, colour, type and icons, set in the project's own fonts.