design system
neon-reef theme
eleventy
Yolo Neon Reef
Loveable single pages.
A sample deck that walks through the colors, typefaces and components of the Yolo Neon Reef theme.
// agenda
What’s inside
01
Color
A light and a dark ground, a heading voice and one accent color.
02
Type
Montserrat headings, Space Mono body and Source Code Pro for code.
03
Components
Pills, tabs, cards, code blocks, tables and blockquotes.
04
Modes
Every color token has a light and a dark value.
Yolo Neon Reef
02 / 11
// foundations · color
One accent.
Hot pink.
It carries the marks: list markers, the dashed rule, the blockquote edge, link color and every hover fill.
// foundations · color
Color tokens
Light
bg
#F2FFFC
surface
#FFFFFF
border
#BFEFE3
text
#13333A
heading
#0B7C6A
primary
#0CCB9E
Dark
bg
#111E24
surface
#152831
border
#1F3A44
text
#E5FFFB
heading
#9CFFE5
primary
#32F5B8
Yolo Neon Reef
04 / 11
// foundations · type
Three typefaces
Aa
Montserrat
Headings, pills, tabs, table headers and blockquotes. 400 / 700.
Aa
Space Mono
Body copy, lists and table cells at 1rem with 1.5 line height.
Aa
Source Code Pro
Inline code and pre blocks at 0.8rem on the surface color.
Scale h1 3rem · h2 2.5rem · h3 2rem · h4 1.5rem · h5 1.25rem · h6 1rem
Yolo Neon Reef
05 / 11
// foundations · scale
The system at a glance
12
Source colors
Grounds, text, heading, accent and five syntax hues.
3
Typefaces
Montserrat, Space Mono and Source Code Pro.
6
Spacing steps
From 0.25rem (xs) up to 3rem (2xl).
4
Corner radii
sm, md, lg and pill, from 0.25rem to 3rem.
Yolo Neon Reef
06 / 11
// components
Controls and containers
Tag pills
branding
photos
hover
Tabs
Posts
Pages
Tags
Utility fills
neutral
error
warn
info
hub card · lifted
Function codes
Type / in any search box to turn it into a command line.
search
docs
Read the post →
Yolo Neon Reef
07 / 11
// components
Code blocks
Source Code Pro on the surface color, with five syntax hues.
keyword · #32F5B8
string · #9CFFE5
function · #4FD8FF
variable · #E5FFFB
comment · #6B8A8F
theme.json
// neon-reef · dark mode
{
"bg": "#111E24",
"heading": "#9CFFE5",
"primary": "#32F5B8"
}
$ npm run serve
Yolo Neon Reef
08 / 11
// components
Function codes
Typing / in any search box turns it into a command line.
Command
What it does
/tag photos
Show posts tagged “photos”
/page 2
Jump to the second page
/sort old
List the oldest posts first
Enter · Esc
Run the command · back to searching
Yolo Neon Reef
09 / 11
// light
Light mode
Loveable single pages
The site default. Text on the light ground, with links in the heading color inside containers.
branding
hover
bg #F2FFFC · text #13333A
// dark
Dark mode
Loveable single pages
Toggled with dark_mode. Every token clears 4.5:1, with links in the heading color inside containers.
branding
hover
bg #111E24 · text #E5FFFB
thanks for scrolling
Yolo on my friend.
Loveable single pages, built on Eleventy.
github.com/corbtastik/yolo-11ty
Yolo Neon Reef · light + dark