香港專業花式跳繩學校 Hong Kong Rope Skipping Academy
hkrsa.asia · set in Montserrat
SaveUnofficial A style guide made by SiteStyleGuide from box.studio’s public web pages. Not affiliated with or endorsed by Box.studio. The real site is box.studio ↗
Unofficial style guide
Box.studiostyle guide
Box.studio’s website (box.studio) uses Montserrat for its headings and body text. Its palette is led by Light Royal Blue (#0D6EFD), Gold (#FFC107) and Sky Blue (#0DCAF0), with #282828 text on #FFFFFF. Captured from the live site on 22 October 2026.
- Website
- box.studio
- Typefaces
- Montserrat, Segoe UI
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 22 Oct 2026 · added by @milesb
https://box.studio/
Screenshot
box.studio
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội dung số đa nền tảng
- ▲ 79 / 60 characters
- Meta description
- Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, cam kết hiệu quả.
- ● 125 / 160 characters
- Site name
- Box.studio
- og:title
- Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội dung số đa nền tảng
- og:description
- Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, cam kết hiệu quả.
- Language
- vi-VI
In search results
Box.studiohttps://box.studio/
Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội d…
Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, cam kết hiệu quả.
When shared
box.studio
Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội dung số đa nền tảng
Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, c…
Logo & favicons
Found as: image in the header. PNG, 83 × 42.
Logo
On white
On black
On Light Royal Blue
Favicons
1 found-
Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội dung số đa nền tảng
Light browser tab
Box Studio - Cung cấp dịch vụ Marketing, truyền thông & nội dung số đa nền tảng
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#282828) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 30.1%
- Black 13.7%
- Cool Near Black 8.9%
- Light Royal Blue 7.2%
- Charcoal 6.7%
- Gold 5.4%
- Sky Blue 5.4%
- Light Orange Red 5%
- Crimson 4.8%
- Light Sea Green 4.8%
- Deep Orange Red 1.9%
- Deep Royal Blue 1.9%
- Deep Sea Green 1.3%
- Brown 1.3%
- Misty Rose 1%
- Light Steel Blue 0.5%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 14.74:1 AAA
- On white
- —
Text, background, border · body, .nav-tabs .nav-item.show .nav-link
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.42:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · --bs-table-striped-color, --bs-table-active-color
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 10 0 84
- On text
- 1.05:1 Fail
- On white
- 15.43:1 AAA
Text, background, border · .btn-dark, .btn-dark.disabled
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 84
- On text
- —
- On white
- 14.74:1 AAA
Text · body, .news .section-title a
Colours
Brand colours and accents, most used first-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 57 0 1
- On text
- 3.28:1 AA large
- On white
- 4.50:1 AA
Background, text, border · .btn-primary, .btn-primary.disabled
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 24 97 0
- On text
- 9.04:1 AAA
- On white
- 1.63:1 Fail
Background, border, text · .btn-warning, .btn-warning.disabled
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 16 0 6
- On text
- 7.53:1 AAA
- On white
- 1.96:1 Fail
Background, border, text · .btn-info, .btn-info.disabled
-
Light Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 60 86 6
- On text
- 4.44:1 AA large
- On white
- 3.32:1 AA large
Background, text, border · .section-title span, .slick-dots li.slick-active button
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 69 14
- On text
- 3.26:1 AA large
- On white
- 4.53:1 AA
Background, text, border · .btn-danger, .btn-danger.disabled
-
Light Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 0 38 47
- On text
- 3.25:1 AA large
- On white
- 4.53:1 AA
Background, text, border · .btn-success, .btn-success.disabled
-
Deep Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 59 80 12
- On text
- 4.03:1 AA large
- On white
- 3.66:1 AA large
Background, text, border · .title-community, .img-intergrated
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 56 0 21
- On text
- 2.29:1 Fail
- On white
- 6.44:1 AA
Background, text, border · .btn-primary:hover, .btn-check:focus+.btn-primary
-
Deep Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 0 38 55
- On text
- 2.51:1 Fail
- On white
- 5.87:1 AA
Background, border, text · .btn-success:hover, .btn-check:focus+.btn-success
-
Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 68 27
- On text
- 2.49:1 Fail
- On white
- 5.91:1 AA
Background, border, text · .btn-danger:hover, .btn-check:focus+.btn-danger
-
Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 11 13 4
- On text
- 11.18:1 AAA
- On white
- 1.32:1 Fail
Background · .three-social, .four-column
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 19 11 0 0
- On text
- 11.22:1 AAA
- On white
- 1.31:1 Fail
Background · --bs-table-bg, --bs-table-striped-bg
Gradients
-
linear-gradient(transparent, #000000 100%)
-
linear-gradient(180deg, #000a24 61.39%, #00154a 107.28%)
-
radial-gradient(147.47% 147.47% at 50.51% 122.22%, #ff4d00 21.53%, #ef8421 87.67%)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Montserrat
Aa
200
Aa
900
Montserrat
Self-hosted · weights 200, 300, 400, 500, 700, 900 · body · shown in a stand-in if you don’t have it
Aa
400
Segoe UI
System font, or not loaded on this page · weights 400 · body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
calc(1.375rem + 1.5vw) / 1.2
weight 500
Box.studio
Heading 2
calc(1.325rem + .9vw) / 1.2
weight 500
Box Studio - Cung cấp dịch vụ Marketing, truyền…
Heading 3
calc(1.3rem + .6vw) / 1.2
weight 500
Box Studio - Cung cấp dịch vụ Marketing, truyền…
Heading 4
calc(1.275rem + .3vw) / 1.2
weight 500
Box Studio - Cung cấp dịch vụ Marketing, truyền…
Heading 5
1.25rem · 20 px / 1.2
weight 500
Box Studio - Cung cấp dịch vụ Marketing, truyền…
Heading 6
1rem · 16 px / 1.2
weight 500
Box Studio - Cung cấp dịch vụ Marketing, truyền…
Body
1rem · 16 px / 1.5
weight 400 · Montserrat
Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, cam kết hiệu quả.
Small
.875em · 14 px
Box Studio là công ty cung cấp giải pháp Marketing toàn diện đa nền tảng lớn nhất Việt Nam, tối ưu chi phí, cam kết hiệu quả.
Button
0 · 0 px / 0
none
Get started
Link
17px / 17px
weight 600
Read more about Box.studio
Sizes in use
Most common across the site- 40pxline 50px · 4 rules
- 28px4 rules
- 22pxline 35px · 5 rules
- 20pxline 1 · 16 rules
- 17pxline 17px · 6 rules
- 16pxline 1.5 · 13 rules
- 14pxline 1.5 · 25 rules
- 12pxline 0 · 4 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.btn-primary · #0D6EFD
Link
Read our latest news today.
a · #0D6EFD
Corner radius
- .25rem · 23×
- 50% · 9×
- .3rem · 6×
- .2rem · 5×
- 20px · 5×
- 4px · 5×
Shadows
- 0 0 0 .25rem rgba(13,110,253,.25)
- 0 0 0 .25rem rgba(25,135,84,.25)
- 0 0 0 .25rem rgba(220,53,69,.25)
- 0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
576
768
769
991
992
1200
1280
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1520 px
1320 px
1140 px
960 px
720 px
540 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 79 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Box.studio use?
- Box.studio’s website uses one typeface: Montserrat (headings and body text), self-hosted.
- What are Box.studio’s brand colours?
- The main colours on box.studio are Light Royal Blue (#0D6EFD), Gold (#FFC107), Sky Blue (#0DCAF0), Light Orange Red (#EF5F21), Crimson (#DC3545) and Light Sea Green (#198754).
- What colour is Box.studio’s text and background?
- Body text is #282828 on a #FFFFFF background.
- Where is Box.studio’s logo from?
- The logo shown in this guide was found on box.studio’s homepage. For official logo files and usage rules, check Box.studio’s own brand or press page.
- Is this Box.studio’s official style guide?
- No. SiteStyleGuide made it from box.studio’s public web pages on 22 October 2026, and isn’t affiliated with Box.studio. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
box-studio-tokens.css
/* box.studio design tokens, from SiteStyleGuide (https://sitestyleguide.com/box.studio) */
:root {
/* Colours */
--text: #282828;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-cool-near-black: #212529;
--colour-charcoal: #282828;
--colour-light-royal-blue: #0D6EFD;
--colour-gold: #FFC107;
--colour-sky-blue: #0DCAF0;
--colour-light-orange-red: #EF5F21;
--colour-crimson: #DC3545;
--colour-light-sea-green: #198754;
--colour-deep-orange-red: #E05C2D;
--colour-deep-royal-blue: #0A58CA;
--colour-deep-sea-green: #157347;
--colour-brown: #BB2D3B;
--colour-misty-rose: #F6DAD7;
--colour-light-steel-blue: #CFE2FF;
--gradient-1: linear-gradient(transparent, #000000 100%);
--gradient-2: linear-gradient(180deg, #000a24 61.39%, #00154a 107.28%);
--gradient-3: radial-gradient(147.47% 147.47% at 50.51% 122.22%, #ff4d00 21.53%, #ef8421 87.67%);
/* Typefaces */
--font-body: 'Montserrat';
/* Type scale */
--text-h1: calc(1.375rem + 1.5vw);
--leading-h1: 1.2;
--text-h2: calc(1.325rem + .9vw);
--leading-h2: 1.2;
--text-h3: calc(1.3rem + .6vw);
--leading-h3: 1.2;
--text-h4: calc(1.275rem + .3vw);
--leading-h4: 1.2;
--text-h5: 1.25rem;
--leading-h5: 1.2;
--text-h6: 1rem;
--leading-h6: 1.2;
--text-body: 1rem;
--leading-body: 1.5;
--text-small: .875em;
--text-button: 0;
--leading-button: 0;
--text-a: 17px;
--leading-a: 17px;
/* Shape */
--radius-1: .25rem;
--radius-2: 50%;
--radius-3: .3rem;
--radius-4: .2rem;
--radius-5: 20px;
--radius-6: 4px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 576px;
--breakpoint-2: 768px;
--breakpoint-3: 769px;
--breakpoint-4: 991px;
--breakpoint-5: 992px;
--breakpoint-6: 1200px;
--breakpoint-7: 1280px;
--breakpoint-8: 1400px;
--max-width-1: 1520px;
--max-width-2: 1320px;
--max-width-3: 1140px;
--max-width-4: 960px;
--max-width-5: 720px;
--max-width-6: 540px;
}
{
"site": "box.studio",
"source": "https://sitestyleguide.com/box.studio",
"text": "#282828",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Near Black",
"hex": "#212529",
"rgb": [
33,
37,
41
]
},
{
"name": "Charcoal",
"hex": "#282828",
"rgb": [
40,
40,
40
]
},
{
"name": "Light Royal Blue",
"hex": "#0D6EFD",
"rgb": [
13,
110,
253
]
},
{
"name": "Gold",
"hex": "#FFC107",
"rgb": [
255,
193,
7
]
},
{
"name": "Sky Blue",
"hex": "#0DCAF0",
"rgb": [
13,
202,
240
]
},
{
"name": "Light Orange Red",
"hex": "#EF5F21",
"rgb": [
239,
95,
33
]
},
{
"name": "Crimson",
"hex": "#DC3545",
"rgb": [
220,
53,
69
]
},
{
"name": "Light Sea Green",
"hex": "#198754",
"rgb": [
25,
135,
84
]
},
{
"name": "Deep Orange Red",
"hex": "#E05C2D",
"rgb": [
224,
92,
45
]
},
{
"name": "Deep Royal Blue",
"hex": "#0A58CA",
"rgb": [
10,
88,
202
]
},
{
"name": "Deep Sea Green",
"hex": "#157347",
"rgb": [
21,
115,
71
]
},
{
"name": "Brown",
"hex": "#BB2D3B",
"rgb": [
187,
45,
59
]
},
{
"name": "Misty Rose",
"hex": "#F6DAD7",
"rgb": [
246,
218,
215
]
},
{
"name": "Light Steel Blue",
"hex": "#CFE2FF",
"rgb": [
207,
226,
255
]
}
],
"fonts": [
{
"name": "Montserrat",
"stack": "\"Montserrat\"",
"weights": [
200,
300,
400,
500,
700,
900
],
"source": "Self-hosted"
},
{
"name": "Segoe UI",
"stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"weights": [
400
],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run box.studio?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/box.studio" title="Box.studio style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Montserrat
Other websites using Montserrat as their main typeface
HELLO!
hellomagazine.com · set in Montserrat
Save
Digital Spy UK
digitalspy.com · set in Montserrat
Save
locomotive.ca
locomotive.ca · set in Montserrat
Save
Similar colours
Websites whose lead colour is closest to Box.studio’s
Open Broadcaster Software
obsproject.com · 4 days ago
Save
Electronic Arts Home Page
ea.com · 2 days ago
Save
Waze
waze.com · 3 hours ago
Save
Google
thinkwithgoogle.com · 13 hours ago
Save
Captured from box.studio on 22 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Box.studio; this guide describes the public website for reference.