What font does ね use?

ね’s website uses four typefaces: Syne Extra (headings and body text), self-hosted; HappyTimes, self-hosted; Syne Bold, self-hosted; Objectivity, self-hosted.

What are ね’s brand colours?

The main colours on nathan.tokyo are Midnight Blue (#1F0539), Dark Slate Blue (#554167), Grey (#7F718B), Pale Violet Red (#B65B7F), Pale Golden Rod (#F4ECA4) and Rebecca Purple (#7F519D).

What colour is ね’s text and background?

Body text is #1F0539 on a #F5F4F0 background.

Is this ね’s official style guide?

No. SiteStyleGuide made it from nathan.tokyo’s public web pages on 21 October 2026, and isn’t affiliated with ね. Members can refresh a guide after 90 days to pick up changes.

ね Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: ね — NT; ● 6 / 60 characters
Meta description: Nathan Taylor is an interactive designer & developer.; ● 53 / 160 characters
og:title: nathan tokyo - interactive designer & developer - ね
og:description: Hi I'm Nathan. Please visit my website and click on everything.
Theme colour: #ffffff

In search results

ねhttps://nathan.tokyo/

ね — NT

Nathan Taylor is an interactive designer & developer.

When shared

nathan.tokyo

nathan tokyo - interactive designer & developer - ね

Hi I'm Nathan. Please visit my website and click on everything.

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

0 found

The site doesn’t seem to have a favicon.

Back to top ↑

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 (#1F0539) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Off White 31.1%
Midnight Blue 31.1%
Warm Off White 8.1%
White 5.5%
Cool Light Grey 3.5%
Dark Slate Blue 3.5%
Grey 3.5%
Pale Violet Red 3%
Pale Golden Rod 2.8%
Rebecca Purple 2.2%
Sea Green 2.2%
Thistle 1.3%
Red 1.3%
Dark Khaki 1%

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

Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 2 4

On text
16.75:1 AAA

On white
1.10:1 Fail

Background, text, border · .tictac__bgInner, .about__image
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 7 12

On text
13.64:1 AAA

On white
1.35:1 Fail

Background, text, border · .u-bgGrey, .projectHeader__imageInner
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.44:1 AAA

On white
—

Background, text, theme · theme-color meta tag, .u-bgWhiteWhite
Cool Light Grey

HEX

RGB

HSL

OKLCH

CMYK
2 7 0 27

On text
8.40:1 AAA

On white
2.20:1 Fail

Background · .about__image

Colours

Brand colours and accents, most used first

Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
46 91 0 78

On text
—

On white
18.44:1 AAA

Background, text, border · .tictac__bgInner, .about__image
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
17 37 0 60

On text
2.05:1 Fail

On white
8.98:1 AAA

Background · .about__image
Grey

HEX

RGB

HSL

OKLCH

CMYK
9 19 0 45

On text
4.07:1 AA large

On white
4.53:1 AA

Background · .about__image
Pale Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 50 30 29

On text
4.21:1 AA large

On white
4.38:1 AA large

Text, border, background · .type__typing, .type__response--them
Pale Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 3 33 4

On text
15.26:1 AAA

On white
1.21:1 Fail

Background, text · .u-bgYellow, .pacman__man
Rebecca Purple

HEX

RGB

HSL

OKLCH

CMYK
19 48 0 38

On text
3.13:1 AA large

On white
5.89:1 AA

Background, text, border · .u-bgPurple, .eye__pupil--3
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
35 0 22 45

On text
4.70:1 AA

On white
3.92:1 AA large

Text, background, graphic · .u-bgGreen, .eye__pupil--1
Thistle

HEX

RGB

HSL

OKLCH

CMYK
3 17 0 24

On text
7.91:1 AAA

On white
2.33:1 Fail

Background · .u-bgGradient
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
4.61:1 AA

On white
4.00:1 AA large

Background · .tictac__input.is-tic, .sequencer__panel
Dark Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 2 31 29

On text
8.36:1 AAA

On white
2.21:1 Fail

Text, background · .u-bgKhaki, .t-khaki

Gradients

linear-gradient(45deg,#f5f4f0 10%,#bca1c1 90%)
linear-gradient(#1f0539 0,#554167 10%,#7f718b 20%,#b5acb9 30%,#e0dcde 40%,#f5f4f0 48%,#f5f4f0 52%,#e0dcde 60%,#b5acb9 70%,#7f718b 80%,#554167 90%,#1f0539 100%)
radial-gradient(#f5f4f0 1%,#1f0539 15.3%,#f5f4f0 15.4%,#f5f4f0 14.44%,#1f0539 36.9%,#f5f4f0 36.9%,#f5f4f0 31.64%,#1f0539 58.4%,#f5f4f0 58.4%,#f5f4f0 62.5%,#1f0539 76.4%,#f5f4f0 64.58%)

Back to top ↑

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.

Syne Extra

Aa 400 Aa 800

Syne Extra

Self-hosted · weights 400, 800 · headings · shown in a stand-in if you don’t have it

Aa 400

HappyTimes

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 400

Syne Bold

Self-hosted · weights 400 · shown in a stand-in if you don’t have it

Aa 300 Aa 800

Objectivity

Self-hosted · weights 300, 400, 600, 700, 800 · buttons · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Paragraph 1.125rem · 18 px / 1.3

Nathan Taylor is an interactive designer & developer.

Sizes in use

Most common across the site

80pxline .78 · 2 rules
40pxline 1.1 · 2 rules
24pxline 1.1 · 3 rules
20px3 rules
14px4 rules
13px3 rules
10px3 rules
8px4 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

100% · 13×
.625rem · 3×
0 2.5rem 2.5rem 0 · 2×
000% 000% 000% 000% · 1×
100% 000% 000% 000% · 1×
000% 100% 000% 000% · 1×

Shadows

.3125rem .3125rem 0 #1f0539

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

780

On a scale of 0 to 1440 px.

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 6 characters, short enough to show in full in search results.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).
▲ CheckNo favicon could be found.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does ね use?: ね’s website uses four typefaces: Syne Extra (headings and body text), self-hosted; HappyTimes, self-hosted; Syne Bold, self-hosted; Objectivity, self-hosted.
What are ね’s brand colours?: The main colours on nathan.tokyo are Midnight Blue (#1F0539), Dark Slate Blue (#554167), Grey (#7F718B), Pale Violet Red (#B65B7F), Pale Golden Rod (#F4ECA4) and Rebecca Purple (#7F519D).
What colour is ね’s text and background?: Body text is #1F0539 on a #F5F4F0 background.
Is this ね’s official style guide?: No. SiteStyleGuide made it from nathan.tokyo’s public web pages on 21 October 2026, and isn’t affiliated with ね. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

nathan-tokyo-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* nathan.tokyo design tokens, from SiteStyleGuide (https://sitestyleguide.com/nathan.tokyo) */
:root {
  /* Colours */
  --text: #1F0539;
  --background: #F5F4F0;
  --colour-off-white: #F5F4F0;
  --colour-warm-off-white: #E0DED1;
  --colour-white: #FFFFFF;
  --colour-cool-light-grey: #B5ACB9;
  --colour-midnight-blue: #1F0539;
  --colour-dark-slate-blue: #554167;
  --colour-grey: #7F718B;
  --colour-pale-violet-red: #B65B7F;
  --colour-pale-golden-rod: #F4ECA4;
  --colour-rebecca-purple: #7F519D;
  --colour-sea-green: #5B8B6C;
  --colour-thistle: #BCA1C1;
  --colour-red: #FF0000;
  --colour-dark-khaki: #B4B17C;
  --gradient-1: linear-gradient(45deg,#f5f4f0 10%,#bca1c1 90%);
  --gradient-2: linear-gradient(#1f0539 0,#554167 10%,#7f718b 20%,#b5acb9 30%,#e0dcde 40%,#f5f4f0 48%,#f5f4f0 52%,#e0dcde 60%,#b5acb9 70%,#7f718b 80%,#554167 90%,#1f0539 100%);
  --gradient-3: radial-gradient(#f5f4f0 1%,#1f0539 15.3%,#f5f4f0 15.4%,#f5f4f0 14.44%,#1f0539 36.9%,#f5f4f0 36.9%,#f5f4f0 31.64%,#1f0539 58.4%,#f5f4f0 58.4%,#f5f4f0 62.5%,#1f0539 76.4%,#f5f4f0 64.58%);

  /* Typefaces */
  --font-headings: 'Syne Extra', sans-serif;
  --font-other: 'Syne Bold', sans-serif;
  --font-buttons: 'Objectivity', 'Hiragino Sans', 'Hiragino Sans GB', sans-serif;

  /* Type scale */
  --text-p: 1.125rem;
  --leading-p: 1.3;

  /* Shape */
  --radius-1: 100%;
  --radius-2: .625rem;
  --radius-3: 0 2.5rem 2.5rem 0;
  --radius-4: 000% 000% 000% 000%;
  --radius-5: 100% 000% 000% 000%;
  --radius-6: 000% 100% 000% 000%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 780px;
}

{
    "site": "nathan.tokyo",
    "source": "https://sitestyleguide.com/nathan.tokyo",
    "text": "#1F0539",
    "background": "#F5F4F0",
    "colours": [
        {
            "name": "Off White",
            "hex": "#F5F4F0",
            "rgb": [
                245,
                244,
                240
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#E0DED1",
            "rgb": [
                224,
                222,
                209
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Light Grey",
            "hex": "#B5ACB9",
            "rgb": [
                181,
                172,
                185
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#1F0539",
            "rgb": [
                31,
                5,
                57
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#554167",
            "rgb": [
                85,
                65,
                103
            ]
        },
        {
            "name": "Grey",
            "hex": "#7F718B",
            "rgb": [
                127,
                113,
                139
            ]
        },
        {
            "name": "Pale Violet Red",
            "hex": "#B65B7F",
            "rgb": [
                182,
                91,
                127
            ]
        },
        {
            "name": "Pale Golden Rod",
            "hex": "#F4ECA4",
            "rgb": [
                244,
                236,
                164
            ]
        },
        {
            "name": "Rebecca Purple",
            "hex": "#7F519D",
            "rgb": [
                127,
                81,
                157
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#5B8B6C",
            "rgb": [
                91,
                139,
                108
            ]
        },
        {
            "name": "Thistle",
            "hex": "#BCA1C1",
            "rgb": [
                188,
                161,
                193
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Dark Khaki",
            "hex": "#B4B17C",
            "rgb": [
                180,
                177,
                124
            ]
        }
    ],
    "fonts": [
        {
            "name": "Syne Extra",
            "stack": "\"Syne Extra\", sans-serif",
            "weights": [
                400,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "HappyTimes",
            "stack": "HappyTimes, \"Times New Roman\", Times, serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Syne Bold",
            "stack": "\"Syne Bold\", sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Objectivity",
            "stack": "Objectivity, \"Hiragino Sans\", \"Hiragino Sans GB\", sans-serif",
            "weights": [
                300,
                400,
                600,
                700,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Aventine",
            "stack": "Aventine, serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run nathan.tokyo?

Add the badge to your site

Link 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/nathan.tokyo" title="ね style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

ねstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Off White

Warm Off White

White

Cool Light Grey

Colours

Midnight Blue

Dark Slate Blue

Grey

Pale Violet Red

Pale Golden Rod

Rebecca Purple

Sea Green

Thistle

Red

Dark Khaki

Gradients

Syne Extra

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Vanta

Zoom

Accessify

expedia

ねstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Off White

Warm Off White

White

Cool Light Grey

Colours

Midnight Blue

Dark Slate Blue

Grey

Pale Violet Red

Pale Golden Rod

Rebecca Purple

Sea Green

Thistle

Red

Dark Khaki

Gradients

Syne Extra

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run nathan.tokyo?

Similar colours

Vanta

Zoom

Accessify

expedia

Title &
description