DisplayGoogle Fonts · Free
ANTON
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 & — ?!
- Weight
- 400 Regular (only weight)
- Case
- Always UPPERCASE
- Tracking
- +0.01em
- Use
- H1, H2, wordmark, big numbers
- Fallback
- Impact, Arial Narrow, sans-serif
BSC · Brand guidelines · v1.0 · 2026
Bombay
Surface Co.
The rules that keep every page, file and message looking like one company.
The idea
Bombay Surface Company looks like a well-made print sheet: calm paper, confident ink, one red mark to act on.
A
Printed, not decorated
Square corners, crop marks and a CMYK strip borrow from the print floor behind the brand.
B
Quiet page, loud wall
Mostly paper and ink so the project photographs do the talking.
C
Red means act
Signal red is reserved for the button we want pressed.
D
Specs, stated plainly
Codes and mono labels speak the architect's language.
Wordmark
Until a symbol is designed, the name set in Anton is the logo.
Bombay Surface Co.An Arihant Digiprint company
On paper or whiteBombay Surface Co.An Arihant Digiprint companyOn ink
BSCShort mark · social & favicon
- Wordmark
- Anton 400 · UPPERCASE · +0.03em
- Descriptor
- JetBrains Mono 400 · 11px · UPPER
- Header size
- 19px wordmark
- Minimum
- 16px wordmark · 11px descriptor
- Clear space
- Height of the letter "B" on all sides
- Colours
- Ink on light · White on ink or red
Don't
- Stretch, outline, rotate or add effects.
- Set the wordmark in any font other than Anton.
- Place it on busy photos without a dark or light panel.
- Put the red short mark on red buttons.
A drawn logo symbol is not designed yet. This wordmark is the interim identity.
Colour
Click any swatch to copy its colour code.
Brand colours
Neutrals
States & functional
Registration strip Decorative only
A nod to Arihant Digiprint's printing heritage. Use only as a small strip or mark: under the hero, in the footer, beside counters. Never as fills, text or buttons.
Proportion
Mostly light, one dark section per page, red kept to the buttons you want pressed.
Contrast pairs
| Text | Background | Ratio | Use |
|---|---|---|---|
| Ink | Paper | 17.5:1 | Pass |
| Text muted | Paper | 6.7:1 | Pass |
| Text subtle | Paper | 5.0:1 | Pass |
| White | Signal red | 4.9:1 | Pass |
| White | Ink | 18.7:1 | Pass |
| Signal red | Paper | 4.6:1 | Pass |
Typography
Three free Google Fonts, each with one job.
TextGoogle Fonts · Free
Archivo
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
Regular 400 · Medium 500 · Semibold 600
- Weights
- 400 body · 500 links, nav · 600 H3, H4, buttons
- Case
- Sentence case
- Use
- H3, H4, body, buttons, forms
- Fallback
- system-ui, Segoe UI, sans-serif
DetailGoogle Fonts · Free
JetBrains Mono
BSC-WP-04 · 10 ft · P-07
WIDTH (FT) · 01 / 24
- Weights
- 400, 500
- Case
- UPPERCASE for labels
- Size
- 11–13px only
- Use
- Labels, codes, specs, counters
Embed code
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Type scale
Every text style used on the website, from H1 to the smallest label.
Sizes scale smoothly between phone (first value) and large desktop (second value). Rules: only Anton for H1 and H2; never bold Anton; never set body text in Anton or mono; keep paragraphs under 70 characters wide.
Your artwork. Any wall.
- Font
- Anton 400
- Size
- 44px → 96px
- Line
- 1.02
- Tracking
- +0.01em
- Case
- UPPER
- Use
- Homepage hero only
Customised wallpaper
- Font
- Anton 400
- Size
- 40px → 84px
- Line
- 1.02
- Tracking
- +0.01em
- Case
- UPPER
- Use
- Page titles
Pick your finish
- Font
- Anton 400
- Size
- 30px → 48px
- Line
- 1.02
- Tracking
- +0.01em
- Case
- UPPER
- Use
- Section titles
Send your design
- Font
- Archivo 600
- Size
- 18px → 19px
- Line
- 1.3
- Tracking
- −0.01em
- Case
- Sentence
- Use
- Card, step and item titles
Wall coverings
- Font
- Archivo 600
- Size
- 16px → 16px
- Line
- 1.3
- Tracking
- −0.01em
- Case
- Sentence
- Use
- Menu groups, small headings
Wallpaper made for one wall, printed in-house.
- Font
- Archivo 400
- Size
- 17px → 19px
- Line
- 1.6
- Tracking
- 0
- Case
- Sentence
- Use
- Intro paragraph under a title
We scale your design to the wall and mark doors and switches.
- Font
- Archivo 400
- Size
- 16px → 16px
- Line
- 1.6
- Tracking
- 0
- Case
- Sentence
- Use
- Paragraphs, lists, tables
Frosted, decorative and printed films.
- Font
- Archivo 400
- Size
- 14px → 15px
- Line
- 1.5
- Tracking
- 0
- Case
- Sentence
- Use
- Card text, footer links
* To be confirmed per project.
- Font
- Archivo 400
- Size
- 13px → 13px
- Line
- 1.5
- Tracking
- 0
- Case
- Sentence
- Use
- Footnotes, placeholders
Customised wallpaper · India
- Font
- JetBrains Mono 500
- Size
- 11px → 11px
- Line
- 1.2
- Tracking
- +0.09em
- Case
- UPPER
- Use
- Section labels, form labels
BSC-WP-04
- Font
- JetBrains Mono 400
- Size
- 11px → 11px
- Line
- 1
- Tracking
- +0.08em
- Case
- UPPER
- Use
- Finish and project codes
Buttons & links
Square, solid and direct. Heights and paddings are fixed; widths follow the words.
Primary
- Fill
- #D9261C → hover #BB1F16
- Text
- #FFFFFF · Archivo 600 · 15px
- Height
- 48px
- Padding
- 0 22px
- Corners
- 0px (square)
- Use
- One main action per view
Secondary
- Fill
- Transparent
- Border
- 1px #CDCCC7 → hover #121212
- Text
- #121212 · Archivo 600 · 15px
- Height
- 48px
- Padding
- 0 22px
- Corners
- 0px (square)
Secondary on dark
- Border
- 1px #4A4A47 → hover #FFFFFF
- Text
- #FFFFFF
- WhatsApp dot
- 7px circle · #25D366
- Gap
- 10px
Large
- Height
- 60px
- Padding
- 0 32px
- Text
- Archivo 600 · 16px
- Use
- Final call to action in a section
Text link
- Text
- Archivo 500 · inherits size
- Underline
- 1px, 3px below text
- Hover
- Underline slides away
- Use
- Secondary navigation inside content
States
DefaultDefault
HoverHover · darker red
FocusKeyboard focus · 2px ink ring, 3px gap
DisabledDisabled · 40% opacity
Do
- Name the action: "Get a quote", "Quote on WhatsApp".
- Use one red button per view.
- Add → only when the button moves you forward.
Don't
- Round the corners or use pill shapes.
- Use red for secondary actions.
- Write "Submit", "Click here" or "OK".
Forms & chips
Plain fields with clear labels and honest error messages.
Please add your name
- Label
- JetBrains Mono 500 · 11px · UPPER · +0.08em
- Field
- 48px tall · 12px 14px padding · 16px text
- Border
- 1px #CDCCC7 → focus 2px #121212
- Error
- 2px #D9261C border + 13px message
- Corners
- 0px
- Gap
- 7px label to field · 14px between fields
- Chip
- 40px tall · 0 14px · 14px text
- Selected
- Ink fill, white text
- Jump link
- 38px tall · hover fills ink
- Corners
- 0px
Corners & lines
Structure comes from thin lines and square edges, not shadows and rounded boxes.
Square corners everywhere, like a trimmed print sheet. The only round shapes are circular icon buttons and small dots.
Buttons0px
Inputs & selects0px
Chips & jump links0px
Cards & panels0px
Photos0px
Round icon buttons50%
WhatsApp dot50%
Lines & borders
| Hairline divider | 1px solid #E4E3DF | Between rows, list items, section rules |
| Strong line | 1px solid #CDCCC7 | Input and secondary button outlines |
| Ink rule | 1px solid #121212 | Top of step lists and contact rows |
| Focus ring | 2px solid #121212 · 3px offset | Keyboard focus on everything |
| Crop marks | 16px corners · 1px #CDCCC7 · 9px outside | Signature detail on key photos |
Crop marks
Photo with crop marks
Shadows
Almost none. Only floating elements (menus, the floating WhatsApp button, the gallery counter) get a soft shadow: 0 12px 32px -12px rgba(0,0,0,.4). Cards use a 1px line instead.
Spacing
A scale in steps of 4 and 8.
Tight inside a group, generous between groups. Sections breathe; content inside them sits close.
4pxIcon to text (tight)
8pxChips, small gaps
12pxBetween photos in a carousel
16pxInside small components
24pxGrid gaps, card padding
32pxBetween blocks
48pxSection header to content (mobile)
64pxSection header to content (desktop)
88pxSection padding (mobile)
144pxSection padding (desktop)
Layout & grid
One content width, flexible columns, four screen sizes.
1280pxMaximum content width
20–48pxSide margin (scales with screen)
72pxHeader height (64px on phones)
12Columns, flexible
Breakpoints
| Phone | up to 600px | 1 column · bottom contact bar · menu button |
| Tablet | 601–860px | 2 columns · side-by-side becomes stacked |
| Laptop | 861–1120px | Full layouts · menu button still used |
| Desktop | 1121px + | Full navigation · floating WhatsApp button |
Imagery
The work is the hero. Photograph it straight, show the finish up close.
Do
- Shoot the installed wall straight-on, with people or furniture for scale.
- Pair every wide shot with a close-up of the finish in raking light.
- Use real BSC projects only, with the project type and city.
- Keep photos square-cornered, edge to edge, 8–12px apart.
Don't
- Use stock photos of other companies' interiors.
- Add filters, heavy vignettes or rounded corners.
- Put text over busy parts of a photo without a dark fade.
- Invent project names, clients or locations.
Icons
Few, thin and consistent.
- Style
- Outline, drawn on a 24px grid
- Stroke
- 1.6px, round ends
- Sizes
- 14px, 18px, 24px
- Colour
- Inherits text colour
- Never
- Emoji, filled icons, mixed icon sets
Motion
Everything eases out, like paper settling.
| Moment | Duration | Easing | Where |
|---|---|---|---|
| Hover colour | 150–200ms | ease | Buttons, links, chips |
| Menus & fades | 200ms | cubic-bezier(.2,.7,.2,1) | Mega menu, captions |
| Arrow nudge | 250ms | cubic-bezier(.2,.7,.2,1) | → moves 3px on hover |
| Section reveal | 700ms | cubic-bezier(.2,.7,.2,1) | Fade up 14px on scroll |
| Gallery wipe | 1100ms | cubic-bezier(.16,1,.3,1) | Photo reveals bottom to top |
Motion is quiet and quick. When a visitor has "reduce motion" switched on, everything appears instantly.
Voice & copy
Plain words for busy professionals.
We sound
- ClearFacts over adjectives. "Printed to your wall size", not "stunning bespoke solutions".
- ConfidentShort sentences. We say what we do.
- Trade-literateWe speak specs, strike-offs, elevations and BOQs.
- HonestUnconfirmed details are marked, never invented.
Say it like this
| Instead of | Write |
|---|---|
| Submit | Get my quote |
| Innovative wall solutions | Customised wallpaper, printed to size |
| Contact us for more information | Share drawings on WhatsApp |
| World-class quality | Printed in-house by Arihant Digiprint |
Name
Full name Bombay Surface Company on first use. Bombay Surface Co. in the wordmark. BSC in codes and casual copy. Always introduce as an Arihant Digiprint company.
Avoid
Seamless, cutting-edge, world-class, revolutionary, elevate, unlock, supercharge, one-stop solution. Emoji. Exclamation marks in headings.
WhatsApp quote message
Pre-filled message
Hi BSC, I'm an architect / interior designer. I'd like a quote for [service]. Project location: ___. I can share drawings.
Accessibility
Everyone should be able to read, tap and send an enquiry.
- Body text at least 4.5:1 contrast; large headings at least 3:1.
- Every button and link reachable by keyboard, with the 2px ink focus ring.
- Tap targets at least 40px tall (buttons 48px).
- Every photo has a description of what it shows.
- Forms name the problem and how to fix it ("Please add a number").
- Motion switches off for visitors who ask for reduced motion.
- Headings follow order: one H1, then H2, H3, H4.
- Text is never placed inside images.