01Brand idea
My portfolio is a small indie film studio inside a cozy cartoon room. Projects are released like films: each one gets a disc, credits and a premiere. The room is where the work happens, so visitors meet me before they meet my case studies.
Two influences shape it: the restraint of indie film packaging (serif credits, lots of space) and the warmth of hand-drawn cartoon illustration (thick outlines, flat colour, a little humour).
Brand promise
I make confusing systems clear.
Warm
Cream paper, lamp light, a sleeping cat. Approachable before impressive.
Clear
Plain language, obvious navigation, proof up front. Clarity is the product.
Playful
Hidden details reward curiosity: the lamp, the poster, the spinning discs.
Cinematic
Film vocabulary and credits typography give every project a story arc.
02Logo
The mark is an NC monogram in Bagel Fat One, set in a rust badge with a thick ink outline, the same outline used across the illustrations. It pairs with the wordmark "Nicolas Choo" in DM Sans Bold.
Favicon · 16–64 px- Clear space: keep at least half the badge's width empty on every side.
- Minimum size: 24 px on screen, 8 mm in print.
- Don't stretch, recolour, add shadows to, or redraw the monogram in another font.
03Colour
Two palettes, one brand. Day is a sunlit café: cream, rust and olive. Night is the same room after dark: navy walls and amber lamp light. Visitors switch between them by clicking the lamp, and every colour is used as a named token, never as a raw hex code.
Day
- Cream
#F3E6D3Page background - Paper
#FBF4EACards, buttons - Ink
#2B2118Text, outlines · 12.8:1 on cream - Soft ink
#5B4B3DSecondary text · 6.8:1 - Olive
#3D4A1FHeadlines, primary button · 7.8:1 - Rust
#B83D27Accents, large text · 4.6:1 - Mustard
#E3A33BHighlights, sticky notes (never text)
Night
- Night navy
#111830Page background - Dusk
#1B2547Cards - Moonlight
#F3E6D3Text · 14.3:1 on navy - Sage
#B5C77APrimary button · 9.5:1 - Coral
#EC7A60Accents · 6.3:1 - Lamp amber
#F2A65AOffset shadows, glow
Each project disc may also wear its own project's colours (Laurier purple, Impossible Kids navy and yellow), but only on the disc itself.
04Typography
Four typefaces, each with one job. All are free Google Fonts.
Hi, I'm Nicolas.
Bagel Fat One: display. Hero and section headlines only, 32 px and up. Chunky and cartoon-friendly.
Reel credits
Instrument Serif: film. Project titles, credits and numbers. Brings the indie-film restraint.
I turn confusing systems into clear, human ones.
DM Sans: body and interface. 16–17 px body, line height 1.6, weights 400/500/700.
research → sketch → test
Caveat: handwriting. Sticky notes and chalkboard only, never for paragraphs.
Scale
| Role | Font | Size |
|---|---|---|
| Hero headline | Bagel Fat One | 40–104 px, fluid |
| Section title | Bagel Fat One | 40–76 px |
| Project title | Instrument Serif, uppercase | 44–120 px |
| Eyebrow label | DM Sans Bold, 0.18em tracking | 13 px |
| Body | DM Sans Regular | 16–17 px / 1.6 |
05Voice & tone
I write like I'd explain a project to a friend who's also a hiring manager: plain, specific and a little playful. Proof beats adjectives.
- Plain first: short sentences and everyday words. If a student or small-business owner wouldn't say it, rewrite it.
- Specific over impressive: numbers, methods and names ("56% to about 90% task success"), not "improved UX".
- Honest about the team: say "we" for group work, "I" for my part, and credit everyone by name.
- Film flavour, lightly: "Now showing", "Directed by", "Roll credits". Use them as signposts, never in place of clarity.
| Instead of | Write |
|---|---|
| I'm a passionate designer creating meaningful experiences. | I make confusing systems clear. |
| Leveraged synergistic research methodologies. | Ran a card sort and usability tests with 10+ people. |
| Click here. | Read the case study. |
06Components
Everything looks like it was cut from card stock: thick ink borders, rounded corners and a solid offset shadow that presses down when clicked.
- Buttons: pill-shaped, 3 px border, 4 px offset shadow; lift on hover, press on click. One primary per view.
- Cards: 4 px border, 22–32 px radius, 10 px offset shadow (ink by day, lamp amber by night).
- Sticky notes: Caveat, slightly rotated. Only for playful, secondary actions.
- Discs: one per project in that project's colours, with title, year and "Directed by" credits on the rim.
- Touch targets: at least 44 px, with visible focus rings in rust or amber.
07Illustration & icons
- Flat cartoon: flat fills, no gradients, with a fixed dark outline (#241B14) at 4–5 px that stays the same in both themes.
- Me, consistently: black rectangular glasses, dark fringe, the cream jacket with navy graffiti swirls.
- Line art: for supporting scenes (like the About head), ink lines with halftone dots, in the style of a comic sketch.
- Icons: simple line icons, 2.2 px stroke, rounded caps. Decorative icons are hidden from screen readers.
- No emoji as interface icons.
08Motion & accessibility
Motion is the brand's sense of humour, used sparingly and always meaningful: the disc spins up into its case study, the cat breathes, the lamp lights the room.
| Token | Value | Used for |
|---|---|---|
| Fast | 160 ms | Hover, press |
| Medium | 320 ms | Menus, nav hide and show |
| Slow | 600 ms | Theme change, disc carousel |
| Spring easing | cubic-bezier(.34, 1.56, .64, 1) | Playful pops |
- Reduced motion respected: with the system setting on, animations stop and content appears in its final state.
- Contrast: every text pair meets WCAG AA in both themes.
- Never colour alone: meaning always comes with words or icons too (for example, "Yes" or "No" next to a check or cross).
- Keyboard friendly: skip link, visible focus, arrow keys for the disc carousel.