critloop
01 / StrongerBold 700 · −0.035em
From feedback
to working code
The identity behind prototyping
that starts in your codebase.
A reference to the colors, typography and visual language already used across the Critloop deck and product site.
The loop, in two circles.
Two overlapping rings pair with a lowercase Space Mono wordmark. Use the rings without a background beside the name. Only the app icon uses a container: a square Onyx field with Wheat and Nectarine rings.
PRODUCT ICONcritloop
SPACE MONO · 400 · OPENExisting geometry
340 × 260 viewBox · radius 100 · stroke 19
Circle centers: (130, 130) and (210, 130).
Wordmark
Space Mono Regular (400), with −0.03em tracking. Always lowercase. Never add a period or decorative dot. Scale the lockup as one unit: ring height 0.8em, width 1.09em, and a 0.25em gap. Align centers and preserve generous surrounding space.
Wordmark studies
Compare the same lowercase wordmark in Archivo, Space Mono and JetBrains Mono. Space Mono 03 / Open is the selected wordmark; the other treatments remain available for comparison.
Space Mono · 03 / Open selected
critloop
02 / LighterRegular 400 · −0.035em
critloop
03 / Open · SelectedRegular 400 · −0.03em
critloop
04 / Subtle emphasisRegular 400 + Bold 700 · −0.035em
Four colors. One palette.
Onyx anchors the interface, Wheat adds warmth, and Nectarine draws attention. White brings clarity to dark-mode text and lifts cards and composers above their ground.
01
Onyx
#0A171DPrimary ink & dark ground
RGB 10 / 23 / 2902
Wheat
#FFF6E9Warm light ground
RGB 255 / 246 / 23303
Nectarine
#FFBD76Accent fills & warm ground
RGB 255 / 189 / 11804
White
#FFFFFFDark-mode text & elevated surfaces
RGB 255 / 255 / 255White creates room to work.
ONYX GROUND / WHITE INKA little lift.
A little lift.
A clearer hierarchy.
Use White for primary text. Mix it into Onyx to bring working surfaces forward.
CARD · 6% WHITE ON ONYX
Review in context
Feedback stays close to the work.
Make this feel more spacious
COMPOSER · 10% WHITE
On Wheat, use a White surface for a clean lift. In dark mode, cards use #19252B and composers use #232E34, both derived from White over Onyx.
One accent. Four roles.
| Token | Use | Wheat ground |
|---|---|---|
--accent | Solid fills: bars, pins, chart wedges | #FFBD76 |
--accent-on | Text on an accent fill | #0A171D |
--accent-ink | Accent text, hairlines, borders, strokes | #AD5A00 |
--accent-inv | Accent text on an inverse surface | #FFBD76 |
Nectarine is a fill color on Wheat. Use the darker accent-ink token for readable accent text.
A clear voice. A precise detail.
Archivo
--displayHeadlines
and primary reading.
The real thing.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
0123456789 &?!
JetBrains Mono
--monoCode, labels
and technical detail.
your repo,
your branch.
your branch.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 / { } →
Space Mono
--uiWordmark and
interface typography.
Build. Review.
Keep going.
Keep going.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 / [ ] ↗
Three grounds.
The same brand.
Use the theme controls at the top right to see the updated shared tokens in use. On Nectarine, the accent inverts to Onyx.
critloop / reviewIn context
A WORKING SURFACE
Refine the real thing.
Bring the conversation into your app.
Ground
Surface 1
Surface 2
Accent
Naming note: the product site calls its Nectarine-based theme “Tangerine” and uses some different surface values. This reference uses the deck’s canonical tokens.
Small parts. Shared rules.
The deck’s primitives read semantic tokens. Surface, cell and chip radii are 10px, 8px and 5px respectively.
REVIEW
Keep it in context.
A surface with a quiet border and a clear hierarchy.
--s1 · --line · --r-surfaceSelected01
--accent · --accent-onIllustrative component specimens using the existing tokens; the original React primitives remain the implementation reference.
Arrive softly. Leave quickly.
The deck’s structural groups rise 18px and fade in on a settling spring. Motion follows reading order, with 55ms between groups. The cover mark draws once on entry.
01 / Draw the loop
Two rings trace in sequence, then hold.
900ms draw · 140ms stagger
REVIEW
Keep it in context
The conversation belongs beside the work.
02 / Settle into place
Content rises 18px in reading order.
320 / 34 / 0.9 spring · 55ms stagger
Feedback
Working code
03 / Move forward
A quick exit gives way to the next step.
220ms exit · 340ms arrival
SETTLE SPRING320 / 34 / 0.9
Stiffness / damping / mass
SWIFT EASING340ms
cubic-bezier(0.22, 0.61, 0.36, 1)
Source guidance: animate structural groups, not individual leaf nodes. The deck also defines a separate pop spring for comment pins and badges.
The system, at the source.
This book brings together the shared design system and current identity direction: four core colors, bare rings, a square app icon, and a lighter wordmark without a period.
Design tokensUpdated CSS · four core colors, three grounds
Download ↓Square app iconSVG · 340 × 340
Download ↓RingsTransparent SVG · 340 × 260 · Onyx and Nectarine
Download ↓breschio/critloop-docs: deck/src/styles/tokens.css Colors, themes, typefaces, radii
breschio/critloop-docs: deck/src/slides/01-cover.tsx Mark geometry, wordmark, positioning
breschio/critloop-docs: deck/src/components/ui.tsx Shared component primitives
breschio/critloop-docs: deck/src/motion.ts Motion values and guidance
public/mark.svg Square app icon
styles.css Product-site application and theme naming