Studio Graphite Theme

FkeMark Docs now use Studio Graphite as the default visual system. It is designed for a Markdown editor: warm paper surfaces reduce cold-screen fatigue, graphite text adds a product-document feel, and copper plus teal carry actions, links, status, and accents.

The site uses VitePress Theme Teek + FkeMark custom CSS. Teek provides documentation features, while the custom styles keep the Studio Graphite home page, docs pages, top navigation, sidebar, buttons, links, and Markdown details consistent.

Why Teek

This selection keeps Teek as the capability layer instead of migrating to another third-party theme:

Still VitePress-based: Markdown-first, static builds, and Cloudflare Pages friendly.
Richer docs features: article cards, code block enhancements, theme color switching, back-to-top, site analysis, and grouped footers are already wired in.
Centralized configuration: defineTeekConfig keeps navigation, sidebars, language switching, version links, and theme enhancements in one place.
Default home page retained: teekHome: false + vpHome: true keeps the VitePress home layout while adding FkeMark sections.
Pluggable visual layer: custom.css inserts a new theme without dismantling navigation, search, and footer behavior.

Enabled Teek features

Feature	Usage
`pageStyle: 'card-nav'`	Card-style reading layout for guide pages
`themeEnhance`	Studio Copper, Editor Teal, layout enhancement, and spotlight reading helper
`codeBlock`	Enhanced code blocks, long-code collapse, and language labels
`backTop`	Reading-progress back-to-top button
`articleAnalyze`	Updated time, word count, and reading info
`docAnalysis`	Site statistics in the footer area
`footerGroup` / `footerInfo`	Project, version, deploy, and theme links

Design principles

Warm paper surface: replace the single blue-white wash with beige pages and warm white content cards.
Graphite structure: use graphite for body text, code windows, and navigation structure to match a local editor and project-doc tone.
Two accent colors: copper handles primary buttons, links, and heading ornaments; teal handles secondary states and editor-like details.
Product-doc home page: keep the Markdown sample, workflow cards, and doc map while using hierarchy to reduce repetitive card blocks.
Subtle motion: keep only small hover feedback and respect prefers-reduced-motion.

Color tokens

warm paper / #f3eee6

paper card / #fffaf2

graphite ink / #211c18

studio copper / #c96442

editor teal / #179fa4

sidebar paper / #e8dfd2

Reuse in a Markdown renderer

File	Purpose
`doc/.vitepress/theme/custom.css`	Studio Graphite overrides for global surfaces, docs pages, top navigation, sidebar, and Teek components
`doc/.vitepress/theme/home.css`	Home-page Markdown sample, workflow cards, and CTA module styles
`doc/public/theme/fkemark-vellum.css`	Reusable Studio Graphite CSS for an application Markdown preview area

The fkemark-vellum.css file name and fkemark-vellum class are kept for compatibility with older references; the current visual style is Studio Graphite.

Import the CSS and add the fkemark-vellum class to your Markdown container:

html

<link rel="stylesheet" href="/theme/fkemark-vellum.css" />

<article class="markdown-body fkemark-vellum">
  <h1>Project notes</h1>
  <blockquote>Local files first, writing stays portable.</blockquote>
  <pre><code>const mode = 'Live + Source'</code></pre>
</article>

VitePress theme entry

import Teek from 'vitepress-theme-teek'
import 'vitepress-theme-teek/index.css'
import './custom.css'

export default Teek

Best fit

Good for tutorials, long-term notes, project docs, reading notes, technical plans, and final review before publishing.

Not ideal for dense dashboards, heavy marketing pages, or highly interactive chart-heavy pages.

Studio Graphite Theme ​

Why Teek ​

Enabled Teek features ​

Design principles ​

Color tokens ​

Reuse in a Markdown renderer ​

VitePress theme entry ​

Best fit ​

References ​