Design System

Style Preview

Brand tokens, typography, and UI components extracted from the Webflow Designer. Source of truth: src/styles/global.css — updated 2026-04-15.

Colors

Core brand

primary

#e29f34

Oursky amber/gold

primary-dark

#ffbb55

Amber (dark mode / CTA)

secondary

#ffe5c0

Warm cream

ring

#f2c079

Focus ring / chart

destructive

#d5455f

Error / danger

Backgrounds & surfaces

bg

#f3f3f3

Page background

surface

#ffffff

Card / panel

muted

#ececec

accent

#d9d9d9

border

#eeeeee

input

#f1f1f1

Text

text

#333333

Body text

text-muted

#726f70

black

#000000

white

#ffffff

Dark mode palette

bg-dark

#080808

surface-dark

#1b1b1b

footer-bg

#000000

footer-accent

#ffbb55

footer-opensource

#cfeaff

Typography

Font — Borna Webfont (self-hosted)

400 Regular Build it right the First Time
500 Medium Build it right the First Time
500 Medium Italic Build it right the First Time
600 SemiBold Build it right the First Time
700 Bold Build it right the First Time
900 Black Build it right the First Time

Type scale

--text-xs · 12px Engineering excellence is the baseline here.
--text-sm · 14px · body default Engineering excellence is the baseline here.
--text-base · 16px Engineering excellence is the baseline here.
--text-lg · 20px · nav links Engineering excellence is the baseline here.
--text-xl · 24px Engineering excellence is the baseline.
--text-2xl · 32px · Heading Build it right.
--text-3xl · 48px · Section titles Build it right.
--text-hero-primary · 5rem · Hero heading Build it right

Hero gradient text

Build it right
the First Time

Engineering Excellence is the baseline here.

Spacing & Radii

Layout spacing

--spacing-page-x · 1.25rem (20px) mobile
--spacing-page-x-lg · 2.5rem (40px) desktop
--nav-height · 4.25rem (68px)

Border radii

--radius-sm
6px
--radius-md
12px
--radius-lg
24px · cards
--radius-xl
48px · hero
--radius-full
9999px · pills

Buttons

Primary (nav CTA)

Contact Get in Touch View Work

Secondary / ghost

Learn More Read Blog → Open Source ⭐

Dark background variants

Contact Learn More View Work →

Nav active pill

Home Works Blog

Cards

Blog card

Image
Machine Learning & AI

The New Era of E2E Test Automation: Faster, Cheaper, and More Accessible

April 15, 2026

Image
Engineering

I don't care what tools a developer uses. I hire based on fundamentals.

March 4, 2026

Image
Product Growth

5 Questions to Ask Agencies Before Outsourcing Software Development

February 18, 2026

Works / case study card

Thumbnail

MTR Mobile

Redesigning the mobile experience for Hong Kong's mass transit railway system.

Mobile Development UI / UX Design
Thumbnail

Wilson Parking

A smart parking app serving millions of commuters across Australia and Asia.

iOS / Android Backend

Testimonial card

"Simply the best dev shop I have worked with. No need to fly to Silicon Valley, when SV knowledge & approach is right here in Oursky."
Hugh Bell Founder, Cococolors

Badges & Pills

Category badges

Engineering Machine Learning & AI Product Management UI Design Culture Open Source

Service tags

Mobile Development UI / UX Design AI Backend iOS / Android

Section eyebrow (amber)

Our Works Blog Products

Form Elements

Prose (Blog / MDX)

Heading Level 1

Heading Level 2

Heading Level 3

Body text at 14px / 20px line-height (Webflow default). Borna Webfont brings a distinctive geometric quality to both body and display text. Links are styled in the primary amber colour with underline.

  • Engineering excellence is the baseline
  • Developer-led, product-focused
  • Built for longevity, not just speed
"We build digital products that users love — from conception to launch." 
const oursky = { mission: 'Build it right the First Time' };