Will the iPhone Duo break in half when JerryRigEverything does his famous test for foldable phones?
5%
chance
Gohu design standard
The colors, type and parts that every gohu.ca app is built from. Link one stylesheet and the fonts, tokens and components come with it.
<link rel="stylesheet" href="https://colors.gohu.ca/gohu.css">
Also here: tokens.json for scripts and native apps, and gohu-mark.svg.
Brand
Interface, changes with the theme
Signals
Mark
A lowercase g with an indigo dot on a navy tile. It stands for the family account, so it shows up wherever someone signs in.
gohu.ca
Download SVG
- Use the fileThe g in
gohu-mark.svgis outlined, so it looks the same on every device. The favicon on gohu.ca today draws the g as live Helvetica text, which changes shape from one device to the next. - Keep its colorsNavy tile, white g, Indigo dot. The corner radius is 14 on a 64 grid. Don't recolor it to match an app.
- 20px in buttonsThe mark sits 20px square, 12px before the label, in the Sign in with Gohu button.
- Badge on app iconsApps Gohu makes wear the mark in the bottom-right corner, on a white ring so it never sinks into a dark icon.
Color
Navy and Indigo come from the mark and stay with it. Blue is the one accent: primary buttons, links and whatever is selected. Everything else is gray, so the few colored things stand out.
Brand
The same in light and dark.
Navy
The mark’s tile. Dark buttons on light pages, like Manage account on gohu.ca.
#131a33
Indigo
The mark’s dot, the .ca in the wordmark, and glyphs in app icons. Not for buttons or links.
#4353ff
Indigo deep
Shaded faces in app icons, like the fold on Docs. Hover for Navy buttons.
#2b37cc
Indigo light
Lit faces in app icons, like the top edge on Drive.
#7c88ff
Interface
These swap with the theme. Contrast is measured against the color each one sits on.
Paper
The page.
#ffffff
#0b0d10
Mist
Wells and secondary panels that sit a step back from the page.
#f6f7f9
#15181d
Card
Cards, buttons and inputs. The same as Paper in light, lifted in dark.
#ffffff
#15181d
Line
Every border and divider.
#e5e7eb
#25282d
Ink
Headings and body text.
#0e111618.91:1 AA
#f3f4f617.68:1 AA
Slate
Supporting copy, footers, unselected filters.
#6b72804.83:1 AA
#9aa0a67.37:1 AA
Blue
Anything you can press: primary buttons, links, the selected filter, focus rings.
#1652f06.00:1 AA
#3b6fff4.54:1 AA
On Blue
Text on a Blue button or selected pill.
#ffffff6.00:1 AA
#ffffff4.28:1 AA large
Blue tint
Blue at 15%. Focus halos on inputs, selected text.
#dce5fd
#121c34
Track
Ink at 15%. The empty part of a gauge or progress bar.
#dbdbdc
#2e3032
Signals
Yes and No stay the same in both themes. As text on their tints they’re too faint in light mode, so labels use a darker shade there.
Yes
Yes bets, gains, and a gauge at 50% or more.
#27ae60
Yes tint
Yes at 10%. The Yes button.
#e9f7ef
#0e1d18
Yes text
The Yes label, on its tint.
#1d7f464.55:1 AA
#27ae606.05:1 AA
No
No bets, losses, and a gauge under 50%.
#e74c3c
No tint
No at 10%. The No button.
#fdedeb
#211314
No text
The No label, on its tint.
#c0392b4.79:1 AA
#e74c3c4.70:1 AA
Type
Space Grotesk sets everything you read. JetBrains Mono is only for numbers that need to line up, like money and odds. Both ship with gohu.css, so there’s nothing else to load.
Space Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 … — ’ “ ” · ?!&
Regular400 body
Medium500 buttons
Semibold600 titles
Bold700 numbers
$23.07
0123456789
$ % . , + − ×
JetBrains Mono, 400 and 600. Tabular figures with .g-num.
Family apps
Sign in
Will the iPhone Duo break in half when JerryRigEverything does his famous test for foldable phones?
Sign in with Gohu
The Odds Are… uses your Gohu family account — the same login you use across all the family apps.
New here? Signing in with Gohu sets up your account automatically.
$23.07 traded
Titles and display text tighten to −0.025em. Everything else keeps default spacing. Sentence case throughout; no all-caps labels.
Shape and space
Hairlines, not shadows. Surfaces are white with a 1px Line border and no shadow until you point at something you can open.
Corners
Edges
Spacing
A 4px grid. Cards pad 20, stacks gap 8 to 16, sections breathe at 40 to 64.
Layout
- Content column768px,
.g-container. App pages never run wider. - Narrow column384px,
.g-narrow. Sign in and other single forms. - Gutter16px on each side at every width.
- Header64px, sticky, the page color at 88% with a 10px blur, a Line border underneath.
.g-header. - Motion140ms for hover, 220ms for things that open. A light spring for taps on mobile tabs. Nothing moves on its own.
Components
Everything here is plain HTML with .g- classes. Open the HTML under any example to copy it.
Buttons
One Blue button per screen. The outlined button is the default, and it’s how Sign in with Gohu looks everywhere. Navy is for the family hub.
Yes and No
Always a pair, Yes first, equal width.
Filters
Pills narrow a list. The selected one fills with Blue. They scroll sideways on small screens instead of wrapping.
Cards
A card holds one thing. The dashed tile beside it makes a new one.
Chance gauge
Set --value from 0 to 100. Use .g-gauge--yes at 50 and above, .g-gauge--no below. It scales with font size.
5%
chance
Disclosure
For the question some people have and most don’t. The chevron turns when it opens.
What’s Gohu, and why sign in with it?
Gohu is the single family account that all the family apps share. Instead of every app keeping its own list of usernames and passwords, The Odds Are… hands sign-in off to Gohu so there’s one account — and one password — to remember across everything.
It means your email address, profile info, and password are all the same here as in the other family apps. Change your password or update your details once in your Gohu account and it applies everywhere. The Odds Are… never sees or stores your password — Gohu handles that and just tells us who you are.
You can manage your Gohu account at https://account.gohu.ca.
Text field
Label above, hint below. Inputs are 16px so phones don’t zoom in when you tap them.
Ask something with a clear yes or no answer.
Footer
The app’s name, what it is, and its fine print, joined by middle dots. Links are underlined.
Patterns
Whole screens that repeat across the family. Build these the same way in every app.
Sign in
Every app signs in through Gohu and nothing else. The page explains Gohu before it asks you to use it.
Light
Sign in
The Odds Are… uses your Gohu family account — the same login you use across all the family apps. Sign in with Gohu to continue.
Sign in with Gohu
New here? Signing in with Gohu sets up your account automatically.
What’s Gohu, and why sign in with it?
Gohu is the single family account that all the family apps share. Instead of every app keeping its own list of usernames and passwords, The Odds Are… hands sign-in off to Gohu so there’s one account — and one password — to remember across everything.
It means your email address, profile info, and password are all the same here as in the other family apps. Change your password or update your details once in your Gohu account and it applies everywhere. The Odds Are… never sees or stores your password — Gohu handles that and just tells us who you are.
You can manage your Gohu account at https://account.gohu.ca.
Dark
Sign in
The Odds Are… uses your Gohu family account — the same login you use across all the family apps. Sign in with Gohu to continue.
Sign in with Gohu
New here? Signing in with Gohu sets up your account automatically.
What’s Gohu, and why sign in with it?
Gohu is the single family account that all the family apps share. Instead of every app keeping its own list of usernames and passwords, The Odds Are… hands sign-in off to Gohu so there’s one account — and one password — to remember across everything.
It means your email address, profile info, and password are all the same here as in the other family apps. Change your password or update your details once in your Gohu account and it applies everywhere. The Odds Are… never sees or stores your password — Gohu handles that and just tells us who you are.
You can manage your Gohu account at https://account.gohu.ca.
- HeaderThe app’s logo, centered, 48px tall. Add
.g-logo-adaptiveto a dark-on-clear logo so it flips in dark mode. - Title and intro“Sign in”, then one sentence that names the app and says it uses your Gohu account.
- One buttonSign in with Gohu, full width. No email field, no other providers.
- New accountsA caption says that signing in sets up an account, so nobody hunts for a sign-up link.
- More about GohuA closed disclosure, with a link to account.gohu.ca inside.
App list
How gohu.ca lists the family’s apps. Each card opens the app; the icon sits on a white tile in both themes.
Writing
Plain words, said the way you’d say them at the kitchen table. These apps are for family.
Sentence case, always
Buttons, filters, headings and titles. Capitalize only the first word and names.
Closing soonSign in with GohuNew market
Buttons say what happens
Use the verb and the thing. The same action keeps the same name through the whole flow.
+ New marketManage accountPlace bet
Answer the next question
If someone is likely to wonder, say it right there in a caption.
New here? Signing in with Gohu sets up your account automatically.
Gohu has a capital G
In sentences it’s a name. The wordmark is the only lowercase form.
Your Gohu accountgohu.ca
Fine print lives in the footer
Say the important limits once, plainly, at the bottom of every page.
The Odds Are… · play money only · no real currency
Use real punctuation
One ellipsis character, curly apostrophes and quotes, and em dashes with a space on each side.
The Odds Are…What’s Gohu?one account — and one password