Second Talent brand guide
Three colours, one gradient, one typeface, square components on alternating dark and warm bands. Second Talent helps US startups hire vetted AI-Native Engineers and Specialists from Asia. 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 |
|---|---|---|
| #B35206 | Orange text at body size | Brand orange only reaches 2.4:1 on white. This shade hits 5.1:1 and meets AA. |
#FF8800, the logo's own fill, and it is the same
everywhere: buttons, hovers, metrics, underlines and the glow. Older collateral carrying
#FF8700, #FF9533 or #E66A08 is out of date.
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 and warm bands
There is one theme, no light or dark mode. Pages alternate full-width dark ink bands with warm light bands, so two of the same never touch. The hero, the header, the footer, case studies, talent cards, testimonials and latest insights are always dark; the closing call-to-action band is always warm. The header turns into a light glass bar once the page scrolls. Cards, forms and long-form reading areas stay white, and orange never changes.
| Role | Dark band | Warm band |
|---|---|---|
| Surface | #060A14 | #FAF7EF |
| Text | #FFFFFF | #060A14 |
| Hairline | white 14% | ink 12% |
| Accent | #FF8800 | #FF8800 |
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 highlighted phrase underlined in #FF8800, 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 | #FF8800 at 38% | Two ellipses, 36% by 50% of the band, centred at 13% and 87% across, 28% down. |
| Lower glow | #FF8800 at 18% | Two smaller ellipses, 28% by 36%, at 18% and 82% across, on the bottom edge. |
| Orbs | #FF8800 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 |
| #FF8800 underline and metrics | 8.3:1 | 3.7: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 text that falls 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 underline the one highlighted phrase in #FF8800
- 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
Inter, the face of the logo wordmark, is the single typeface across the brand: headings, body, buttons and UI. Self-hosted as one variable file covering weights 100–900, subset to the characters the site uses, so the whole range costs a single 102 KB request.
Hire and build AI-native teams in Asia
Engineers who build, ship and automate with AI
The same Inter 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.
Inter is preloaded with font-display: swap. Behind it sits a metric-matched Arial fallback (ascent 90.2%, descent 22.48%, line-gap 0%, size-adjust 107.4%) that occupies Inter's box, so the swap causes no layout shift.
Never load Inter from a third-party CDN, and never substitute Satoshi, 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 helps US startups hire vetted AI-Native Engineers and Specialists from Asia.
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.
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