Just jobs. A little perspective.
Navigation, short actions, notebook notes and section labels.
Controls: 18–22px. Short headings: 28–40px. Natural weight 400; there is no separate loaded bold face.
The original look
Style guide
Warm paper, useful notes and a little handwriting. A reference for keeping the board readable and recognizably ours, from a phone to a wide screen.
01 Colors with a job to do
The warmer yellow comes from the original board’s high-salary card. Navigation and primary actions share that paper treatment.
#F6E85F → #EFDB3DNavigation and high-salary cards share the same warm paper family.
#2A2118Keep the text readable on its own surface.
One yellow family. Don’t invent a separate yellow for each button.
02 Handwritten, then easy to read
Original uses the same type hierarchy as the other board themes. Handwriting invites; Archivo makes roles and salaries easy to compare. The editorial faces below keep their homepage roles. These are the weights actually loaded by the site.
Save a role now. Keep the company, salary and next step clear when you return.
400 regular500 medium600 semibold700 bold
Body and forms: 16–18px, about 1.5–1.6 line height. Labels: 500–600. Emphasis: 700. Loaded 800/900 weights are available for short numeric or display emphasis.
Find your next thing.
Company names and short, loud display moments.
The family supplies its heavy shape at weight 400. Use size and spacing for hierarchy, rather than asking the browser to invent a heavier face.
Remote · Full time
Read the posting. Make your next move.
Read the posting. Make your next move.
Preserve its scoped board use and the homepage summary at 500. Loaded weights: 300, 400, 500, 600 and 700. This specimen uses 400.
Still Unemployed?
The homepage pairs 900 with italic 800. This specimen uses italic 800; normal faces are 700 and 900. Keep the family’s role in editorial display; everyday controls use the interface families above.
A little room to think.
An existing editorial face. This specimen uses italic 400; only italic 400 and 500 are loaded. Preserve intentional local uses; the default reading face for new interface copy is Archivo.
03 Texture, quietly in the background
A little grain, felt or light makes the board feel like a place. Keep the surface gentle enough for the notes to lead.
Original paper
A warm canvas with a fine, repeated grain.
A little texture, a lot of room
This texture stays still.
Keep the grain behind the notes, with clear paper under job details.
The texture sets the mood. The paper keeps the words easy to read.
04 Useful things on paper
One idea per note. Tape, a small tilt and a soft shadow provide character while text and controls stay clear.
Sticky actions
Browse this board →Primary actions use yellow paper and ink. Both examples lead to this theme’s board.
A note for your next move
Keep the useful part close. A note opens where you are, gives you one idea, and lets you get back to the jobs.
Tape: rgba(228,205,145,.62)
Note shadow: 3px 6px 13px rgba(44,33,24,.17)
Keep decorative lines and tape away from essential text.
05 A note worth opening
Cream paper, a red margin, a little drawing and one useful thought. Advice notes keep this look in every theme. These two examples open when you tap them.
note to self · examplesave the role, then make a plangive the next step a place to livewhat goes in the note? →close this note ↑
Keep the job link with a short note about what you want to do next. Write down the question you need answered or the piece of work you want to include.
Check the employer’s posting before you apply.
note to self · examplegive your follow-up a next stepone clear question is enoughbuild the message →close this note ↑
Keep the message tied to the conversation:
- Thank the person for their time.
- Mention one specific thing you discussed.
- Ask what happens next.
Use your own words. A template should help you start.
One thought per note. The drawing adds personality; the words do the useful part.
06 A few drawn details
Small drawings give the notes personality. Keep them separate from the information someone needs to act on.
Use a small accent at a card edge. Keep names, salaries and actions clear. Drawings never stand in for a button label, salary band or verification stamp.
07 Job-card color means salary
These are illustrative cards, not live listings. On Jobs, paper color adds a second clue to the visible salary. The top of the annual range sets the band. Internships use the same theme papers decoratively, with pay always written out.
Studio North
Junior designer
Remote · Full time
$65K-75K
Apply Now
Light paper · #ECDEC6 → #E0D0B2
Common Ground
Content strategist
New York · Hybrid
$80K-95K
Apply Now
Tan paper · #E0CBA2 → #D3BB8C
Next Chapter
Brand designer
Remote · Full time
$90K-110K
Apply Now
Yellow paper · the upper end reaches $100K.
08 Give the page some room
Original keeps the shared layout. Use a small spacing scale, aligned edges and natural document flow. Let copy wrap and sections grow instead of shrinking an entire desktop composition.
Desktop
Main contentSupporting note
- Center the homepage hero within a 1,500px maximum width.
- Use two columns where the content benefits from sitting together.
- Keep paragraph width comfortable, around 60–70 characters.
- Use 24–48px between sections and 16–24px inside reading surfaces.
Phone
Main contentSupporting note
- Stack related sections in reading order; preserve the important action.
- Keep 16px side space where the viewport allows it.
- Primary touch controls are at least 44 × 44 CSS pixels.
- Let text grow and wrap. Essential controls stay in view.
The spacing scale
481216243248
4–8px within tight groups. 12–16px between related controls. 24–48px between bigger ideas.
09 Keep the name and the people recognizable
Photography has a reason.
Use the site’s approved photos and illustrations where they explain a person, role or story. Keep natural proportions, place captions outside the image and check the crop on a phone.
Do not bake essential words into a picture. Give informative images meaningful alternative text; purely decorative images get empty alternative text.
The name needs breathing room.
StillUnemployed.com
Keep the full spelling and the established lettering for its location. This guide uses handwriting; the homepage keeps its serif title and the board keeps its heavy display heading.
Leave clear space around the name. Do not stretch it, tuck tape across the letters or turn it into a different logo for each theme.
Use the full name in accessible link text. Employer logos and third-party marks identify their owners; they are not decorative theme assets or an endorsement.