Make room
for a thought.
#000000 / #D3D3D3 / #FF8561
The foundations
Mostly neutral. Deliberately orange.
Orange is a marker, a selection, a point of focus. Click any colour to copy its value.
Typography
One family. Enough range.
JetBrains Mono in 500, 600 and 800.
Hierarchy comes from weight, scale and space.
JetBrains Mono
A curious eye.
A clear point of view.
Aa 0123
Display / ExtraBold / tight spacing
A useful heading.
Heading / SemiBold
Keep a little context around the idea.
Body / Medium / natural spacing
Notes / Observations / 01
Metadata / tabular numbers
Two treatments
The same voice, in different light.
Black is the default. White is an occasional change of pace. The orange changes with the paper.
Make room
Keep a
curious eye.
#FFFFFF / #000000 / #E8512A
For small text on white, pair black type with an orange marker. Save the orange itself for larger type and graphics.
Structure
A page with a clear rhythm.
A rule, not a shadow.
2px structural lines on the site.
1px rules in the compact extension.
A little editorial weight.
Double rules for a major division.
Square corners throughout.
Space follows the type.
1.2rem vertical rhythm on the site.
Character-based gutters and widths.
Working examples
A small, useful toolkit.
Try the controls. The examples carry the site's rules and the extension's compact detail into reusable UI.
Buttons & actions
01 / INTERACTIONHard edges. A visible focus ring. An accent with a job.
Fields & feedback
02 / INPUTSelection & settings
03 / CONTROLSupporting context is visible. Standard spacing.
Filters & collection rows
04 / BROWSEStart with a better question
An idea to come back to.
A smaller, calmer toolkit
A useful tool, with a clear purpose.
Leave room for the unexpected
A note from the margins.
3 example entries
Charts & signals
05 / DATAOne series in focus
Illustrative seriesEarlier → later
Demonstration values. Actual charts need their data and source.
Editorial card
06 / CONTENTA personal note
Some things deserve a closer look.
COLLECT / QUESTION / COME BACK TO IT
Sample editorial copy.
Pixel loaders
07 / MOTIONSquare chase
Pixel steps
A short demo. No files are sent.
Orange pixels carry the motion. Reduced-motion settings keep the marks still.
Progress & placeholders
08 / WAITINGIllustrative progress. Ready to start.
Keep the layout in place while content loads.
Status & notices
09 / FEEDBACKA local preview
Your changes appear in this example only.
Text names the state; the marker adds emphasis.
Empty state
10 / FIRST USERoom for a first thought.
Collect an idea you want to come back to.
Look a little closer
Your first example thought.
Example collection is empty.
Pagination
11 / NAVIGATIONDisclosure & reading
12 / CONTEXTWhen should the orange appear?
Use it to identify the selected item, a chart point or a short annotation. A little space around the accent gives it more presence.
How does the image treatment work?
The site's photos use monochrome halftone dots on a fixed grid. Text and charts stay crisp. The dot sphere in this showcase is an original procedural study.
An expanding box of possibilities
More dots. More things to try.
Halftone objects, paper textures, little marks and loose ends. Take a piece, change it, see where it belongs.
Exploration
Original vector studies for covers, slides, backgrounds and the margins of a page.
SVGs have transparent backgrounds, except the original extension mark.
Halftone playground
Dots can do more.
A sphere, a wave, a soft edge. Change the form, dot shape and colour, then export a piece of your own.
Live study / vector halftone
SPHERE / CIRCLES / 7PX GRID
A few ways to change it.
Transparent by default. PNGs export at 1600 × 1100. These are graphic studies; the photo shader keeps its own recipe.
Background studio
Try a little atmosphere.
Halftone edges, fading dots, contours and quiet grids. Leave some clear paper for the words.
MIGUEL CORDERO COLLAR / PERSONAL NOTESA place for
A place for
unfinished ideas.
A small observation. A question to follow.
Something worth coming back to.
Make it yours.
Exports the background only, at 1200 × 720. Controls and sample copy stay in this page.
In context
A system that travels.
The same type and geometry can become a cover, a slide or a note.
Cover study / Black default
A few things
I keep an eye on.
NOTES, PEOPLE & IDEAS ↗
Slide study / Dark
What changes
when we try?
ONE QUESTION TO TAKE WITH YOU.
Notebook study / Occasional white
An idea
taking shape.
OBSERVATIONS IN PROGRESS.
Chapter study / Dark
Find a
new angle.
A DIFFERENT WAY INTO THE QUESTION.
Original compositions and sample copy. The decorative motifs remain experiments.
Motion studies
Motion you can put to work.
Quick feedback for the interface. Slower dot studies for covers, headers and quiet holding screens.
Exploration
Live studies in the same ink, paper and orange. Freeze a frame, or play with the pace.
Try the interaction
A few useful moves.
Try an entrance, a contextual panel, an undo or a deliberate hold. Each example shows how motion supports an action.
Editorial reveal
240ms / 45ms staggerA personal note
A little room
for a new idea.
One entrance. Then the words stay still.
A short introduction for covers and occasional editorial pages.
Changing form
180ms / 4pxA small bridge between different graphic forms. Slider updates stay direct.
Progress to completion
200ms / linear0 / 4
Ready to startA short demonstration with four sample items.
Confirmation where you act
160ms / label changeCurrent accent token
--mcc-accent: #E8512A;
The label confirms a successful copy, then returns to the original action.
Context from its trigger
200ms / scale .95A little context.
Options stay near the thing they change.
An anchored popover with native outside-click dismissal and Escape.
A panel from the edge
280ms in / 200ms outA native dialog brings supporting context in from the right and returns focus on close.
A change you can undo
160ms out / 180ms inRoom for another thought.
Keep the useful details.
An example item, ready to remove or restore.
One sample item. Removal is reversible.
Make the action deliberate
2s hold / 200ms cancelExample is safe
A quick click changes nothing.
Hold for two seconds to clear this demo. Release or move away to cancel. Keyboard opens confirmation.
Choose this tab to start the live studies.
The travelling orange passes across the rotating objects, wave field and terrain. Dot orbit and Dither current use Paper Shaders 0.0.81, bundled locally under Apache 2.0. The other five are original Canvas studies. Motion pauses in hidden tabs and outside the view; reduced-motion preferences start with stills. “Save frame” downloads a PNG of the current image.