Skip to content
</>Codeo's
Workshop
</>

Codeo'sWorkshop

Design System

A curious place where code is crafted with care. Warm, rustic and focused on what matters.

</>

01.Colors

Core palette

Deep Charcoal

#0F0F11

Wood Brown

#2A1E15

Leather Brown

#3B271A

Copper

#8A5A2B

Teal Cyan

#4CC9D6

Warm Beige

#E6D6B3

UI states

Default

#241B11

Hover

#362A1A

Active

#1F4C52

Disabled

40% opacity

Highlight

#2E6E78

Paper & notes

Note Yellow

#E6C46A

Note Tan

#D9B98A

Note Rose

#E9B9A0

Parchment

#EFE2BD → #CDB178

Surfaces and text are CSS custom properties (--c-plate, --c-cream, …) so the lantern switch in the header re-lights every panel without touching a single component.

02.Typography

Aa

Headings — Modak

H1 — The Code is Read More Than It’s Written

H2 — Write Things Well

H3 — One Thing at a Time

Body — Inter

Good code is read more often than it is written. Make it easy to read and hard to misunderstand.

Regular·Medium·Semibold

Support faces

// Code — JetBrains Mono, all snippets and hex values

Handwritten — Caveat, sticky notes & parchment signs

Panel header — Inter Semibold, letterspaced caps

03.Icons

SVG icons with a hand-crafted and slightly engraved look. Copper at rest, teal glow on hover. Every category in the CMS picks its icon from this set.

04.Illustration Style

</>
  • Codeo the Golem: curious, friendly, crafted from code and curiosity.
  • Warm lighting, cozy workshop, rustic materials.
  • Mix of 3D illustration and hand-crafted touches.
  • Vector Codeo ships as the fallback — upload rendered artwork to the media collection and it takes over.

05.Components

Top navigation — active link glows teal with underline

</>

Codeo’s
Workshop

Sidebar — categories with counts, active plaque state

Categories

Buttons — wood plank primary, ghost secondary, text link

Explore articles View on GitHubLearn more
Text Link

Form elements

▼

Tags / badges — active state in teal

Code CraftClean CodeRefactoringTestingDev Tools

Meta row

May 10, 2025 · 6 min read · Intermediate

Notes / stickies

Simplicity is the ultimate sophistication.
Small steps.
Big impact.
Ship with care, not with pride.

Code block — with language footer & copy action

// Write code that tells a story
function createClarity() {
  return cleanCode +
    thoughtfulDesign +
    empathy;
}
language: js

Code comparison — Bad → Better

// Bad
int d;
List<T> list;
boolean f;
// Better
int userAge;
List<Order> pendingOrders;
boolean isEligible;
“
// Code is read more often than it is written.
// Make it easy to read.

Panels

About Codeo

</>

Codeo is a curious Code Golem who loves clean code, clever solutions and quiet late nights in the workshop.

Learn more

Featured project

Codeo Utils

A collection of tiny utilities that solve real developer problems.

View on GitHub

Codeo’s Mantra

“Code is not just what the computer reads. It's what humans understand, trust and improve.”

Subscribe

Get ideas, tips and updates from the workshop.

Article header

Clean Code

Writing Code That Tells a Story

Good code is read more often than it is written. Make it worth reading.

</>

By Codeo

May 10, 2025 · 6 min read · Intermediate

Parchment quote poster

“Write code that tells a story. Write it well. Write it clearly. Write it simply. Write it for others to read.”

— Uncle Bob

Thanks for reading!

Illustration slot — hero & card scenes

</>
</>

06.Textures & Materials

Dark Metal

Brushed Copper

Wood Planks

Leather

Parchment

Realistic textures that bring warmth and depth to the interface. All rendered as layered CSS gradients — swap for image textures in production if needed.

07.Spacing & Layout

8px grid system — every margin, padding and gap is a multiple of 8.

64
48
32
16
8

Every component on this page is the same code the home page and article pages render — this is documentation, not a copy.