— Design Resources
nstance
Brand Spec
Colours, typography, motion, and assets for use in motion graphics and design work. Toggle the theme button to preview dark mode values.
— 01 Brand Mark
[ ] bracket mark
The core brand mark. Renders in accent orange on all brand surfaces. Available as PNG with transparency.
icon128.png — 128×128
icon-large.png — full res
— 02 Colour Palette
Brand
Accent — Light
#c96422
Accent — Dark
#b07848
Light Mode
Background
#faf9f6
Surface
#f2ede7
Surface Hover
#ece4d9
Surface Active
#e4d9cc
Border
#e0d6cb
Border Strong
#c8bdb0
Text
#1a0d07
Text Secondary
#6b5748
Text Muted
#9c8a7d
Success
#2d7a4a
Dark Mode
Background
#17120e
Surface
#211810
Surface Hover
#2b1f16
Surface Active
#36271c
Border
#3a2a1f
Border Strong
#503a2c
Text
#ede6dc
Text Secondary
#ab9080
Text Muted
#6e5848
Success
#3a9a5e
Mobile icon tint (bracket background, mobile only)
Icon — Light
#e3dbd7
Icon — Dark
#332b25
— 03 Typography
nstance
Save in one click
Name your current state, where every tab, every window is captured as an "instance". Come back to it tomorrow, next week, or on a different machine.
Tab Session Manager for Chrome
#c96422 · cubic-bezier(0.4,0,0.2,1)
Google Fonts import
https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap
— 04 Motion & Easing
Default easing
cubic-bezier(0.4, 0, 0.2, 1)
Material standard ease — used for all UI transitions. Duration: 160ms.
Reveal animation
opacity 0→1 · translateY(24px→0)
Duration 0.55s ease. Stagger: +0.12s (d1), +0.20s (d2).
Scroll cue bounce
2.6s ease-in-out infinite
translateY(0 → 9px → 0). Looping bob on the scroll indicator.
Nav scroll transition
border-color 0.3s ease
Border appears on nav bar when page scrolls past hero.
— 05 Border Radius
Small
6px
Medium
10px
Large
14px
XL
18px