Styleguide
The Oktav design system on one page: color tokens, type, layout, components and content rules. It is written so people and AI agents read it the same way.
Host Grotesk in one weight, 400
Four sizes: 10, 12, 16 and 20 px
Hierarchy comes from color: Text and Text Muted
Groups are separated by space, not by lines
Every color is a token with a light and a dark value
Canvas
Light #FFFFFF · Dark #000000 · Page background
Surface
Light #F0F0F0 · Dark #0F0F0F · Sidebar and info panel
Selected
Light #E6E6E6 · Dark #1C1C1C · Active and hover fills, badges
Line
Light #E0E0E0 · Dark #262626 · Window edge and form fields only
Text
Light #000000 · Dark #FFFFFF · Primary text
Text Muted
Light #666666 · Dark #999999 · Labels and secondary text
Glass
Light rgba(240, 240, 240, 0.86) · Dark rgba(20, 20, 20, 0.86) · Contact window, with a 24 px blur
Scrim
Light rgba(0, 0, 0, 0.4) · Dark rgba(0, 0, 0, 0.6) · Backdrop behind the contact window
Oktav builds identities, websites and stores.
Title · 20 / 24 · h1 · Page statements and article titles
Section heading
Heading · 16 / 22 · h2, Text Muted · Labels on reading pages
Reading is for long text, like case studies, articles and roles.
Reading · 16 / 22 · Body text on reading pages
Toolbar title
Bar Title · 12 / 16 · h1 · Page titles in the toolbar
Interface text, captions, lists and panels
UI · 12 / 16 · Sidebar, captions and the info panel
Panel copy with 10 px between paragraphs
UI Prose · 12 / 16 · Descriptions inside the info panel
New
Micro · 10 / 10 · Badges
Text, turns Text Muted on hover
Text Muted, turns Text on hover and on the current page
Underlined in Text Muted, used inside sentences
Pill on the current page, used for discipline tabs
Breakpoints: desktop from 1200, tablet 810 to 1199, phone below 810
Desktop panes: sidebar 200, main column, info panel 300
Info Panel is a page setting: Show on detail pages, Hide on index pages
Toolbar: 32 px and sticky on every page
Reading pages: a 640 px column with a 160 px label column
Work grid: masonry in 3 columns, 2 on tablet, 1 on phone, 16 px gaps
Spacing steps: 2, 4, 8, 12, 16, 24, 32 and 48
Radius: 2 for badges, 4 for rows and swatches, 10 for windows
Nav Item: Default, Muted and Active, each with a hover state. Props: Label, Link, New and Click.
Work Card: Default keeps a 16:9 frame, Masonry keeps the image ratio. On hover the project name turns Text and the media zooms.
Sidebar: Desktop, Tablet, Phone and two drawer variants. Its Section option sets the active nav item on each page.
Submit Button: Default, Pending, Success and Error. Theme Switch: a code component that swaps every token between light and dark.
Projects: Client, Project, Year, Disciplines, Featured, New, Order, Cover, Thumbnail, Cover Video, Gallery, Closing Image, Summary, Description, Credits, Typefaces, Live Label, Live Link
Disciplines: Name, Summary, Order
Articles: Title, Authors, Published, Read Time, Project, Cover, Summary, Body
Roles: Title, Summary, Hours, Contract, Location, Start, Order, Body
Thumbnail sets the card ratio in the work grid. Cover is used on case study pages and in social previews.
Card hover: media scales to 1.04 over 0.6 s with an ease-out curve
Text and fills change color in 0.12 to 0.15 s
Contact window: fades in and rises 8 px over 0.25 s
Reduced motion settings are respected
Give this block to an AI agent before it edits the site. The values match the Framer color tokens and text styles, and the Framer Skills /design-system and /customize carry the full rules.
{"color":{"canvas":{"light":"#FFFFFF","dark":"#000000","use":"page background"},"surface":{"light":"#F0F0F0","dark":"#0F0F0F","use":"sidebar and info panel"},"selected":{"light":"#E6E6E6","dark":"#1C1C1C","use":"active and hover fills, badges"},"line":{"light":"#E0E0E0","dark":"#262626","use":"window edge and form fields only"},"text":{"light":"#000000","dark":"#FFFFFF","use":"primary text"},"textMuted":{"light":"#666666","dark":"#999999","use":"labels and secondary text"},"glass":{"light":"rgba(240, 240, 240, 0.86)","dark":"rgba(20, 20, 20, 0.86)","use":"contact window, with a 24 px blur"},"scrim":{"light":"rgba(0, 0, 0, 0.4)","dark":"rgba(0, 0, 0, 0.6)","use":"backdrop behind the contact window"}}}
{"font":"Host Grotesk 400","type":{"title":"20/24 h1","heading":"16/22 h2 muted","reading":"16/22","barTitle":"12/16 h1","ui":"12/16","uiProse":"12/16, 10px paragraph spacing","micro":"10/10"},"links":{"plain":"text, hover muted","muted":"muted, hover text","inline":"underline","tab":"pill on current page"}}
{"breakpoints":{"desktop":1200,"tablet":810,"phone":390},"panes":{"sidebar":200,"infoPanel":300,"toolbar":32},"readingColumn":640,"labelColumn":160,"workGrid":{"columns":[3,2,1],"gap":16},"spacing":[2,4,8,12,16,24,32,48],"radius":{"badge":2,"row":4,"window":10},"motion":{"cardZoom":"scale 1.04, 0.6s, cubic-bezier(0.22,1,0.36,1)"},"rules":["one weight","colors only from tokens","no divider lines","sentence case labels"]}
Remix project