01 - Mark
Logo
Usage rules
- Keep clear-space equal to the height of the flame around the mark.
- Minimum size: 24px height for the flame, 32px for the wordmark.
- Use the light lockup on dark backgrounds - never recolor the mark.
- Don't stretch, rotate, or add effects (shadows, strokes, outlines).
02 - Color
Color palette
Fire palette
Surfaces
Text scale
03 - Depth
Gradients & shadows
Flame gradient
var(--gradient-flame)
Hero radial
var(--gradient-hero)
Card shadow
var(--shadow-card)
Glow shadow
var(--shadow-glow)
04 - Type
Typography
Display
Sora
Used for headings, hero copy, and the wordmark. Weights 300-800.
Sans
DM Sans
Body, UI, and labels. Default body weight is 300.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Body - Hot jobs served daily across Nepal.
Small / muted - supporting copy.
Eyebrow label
Flame text utility
05 - UI
Components
Buttons
Badges
Default
Secondary
Outline
Destructive
Inputs
Card
Senior Designer
Kathmandu · Full time
06 - Voice
Voice & tone
Confident
We know the Nepali job market. Speak with calm authority - never hype.
Warm
We're rooting for the candidate. Use plain, encouraging language.
Plain-spoken
Short sentences. No jargon. Say what something is and what to do next.
07 - Rules
Do & don't
Do
- Use semantic tokens (
bg-primary,text-foreground). - Pair Sora headings with DM Sans body.
- Reserve the flame gradient for hero moments and the wordmark.
- Lean on whitespace - let the page breathe.
Don't
- Hard-code colors like
text-whiteorbg-orange-500. - Use serif fonts or a second display family.
- Apply the flame gradient to body text or large fills.
- Drop shadows on the logo or recolor the flame.