Resources
Brand & design
One visual system, called Cream & Sage: warm, clean, calm, with a touch of retro. Everything ForkDeploy puts on screen is built from the palette, type, and shapes on this page.
The look
Cream & Sage is a light theme built on a warm ivory background rather than pure white, a forest-green primary, and a soft terracotta accent. It should feel like a well-kept workshop: unhurried, legible, a little handmade.
Colour
The whole palette is green on warm ivory, with terracotta for the rare highlight. These five are the ones to know:
Primary #3f6b53
Sage green. The one signature colour, used on buttons, links, and the logo tile.
Accent #d08c60
Soft terracotta. Used sparingly, for a highlight or an illustration.
Ink #1c1b19
Near-black. Headings and body text.
Background #fbf8f1
Warm ivory. The page behind everything, never pure white.
Surface #ffffff
White. Cards and panels sitting on the ivory.
Each one also has a darker shade for hover states and a pale tint for backgrounds. Alongside them sit neutral greys for text and borders, and green, amber, and red for status. Everything stays in the same warm, low-contrast range.
Typography
Space Grotesk
The display face. Headings, the logo wordmark, and short emphatic labels. Set a little tight, so large lines hold together.
Inter
The text face. Everything that isn't a heading: body copy, buttons, and interface labels.
Both are open-source variable fonts, available on Google Fonts, so every weight is on hand. Code and configuration are shown in a plain monospace face.
Display
Host your monorepo as one
Heading
What happens when you push
Subheading
Secrets & environment variables
Lead
The short version of everything, in one place.
Body
You describe the services in your repo with one small config file, push with git, and the platform builds, wires, and deploys them together.
Caption
Changes take effect on the next deploy.
Logo & wordmark
The mark is a single F in Space Grotesk bold on a rounded green tile. The full lockup sets the wordmark next to it in the same display face, as one word.
- ✓ Keep clear space around the lockup equal to the height of the tile.
- ✓ Never recolour the tile. It is always the green above, with an ivory letter.
- ✓ Do not stretch, rotate, add a stroke, or drop a shadow on the mark.
- ✓ Write the name as “ForkDeploy”: one word, no space, capital F and D.
Shape & depth
Radii
sm
0.5rem
md
0.75rem
lg
1rem
xl
1.5rem
2xl
2rem
Shadows
sm
Resting cards and buttons
md
Cards on hover
lg
Floating panels and dialogs
All three are warm-tinted, near-black at low opacity, never a neutral grey. Surfaces use the smallest by default and lift to the next step on hover.
Motion
- ✓ Motion follows your system's “reduce motion” setting. Turn it on and the animations don't play.
- ✓ Content fades and rises gently into view as you scroll, once per element.
- ✓ Everything eases on the same soft curve: quick enough to feel responsive, slow enough to follow.
- ✓ Nothing loops or competes for attention. The one exception is a single badge on the home page that drifts a few pixels.