Akatora Ramen & More
- Pages (4)
- Style sheet
- Measured from 4 Pages
- Captured Oct 27, 2026
- Built with Custom code
Summary
Across 4 measured Pages: 8 colours, 2 typefaces and one corner radius. Not every Page uses all of them.
- Colours
- 8coloursBackground, Text, Surface and 2 more
- Typefaces
- 2typefacesPlayfair Display + DM Sans
- Base unit
- 8pxbase unit4 of 4 paddings on it
- Corner radii
- 1radiusPill
01 · Colour
Colour
Named by the job each colour does
The page behind everything
4/4 PagesMost of the text
4/4 PagesBands and cards on the page
4/4 PagesButtons and links
2/4 PagesSecondary text
2/4 PagesButtons and links
2/4 PagesSecondary text
1/4 PagesSecondary text
1/4 Pages
Contrast
Text on background 7.7 : 1 · AAA
Text on surface 6.5 : 1 · AA
Accent on background 8.9 : 1 · AAA
02 · Type
Type
Drawn in the Site's fonts if your browser has them
Headings
Playfair Display
Akatora Ramen & More
2/4 Pages
Body
DM Sans
The quick brown fox jumps over the lazy dog.
2/4 Pages
Headings
DM Sans
Akatora Ramen & More
2/4 Pages
03 · Spacing
Spacing
Measured as drawn on the desktop Capture
Section padding
8px base · 4 of 4 on the grid
- 96px2/4 Pages
- 128px1/4 Pages
- 112px1/4 Pages
The typical space at the top of a Section, one value per Page.
04 · Radius
Radius
The corner most buttons, fields and cards share
Pill 1/4 Pages
05 · Export
Export
Take the system with you
/* Design tokens from Akatora Ramen & More (https://www.akatoraramen.com), https://designly.sh/style-sheets/akatora-ramen-more, via Designly. Credit the business if you use them. */
:root {
--color-background: #0A0A0A;
--color-text: #9CA3AF;
--color-surface: #1E1E1E;
--color-accent: #D4A843;
--color-muted: #F5F5F0;
--color-accent-2: #B5232D;
--color-muted-2: #FFFFFF;
--color-muted-3: #8B929F;
--font-display: "Playfair Display", serif;
--font-body: "DM Sans", sans-serif;
--radius: 9999px;
--spacing: 8px;
--spacing-section: 96px;
}
Values only: Designly never copies a Site's font files or images. Fonts are named so you can license them.