Style guide
Every shared component of the Keres website and platform, on a single page. If something looks off here, it is off everywhere. Source: design-system/src — tokens in tokens.css, Tailwind names in tailwind.preset.js.
Colours
Semantic tokens only. Use the Tailwind name (bg-surface, text-muted, border-line); never a raw hex in a component.
Surfaces & lines
canvas
#010101 · page
sunken
#111 · panels
inactive
#141414 · idle
surface
#1a1a1a · cards
surface-hover
#262626
brand
#55442d · fills
line
#55442d · borders
edge
#2a2a2a · hairlines
Text & brand
fg
#f8f0e6 · body
soft
#e1c499 · strong
muted
#a3a3a3 · meta
subtle
#777 · hints
primary
#e19e5b · accent
primary-hover
#ebb075
ink
#1a1208 · on bright
Feedback
success
#48c78e
danger
#c62836
danger-text
#f5848f · on dark
warning
#f0a030
info
#3e8ed0
Board
tile-dark
tile-light
tile-stroke
piece-light
piece-dark
Typography
Three families: Carolingia (font-display: logo, hero, big numbers), RomanSerif (font-title: headings) and the sans stack (font-sans: body, UI).
h1 · hero / landing title (bare element)
Keres
.page-title + .page-subtitle · page heading in the platform
Lobby
Find an opponent or invite a friend.
h2 → h5 · RomanSerif (bare elements, used in content)
Heading 2
Heading 3
Heading 4
Heading 5
.card__title · .eyebrow · .stat__value
Card title
Eyebrow label1 842
Body, links, emphasis
Body copy in the cream fg colour with a link, some strong text, small text and muted meta text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
- List item one
- List item two
.intro — centred italic lead used on the rules page.
Shape & elevation
Buttons
Pill-shaped by default. .btn + one variant; add .btn--sm / .btn--lg for size. Replaces Bulma .button.is-rounded.is-*.
Variants
Sizes
With icon · icon only · links
States
Stacked preset buttons (lobby) — aria-pressed drives the selected look, no class toggling
Joined group · full width · modal close
Forms
The Symfony form theme maps onto these classes (form_row → .field, form_label → .label, form_errors → .help--danger).
Shown on your profile and in games.
This value is not a valid email address.
Composition · lobby “new seek” form
New game
Pick a preset or tune the time control below.
Cards & stats
Card
Default surface for grouped content (Bulma .box).
Interactive card
Border lights up on hover.
Statistics
Wins
128
Losses
94
Draws
12
Win rate 54.7% over 234 finished games
Magnus Online
@magnus · Member since March 2026
Tags
Solid
Soft (tinted)
Sizes · square
Alerts, callouts & modals
Callouts (rules page)
Modal
Resign this game?
You will lose the game immediately. This cannot be undone.
Move the whole stack?
This tile holds a stack. Choose what to move.
Send feedback
Empty state · spinner
You have no games in progress.
Navbar
Sticky in the app (static here so several can be shown). Resize below 1024px to see the burger menu. The notification panel is shown open.
Signed out
Signed in, notification panel open
Tabs, menu & pagination
Tabs
Pill tabs
Side menu (settings / admin)
Pagination — datagrid
Pagination — simple (page X of Y)
Language switcher
EnglishFrançaisTables & lists
Table (hover) in a card, scrolls horizontally on small screens
Open seeks (4)
| Player | Time control | Mode | Colour | |
|---|---|---|---|---|
| Ada (1612) | 3+2 | Rated | Random | |
| Linus (1540) | 10+5 | Casual | White | |
| You | 1+0 | Rated | Random | |
| Grace | 24h | Rated | Black | Unavailable |
Admin datagrid: toolbar, status tags, actions
Game rows · friends · announcements · notifications
Friends
- Ada @adaOnline
- Linus @linusRequest sent
- No pending requests.
Announcements
Tournament weekend
Join the first bot tournament on Saturday.
New board theme
Settings → Board lets you toggle coordinates and threats.
Show 2 moreShow less
Welcome
The platform is now open.
Notifications page
Game screen
The full game page (player cards, board, moves panel, three container-query layouts, fullscreen) has its own page with a viewport simulator: open the Game view lab →. Below, its building blocks in isolation.
Player card (slim row layout; becomes a tall column card ≥ 94rem)
Clock states
Status banner (one state at a time)
Evaluation bar (white ahead · black ahead · flipped · pending)
Icon buttons, game buttons, switches
Moves list + navigation
Moves
- 1.
- 2.
Option badges · feedback banner
Pieces & rules
Piece icons (CSS mask, 3 tints)
Piece cards (rules page)
Moves in an L shape.
Can jump over pieces.
Any distance orthogonally.
Movement table
| 1 | 1 | |||
| 1 | 1 | |||
| N | ||||
| 1 | 1 | |||
| 1 | 1 |
Hero & sections
Keres
A new abstract strategy game of stacking and tactics.
Play nowThe concept
Two armies, one board, and pieces that can carry each other. Stack, unstack and outmanoeuvre your opponent.
Read the rules
Collector's edition
Lightbox: click the board image above to open it.
Prose (legal pages, Markdown)
Privacy policy
We collect the minimum data necessary to run the service. Contact us for any GDPR request.
- Account data
- Game history
Your games belong to you.
Error page
Footer
Page layouts
Realistic compositions to check that everything sits together. Layout uses plain Tailwind grid utilities; Bulma's columns / level have no equivalent component.
Settings (menu + form)
Profile
Visible to other players.
Login
Dashboard
Admin dashboard
Total players
1 248
Connected (5 min)
37
Finished games
9 402
Stale games (24h+)
5