Second Talent brand guide
Three colours, one gradient, one typeface, square components on a white page. Second Talent is a tech talent platform that connects companies with AI-native engineers and specialists, matched in 24 hours, with no cost until you hire.
The design language
Four rules define the brand. They are enforced globally in the theme's stylesheet, so a page cannot opt out by accident. Anything that looks rounded or lifted in markup renders square and flat.
White is the default surface and most of the composition. Space does the work that panels and fills used to.
Cards, buttons, inputs, avatars and tags are square. A blanket rule catches utilities, rounded-full and inline plugin styles alike.
No blur, glow or drop shadow on a component. Depth is a 1px hairline against a flat fill, and nothing floats above the page. The one glow in the system is a section ground: the gradient in 07.
Sections and grids divide with 1px rules rather than gaps plus shadows. Adjacent borders collapse into one shared line.
--tw-shadow, --tw-inset-shadow and the --shadow-* scale),
never with box-shadow: none. Tailwind composes rings and shadows into a single
box-shadow declaration, so blanking the property would erase every hairline ring too.
Preflight is also disabled, which leaves box-sizing: content-box as the browser
default: any component with a fixed width plus padding must set border-box explicitly.
Logo & brand mark
The horizontal lockup is the only approved logo. Two files cover every background: a dark wordmark for white surfaces and a white wordmark for ink. The orange mark is identical in both.
Asset locations
| Variant | Format | Path |
|---|---|---|
| Primary (dark wordmark) | SVG | /wp-content/uploads/2024/06/secondtalent_logo_horizontal@1x.svg |
| Light (white wordmark) | SVG | /wp-content/themes/secondtalent-sage/public/logo-horizontal-dark.svg |
/wp-content/… paths cannot be
resolved by the asset pipeline at build time.
Clear space & minimum size
Protect the lockup with breathing room equal to the height of the mark ("x") on all four sides, and never render it below its legible minimum.
Minimum sizes
| Digital, full lockup | 120px wide |
| Header, rendered height | 28–34px tall |
| Favicon / app icon | 24px tall |
| 20mm wide |
The lockup holds a 462 × 77 aspect ratio (≈6:1). Set width or height and let the other follow, never both. Never rebuild the wordmark in another typeface.
Logo misuse
The lockup's integrity is non-negotiable. Never apply any of these treatments.
Three colours
The entire brand runs on brand orange, ink and white. There is no secondary palette and no accent family. Every grey you see is ink at reduced opacity, not a separate hue.
Ink tints, not new colours
Secondary text, captions, dividers and disabled states are all ink at one of these four opacities. Reaching for a new grey is how a palette drifts, so take a tint instead.
The only permitted variants
| Value | Where | Why it exists |
|---|---|---|
| #E66A08 | Orange hover / pressed | Brand orange darkened ~8% so hover reads as a state change, not a new colour. |
| #B35206 | Orange text at body size | Brand orange only reaches 2.4:1 on white. This shade hits 5.1:1 and meets AA. |
| #FF9533 | Highlight words on ink | Lifts the accent slightly so it holds up against a dark band. |
#FF8800 is out of date; the brand orange is
#FF8700, sampled from the logo.
Colour usage ratio
Orange is an accent, not a surface. If two orange elements compete for attention in one view, one of them is wrong.
Dark mode
The site is ink by default; light mode is an explicit opt-in remembered in localStorage['st-theme']. The dark class ships on <html> from the server, so the default holds with no script and nothing repaints on first paint. The three colours simply trade places, and orange never changes.
| Role | Dark (default) | Light |
|---|---|---|
| Surface | #060A14 | #FFFFFF |
| Text | #FFFFFF | #060A14 |
| Hairline | white 14% | ink 12% |
| Accent | #FF8700 | #FF8700 |
Accessible pairings
Measured ratios for every pairing three colours can produce. Orange is a strong background but a weak foreground, so pair it with ink, never with white body copy.
#B35206.
The glow gradient
One gradient, and it is built from the same three colours: an ink ground with brand orange glowing in from both sides. It is the ground of every article hero and of the dark bands on marketing pages. It is a section background, never a fill for a component or for type.
Asia's top engineers, matched in 24 hours.
White headings, one highlight in #FF9533, body copy at 70% white. The centre stays dark, so type sits there.
Start HiringHow it is built
| Layer | Value | Role |
|---|---|---|
| Ground | #060A14 | Ink, the same value as every dark band and the footer. |
| Side glow | #FF9533 at 38% | Two ellipses, 36% by 50% of the band, centred at 13% and 87% across, 28% down. |
| Lower glow | #FF9533 at 18% | Two smaller ellipses, 28% by 36%, at 18% and 82% across, on the bottom edge. |
| Orbs | #FF9533 at 16% | A 420px and a 360px circle, top left and bottom right. Desktop only. |
| Softening | screen · blur 44px · mask | Screen blend lifts the ink instead of muddying it; an elliptical mask fades the glow out before the band's edge. |
Contrast on the gradient
| Text | On bare ink | At the brightest glow |
|---|---|---|
| White headings and labels | 19.8:1 | 9.1:1 · AAA |
| White at 70%, body copy | 9.7:1 | 5.4:1 · AA |
| #FF9533 highlight words | 9.0:1 | 4.1:1 · large display only |
The brightest-glow column is the worst case: the unblurred centre of a side lobe. Real type sits nearer the dark centre, where contrast is higher. Orange highlight words that fall over a side lobe must stay at display size.
Where it is used
| Surface | Class |
|---|---|
| Article and resource heroes | .blog-hero |
| Case studies strip | .st-glow-band.dark |
| Talent cards | .st-glow-band.dark |
| Role and country chips | .st-glow-band.dark |
| Final call-to-action band | .st-glow-band.dark |
Do
- Use it as a full-width section ground, edge to edge
- Alternate it with white sections, so two dark bands never touch
- Keep headings white and put the one highlight in #FF9533
- Let the final call-to-action band run straight into the ink footer
- Apply the class pair
st-glow-band dark, so text stays light in both themes
Don't
- Put it on a card, button, tag, badge or line of type
- Recolour the glow, add a second hue, or bring back the blue aurora
- Replace it with a linear orange gradient or an orange fill
- Set orange body copy over a side lobe
- Stack two glow or ink bands back to back
.st-glow-band lives in
app.css beside .blog-hero, and adding dark scopes the dark colour
tokens to the band, so a visitor on the light theme still gets light text on ink.
Typography
Satoshi is the single typeface across the brand: headings, body, buttons and UI. Self-hosted as one variable file covering weights 300–900, so the whole range costs a single 42 KB request.
Hire and build AI-native teams in Asia
Engineers who build, ship and automate with AI
The same Satoshi face carries every paragraph, caption, button and label, keeping the visual rhythm tight and the page weight light. Pre-vetted engineers, matched in 24 hours, with no cost until you hire.
Scale as implemented
| Role | Class | Mobile | md ≥768 | lg ≥1024 | Weight |
|---|---|---|---|---|---|
| Hero H1 | .hp-hero-title | 34px | 51px | 57px | 800 |
| Section H2 | .section-heading | 25px | 32px | 40px | 700 |
| Card H3 | text-xl | 20px | 20px | 20px | 700 |
| Body | text-base | 16px | 16px | 16px | 400–500 |
| Small | text-sm | 14px | 14px | 14px | 400–600 |
| Eyebrow | n/a | 11–12px | 11–12px | 11–12px | 700, uppercase |
- Headings: 700–800, tracking −0.02em to −0.035em, line-height 1.05–1.2.
- Body & UI: 400–500; 600–700 for buttons and emphasis. Line-height 1.6–1.75.
- Measure: cap paragraphs at roughly 62–66 characters.
- One scale: every section heading site-wide resolves to 25 / 32 / 40px. Don't invent per-page sizes.
Satoshi is preloaded with font-display: swap. Behind it sits a metric-matched Arial fallback (ascent 92.37%, descent 21.95%, line-gap 9.15%, size-adjust 109.35%) that occupies Satoshi's exact box, so the swap causes zero layout shift.
Never load Satoshi from a third-party CDN, and never substitute Inter, Poppins or a system stack in brand collateral.
Core components
Every component is drawn with two ingredients: a white fill and a 1px line. Where cards sit side by side their borders collapse into one shared rule rather than floating in a gutter.
Square corners, hairline border, white fill. No hover lift and no shadow. Hover changes the border colour instead.
Pre-vetted AI-native engineers, ready to start.
Square, hairline, white fill. Used for skills, stacks and filters. Never pill-shaped.
Square crops at 6rem, or 2.5rem inline. The language has no circular crops anywhere, including team photos and testimonial headshots.
Serif open-quote glyph, ink body, author block pinned to the bottom of the card.
Their pre-vetted candidates integrated seamlessly, and their account management ensured smooth onboarding.
Oversized extrabold number, muted label beneath. Numbers may take the accent; labels never do.
Client and platform logos sit desaturated at 45% opacity and resolve to full colour on hover, so they never compete with the headline.
Also in the system
| Class | What it is |
|---|---|
| .st-grid | Gutterless hairline grid: children divided by 1px rules, zero gap, doubled seams collapsed on mobile. |
| .st-tag / .st-avatar | The square tag and square headshot shown above. |
| .st-diamond / .st-rail | Rotated-square step markers on a dashed rail; the marker's outline knocks the line out where it crosses. |
| .st-review-strip / .st-review-card2 | Horizontal scroll-snap testimonial track. Card widths 82vw → 24rem → 23rem so the next card always peeks. Square prev/next buttons drive it; there is deliberately no wheel-to-horizontal hijack. |
| .hero-animated-bg | The ink hero band, with soft masked gradients and an optional portrait at 19% opacity. |
| .st-glow-band | The glow gradient as a section ground (07). Pair it with dark. |
| .section-container | Page gutter: max-w-7xl centred, px-4 sm:px-6 lg:px-8. |
Layout & spacing
A 4px base unit sets the rhythm. Sections sit tight at the top and looser at the bottom, so a heading stays close to the band above it and the content breathes before the next seam.
| Section padding | pt-6 md:pt-8 · pb-10 md:pb-14 |
| Container | max-w-7xl (80rem) |
| Gutter | px-4 · sm:px-6 · lg:px-8 |
| Heading → content | 40px |
| Card grid gap | 16px, or 0 with hairlines |
| Section seam | 1px, ink 6% |
| Band order | dark and light alternate |
Iconography
One stroked line-icon set. Uniform 1.5–2px stroke, rounded caps, currentColor, drawn on a 24px grid and rendered at 20 or 24px. No filled or duotone mixing, and no emoji standing in for an icon.
Do
Uniform stroke weight, rounded caps, a single consistent set, sized 20 or 24px, inheriting text colour.
Don't
Mix filled and stroked, vary stroke weight inside one row, or substitute an emoji for an icon.
Photography
Real teams and workplaces, warm natural light, candid over posed. Our employees are across Vietnam, the Philippines, Indonesia, Singapore, Malaysia, Thailand, Hong Kong, Taiwan and China. Imagery should represent them authentically, not generically.
Authentic teams at work, warm natural light, candid moments, square crops, subjects who reflect the markets we hire in.
Cold blue-tinted or generic stock, heavy filters, staged handshakes, rounded or circular crops, black-and-white treatments.
Brand voice
Professional but approachable, confident but never boastful. We sell certainty: a specific outcome, on a specific timeline, backed by a number we can defend.
A business-to-business tone that demonstrates real expertise in engineering hiring across Asia. Credible, never corporate-bland.
Short sentences, concrete claims, no throat-clearing. Say what happens and how long it takes.
Every message ends at the client's result: teams shipped, costs saved, roadmaps hit, not at our process.
Do
- Lead with speed and specificity: matched in 24 hours, onboarded in days
- Use defensible numbers: up to $103,000+ saved per hire, 92% retention, 4–8 hours of daily overlap
- Say "AI-native engineers", meaning engineers who ship with Claude Code, Cursor and modern LLM toolchains
- Name the markets: Vietnam, the Philippines, Indonesia, Singapore, Malaysia, Thailand, Hong Kong, Taiwan, China
- Say employees rather than "people" when referring to the workforce
- Keep EOR pages EOR-only: compliance, payroll and entity language, not developer recruiting
Don't
- Use casual filler, hype words or exclamation marks
- Make vague promises with no number attached
- Describe the hiring process as complicated, because the promise is that it isn't
- Use unexplained jargon or internal shorthand in client-facing copy
- Undersell the offer, or oversell with claims we cannot evidence
- Mix service lines in one page's framing, such as staffing copy on an EOR page
Key messaging points
The positioning, in the order it appears on the site. Use these as written, because they are the claims the rest of the marketing is built to support.
Second Talent is a tech talent platform that connects companies with AI-native engineers and specialists.
No cost until you hire. Primary call to action: Start Hiring. Secondary: Check Pricing.
Engineers who ship with Claude Code, Cursor and modern AI toolchains, building LLM features and deploying AI tooling into production, not just reading about it.
From requirement to matched candidates in a day, and onboarded within days. The traditional hiring timeline is the problem we remove.
Coding tests, peer interviews and role checks on every engineer, tested against the AI tools and stack the client actually uses.
Four to eight hours of daily overlap keeps teams aligned. No 3am standups, no day-long lag.
Up to $103,000+ saved per hire, without the overhead of an entity or the compromise of a cheaper hire.
Employer of Record coverage across Asia. Contracts, payroll, tax and in-country compliance handled, so clients focus on the product.
Proof points
Third-party ratings, shown as a trust row on heroes and key landing pages: G2 4.9/5 · Clutch 4.9/5 · Trustpilot 4.7/5. Always link each badge to its live review profile, and never quote a rating we have not verified that day.
Latest Resources
Hiring Cost Guides
Hiring Platform Guides
Blogs
Salary Insights
Need brand assets? Get in touch.
For logo files, templates, deck layouts or anything this guide doesn't answer, reach out to our team.
Contact Us