diff --git a/.fastn/config.json b/.fastn/config.json
index a781a6d..02cc411 100644
--- a/.fastn/config.json
+++ b/.fastn/config.json
@@ -1,5 +1,5 @@
 {
-  "package": "fast-nspec",
+  "package": "fastn-spec.fifthtry.site",
   "all_packages": {
     "app-switcher.fifthtry.site": {
       "files": {
@@ -17282,6 +17282,32 @@
       "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=inter-typography",
       "checksum": "61C43A01DEAA5B4540B9B6B843249881BB90D68C8BE5DE085BA1B2756A3D0D5F"
     },
+    "lato-font.fifthtry.site": {
+      "files": {
+        "FASTN.ftd": {
+          "name": "FASTN.ftd",
+          "checksum": "0AF42D0A57EE4092A39EF1922E78181263FEA6216290E8CE9DE0AAD5748423EC",
+          "size": 5509
+        },
+        "README.md": {
+          "name": "README.md",
+          "checksum": "BC787B67F90323471FAFC4649BF27BC7A979EC84EF2704CA1F4883EA1EDE8DC5",
+          "size": 966
+        },
+        "custom.ftd": {
+          "name": "custom.ftd",
+          "checksum": "8161CE3D38D51321845491ECCF1B194A7E318BC1CF4F1BA0111F4D19C23731CA",
+          "size": 4996
+        },
+        "index.ftd": {
+          "name": "index.ftd",
+          "checksum": "23B8AE5012951E753E941D892B7BB74629310D714BFAED9A41B4F94DFC4C65C3",
+          "size": 2146
+        }
+      },
+      "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=lato-font",
+      "checksum": "0DED0EDF55852E760A2C09E50EBBBE4508915A28E499DB2BA22649E6F4CAD45B"
+    },
     "manrope-font.fifthtry.site": {
       "files": {
         "FASTN.ftd": {
@@ -17298,6 +17324,52 @@
       "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=manrope-font",
       "checksum": "DAB07152B3198E530D4CADDA3DB98DD8CC10A324554EA1344D6BF9FCC2F85A3F"
     },
+    "midnight-storm-typography.fifthtry.site": {
+      "files": {
+        "Changelog.md": {
+          "name": "Changelog.md",
+          "checksum": "3D8E5A54B51EC6632C7FDE92E3F413EB236290753673E8BF66AA4CD7A3B9A06F",
+          "size": 336
+        },
+        "FASTN.ftd": {
+          "name": "FASTN.ftd",
+          "checksum": "8402FCF8EFC13B9391729BC44FFA66B7A4E168DAC8A7609D3B8D9239B070BD68",
+          "size": 389
+        },
+        "LICENSE.md": {
+          "name": "LICENSE.md",
+          "checksum": "A95364C3842F2C439BD629F65E304A2850239B443596467254EE96E71CA213DD",
+          "size": 1498
+        },
+        "README.md": {
+          "name": "README.md",
+          "checksum": "7A5E46B6892D6A106463F03661BB7B7B64D8D4A5773733732B51ED26A090AF55",
+          "size": 1405
+        },
+        "fastn-typography.ftd": {
+          "name": "fastn-typography.ftd",
+          "checksum": "90C74114F286E69341572D40347FC483D6B7C4511C6CA41635A9A0D3CC10B72C",
+          "size": 8922
+        },
+        "index.ftd": {
+          "name": "index.ftd",
+          "checksum": "5EF2FC8842D30B5F911AD536E438E01398886EB3E25AB3550CB93848552B0F35",
+          "size": 13006
+        },
+        "static/midnight-strom-typography-dark-example.png": {
+          "name": "static/midnight-strom-typography-dark-example.png",
+          "checksum": "7A9C984A6BF29B53CEE2A6D298120CD0001ED789C6964EA2216F55AE75C93213",
+          "size": 90460
+        },
+        "static/midnight-strom-typography-example.png": {
+          "name": "static/midnight-strom-typography-example.png",
+          "checksum": "39EA8EF3A6125A0BEF45AA0E02E1E7AA58528D077F63AE5F5EEBFDB3BC8511A3",
+          "size": 88793
+        }
+      },
+      "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=midnight-storm-typography",
+      "checksum": "5E96175CCE023A8F37DA15CF99D3CD8F848F0D117E93D5920E69E31A38F4D7C7"
+    },
     "package-doc.fifthtry.site": {
       "files": {
         "FASTN.ftd": {
@@ -18566,6 +18638,32 @@
       "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=site-doc",
       "checksum": "1D9A320B3585C780F8A1EAF4809C280BB8DDAC8CECCB0CC4041E4F15E07352BA"
     },
+    "source-code-pro-font.fifthtry.site": {
+      "files": {
+        "FASTN.ftd": {
+          "name": "FASTN.ftd",
+          "checksum": "40B10C8BE03DFBFD10C8B84FFF848AB06635E04ADAFE3514B7D2F1CEBC4506CB",
+          "size": 29014
+        },
+        "README.md": {
+          "name": "README.md",
+          "checksum": "A7B1129859E44C42353835F88C1D828789EBBF91E0438235DA1402B6F858F7D5",
+          "size": 1045
+        },
+        "custom.ftd": {
+          "name": "custom.ftd",
+          "checksum": "828B9EF8A69F5297697EF3DBD91E04FD31B9D6F016561B9AA7B7820F37F3A5E6",
+          "size": 6991
+        },
+        "index.ftd": {
+          "name": "index.ftd",
+          "checksum": "3CA5A121F01529A6DCB689128B436ECA75A825832DD4E41A0DD66029793DB16A",
+          "size": 2483
+        }
+      },
+      "zip_url": "https://fifthtry.com/ft2/api/site/download?site-slug=source-code-pro-font",
+      "checksum": "0B291C3959F3B057B6EEDB6547E4D73034B1E85A47FF52AD3E2AA43FA228F3C4"
+    },
     "svg-icons.fifthtry.site": {
       "files": {
         "FASTN.ftd": {
diff --git a/FASTN.ftd b/FASTN.ftd
index b432959..d52b14d 100644
--- a/FASTN.ftd
+++ b/FASTN.ftd
@@ -1,9 +1,15 @@
 -- import: fastn
 
--- fastn.package: fast-nspec
+-- fastn.package: fastn-spec.fifthtry.site
 
 -- fastn.dependency: design-system.fifthtry.site
+provided-via: fastn-spec.fifthtry.site/ds
+
+-- fastn.dependency: dark-flame-cs.fifthtry.site
+-- fastn.dependency: midnight-storm-typography.fifthtry.site
+-- fastn.dependency: svg-icons.fifthtry.site
 
 
 -- fastn.auto-import: design-system.fifthtry.site as ds
+-- fastn.auto-import: fastn-spec.fifthtry.site/eds as eds
 -- fastn.auto-import: fastn/processors as pr
diff --git a/ds.ftd b/ds.ftd
new file mode 100644
index 0000000..e2764e1
--- /dev/null
+++ b/ds.ftd
@@ -0,0 +1,15 @@
+-- import: design-system.fifthtry.site
+export: borders, button, icon-button, primary-button, toggle-image-link, secondary-button, circle-text-button, phosphor-icon-button, inline-row, footer-link, copyright-text, page-widths, header-link, page, heading-hero, heading-medium, heading-small, heading-tiny, copy-large, copy-regular, copy-small, fine-print, source-code, link, section-row, section-column, column, element-radius, radius, row, flush, gap, hv, spaces, border-data, border-bottom, alert, container, text-input, danger-button, checkbox, link-button, floater, copy-to-clipboard-text, copy-to-clipboard-icon, label-text, package-info, storybook, code, heading-large,
+exposing: page-widths
+
+
+-- page-widths widths:
+regular.px: 1140
+narrow.px: 800
+wide.px: 1340
+
+-- import: dark-flame-cs.fifthtry.site as dark-flame
+-- import: midnight-storm-typography.fifthtry.site as typography
+
+-- ftd.color-scheme colors: $dark-flame.main
+-- ftd.type-data types: $typography.types
diff --git a/eds.ftd b/eds.ftd
new file mode 100644
index 0000000..536c852
--- /dev/null
+++ b/eds.ftd
@@ -0,0 +1,106 @@
+-- import: svg-icons.fifthtry.site/phosphor
+
+-- string current-url:
+$processor$: pr.current-url
+
+-- component heading-large-id:
+caption text:
+string id:
+optional ds.gap margin:
+ftd.color color: $ds.colors.text-strong
+optional string link:
+ftd.text-style list style:
+optional body content:
+private string slug: $url(a = $heading-large-id.id)
+private boolean $copied: false
+
+-- ftd.column:
+
+-- ftd.row:
+id: $heading-large-id.id
+align-content: left
+
+-- phosphor.light: clipboard
+size: 32
+if: { !heading-large-id.copied  }
+$on-click$: $ftd.copy-to-clipboard(a = $heading-large-id.slug)
+$on-click$: $ftd.set-bool($a = $heading-large-id.copied, v = true)
+
+-- phosphor.light: clipboard-text
+size: 32
+if: { heading-large-id.copied  }
+$on-click$: $ftd.copy-to-clipboard(a = $heading-large-id.slug)
+$on-click$: $ftd.set-bool($a = $heading-large-id.copied, v = false)
+
+
+-- ds.heading-large: $heading-large-id.text
+margin: $heading-large-id.margin
+color: $heading-large-id.color
+link: $heading-large-id.link
+style: $heading-large-id.style
+
+
+-- end: ftd.row
+
+-- ds.copy-regular:
+if: { heading-large-id.content }
+
+$heading-large-id.content
+
+-- end: ftd.column
+
+-- end: heading-large-id
+
+-- component heading-medium-id:
+caption text:
+string id:
+optional ds.gap margin:
+ftd.color color: $ds.colors.text-strong
+optional string link:
+ftd.text-style list style:
+private string slug: $url(a = $heading-medium-id.id)
+private boolean $copied: false
+optional body content:
+
+-- ftd.column:
+
+-- ftd.row:
+id: $heading-medium-id.id
+align-content: left
+
+-- phosphor.light: clipboard
+size: 32
+if: { !heading-medium-id.copied  }
+$on-click$: $ftd.copy-to-clipboard(a = $heading-medium-id.slug)
+$on-click$: $ftd.set-bool($a = $heading-medium-id.copied, v = true)
+
+-- phosphor.light: clipboard-text
+size: 32
+if: { heading-medium-id.copied  }
+$on-click$: $ftd.copy-to-clipboard(a = $heading-medium-id.slug)
+$on-click$: $ftd.set-bool($a = $heading-medium-id.copied, v = false)
+
+
+-- ds.heading-medium: $heading-medium-id.text
+margin: $heading-medium-id.margin
+color: $heading-medium-id.color
+link: $heading-medium-id.link
+style: $heading-medium-id.style
+
+-- end: ftd.row
+
+-- ds.copy-regular:
+if: { heading-medium-id.content }
+
+$heading-medium-id.content
+
+-- end: ftd.column
+
+-- end: heading-medium-id
+
+
+-- string url(a):
+string a:
+string current_url: $current-url
+
+"https://fastn-spec.fifthtry.site" + current_url + "#" + a
diff --git a/index.ftd b/index.ftd
index 470d878..74409cf 100644
--- a/index.ftd
+++ b/index.ftd
@@ -25,7 +25,10 @@ Currently there is only [one implementation of
 implementation can be derived using this spec.
 
 
--- ds.heading-large: Table of Contents
+-- eds.heading-large-id: Table of Contents
+id: table-of-contents
+
+-- ds.copy-regular:
 
 - [Overview](/overview/)
 - [`ftd::p1` grammar](/p1/)
diff --git a/overview.ftd b/overview.ftd
index f09c24c..a207953 100644
--- a/overview.ftd
+++ b/overview.ftd
@@ -5,9 +5,8 @@ align-content: left
 inset: $ds.spaces.inset-wide.large
 
 
--- ds.heading-large: Purpose Of The Language
-
--- ds.copy-regular:
+-- eds.heading-large-id: Purpose Of The Language
+id: purpose
 
 `fastn` language is a HTTP / User Interface language. A `fastn` program is a fullstack web
 application. The HTTP part, and the User Interface, can be implemented in many ways. The
@@ -28,9 +27,8 @@ Instead of JSON authors can chose to return YML etc also, further, a UI also has
 data, so instead of getting the UI, the client can do content negotiation, and request
 the backing data as JSON or YML etc as well.
 
--- ds.heading-large: Target
-
--- ds.copy-regular:
+-- eds.heading-large-id: Target
+id: target
 
 `fastn` programs are invoked with a target. The target can be `stdio` for pure text output,
 `terminal` for ncurses based terminal UI, `web` for Web Browsers, `windows`, `osx`, `linux`,
@@ -43,43 +41,38 @@ program can use `target` as a switch to provide different UI for different targe
 on all supported `fastn` targets. Each target can also specify its own components, and
 are only available on that target.
 
--- ds.heading-large: Target Specific Libraries
-
--- ds.copy-regular:
+-- eds.heading-large-id: Target Specific Libraries
+id: target-specification-libraries
 
 Target can also specify libraries that are available only on that target. There is a
 target native way to define UI components, and library functions, that are available
 when using that target. fastn ui components can use these target specific components,
 and fastn user defined functions can call target specific functions.
 
--- ds.heading-large: Target Neutral Vs Target Dependent Code
-
--- ds.copy-regular:
+-- eds.heading-large-id: Target Neutral Vs Target Dependent Code
+id: target-neutral-vs-target-dependant-code
 
 When writing code, authors can write target neutral code, or target dependent code.
 Most programs would use target neutral code, and only use target dependent code when
 absolutely necessary.
 
 
--- ds.heading-large: Main `fastn` Package
-
--- ds.copy-regular:
+-- eds.heading-large-id: Main `fastn` Package
+id: main-fastn-package
 
 `fastn` code is organised as packages. There is a main package, which is the entrypoint of
 the `fastn` program. The main package is the package that is invoked when the `fastn` program
 is run.
 
--- ds.heading-large: File Path Based Routing
-
--- ds.copy-regular:
+-- eds.heading-large-id: File Path Based Routing
+id: file-path-based-routing
 
 `fastn` programs take route, and other request input, as parameter. The `route` or `path`
 is converted to a file path, and the file path is used to find the `fastn` module within
 the fastn package.
 
--- ds.heading-large: Dynamic Routes
-
--- ds.copy-regular:
+-- eds.heading-large-id: Dynamic Routes
+id: dynamic-routes
 
 `fastn` package can have dynamic routes. The dynamic routes are specified in `FASTN.ftd`
 file, and the dynamic routes are used to find the `fastn` module within the package.
@@ -88,9 +81,8 @@ The dynamic routes can contain wildcards, and the wildcards are used to extract
 from the route, and these values are passed to the `fastn` module.
 
 
--- ds.heading-large: `fastn` Package
-
--- ds.copy-regular:
+-- eds.heading-large-id: `fastn` Package
+id: fastn-package
 
 `fastn` compiler works at package level. `fastn` files have an extension, `.ftd` and they are
 organised into `fastn` packages. Each `fastn` package has a mandatory `FASTN.ftd` file at the
@@ -107,7 +99,8 @@ lang: ftd
 \-- import: fastn
 \-- fastn.package: hello-world
 
--- ds.heading-large: `fastn` modules
+-- eds.heading-large-id: `fastn` modules
+id: fastn-modules
 
 Any ftd file in a fastn package is a "fastn module". A fastn package is composed of zero or
 more modules, and zero or more static files.
@@ -119,25 +112,25 @@ lang: ftd
 
 \-- ftd.module foo: ;;
 
--- ds.heading-large: `p-script`
+-- eds.heading-large-id: `p-script`
+id: p-script
 
 The `fastn` files are composed of "sections", described in 02-p1 chapter. Each
 
 
--- ds.heading-large: Comments
-
--- ds.heading-large: Line Comments
+-- eds.heading-large-id: Comments
+id: comments
 
--- ds.copy-regular:
+-- eds.heading-large-id: Line Comments
+id: line-comments
 
 `fastn` uses `;;` as line comment character. Everything from the first ``;;` till the end
 of line is comment. Comments can be escaped by prefixing a backslash character: `\;;`.
 Literal backslash can be inserted by putting two backslashes, `\\`.
 
 
--- ds.heading-large: Structural Comments
-
--- ds.copy-regular:
+-- eds.heading-large-id: Structural Comments
+id: structural-comments
 
 Entire "section" can be commented out by adding a `/` in the front of the section, e.g.,
 
diff --git a/p1.ftd b/p1.ftd
index ceebc9d..b731aa2 100644
--- a/p1.ftd
+++ b/p1.ftd
@@ -8,7 +8,8 @@ inset: $ds.spaces.inset-wide.large
 
 `fastn` is based on a low-level grammar called `ftd::p1` grammar.
 
--- ds.heading-large: `section`
+-- eds.heading-large-id: `section`
+id: section
 
 A `ftd::p1` file is composed of "sections". A section looks like this:
 
@@ -24,13 +25,12 @@ the body of the first section
 \-- something:
 yo: 42
 
--- ds.copy-regular:
-
 Each section starts with `-- `.
 
 The section has these properties:
 
--- ds.heading-medium: `section kind`
+-- eds.heading-medium-id: `section kind`
+id: secition-kind
 
 The section kind can be define after `-- ` and before the section name. This is
 optional parameter.
@@ -58,7 +58,8 @@ lang: ftd
 
 
 
--- ds.heading-medium: `section name`
+-- eds.heading-medium-id: `section name`
+id: section-name
 
 The section name is the only **mandatory parameter** for a section. Name starts
 after `-- ` or section kind if present, and ends with the first `:`. Trailing
@@ -72,7 +73,8 @@ hash(`#`), and hyphens(`-`). Colon terminates the section name.
 
 Leading and trailing whitespaces are not considered part of the section name.
 
--- ds.heading-medium: `section caption`
+-- eds.heading-medium-id: `section caption`
+id: section-caption
 
 What comes after `:` in the section line, till the end of the first line is called
 the `caption` of the section.
@@ -84,7 +86,8 @@ the second section does not have a caption.
 
 Leading and trailing whitespaces are not considered part of the caption.
 
--- ds.heading-medium: `section headers`
+-- eds.heading-medium-id: `section headers`
+id: section-headers
 
 After the "section line" (the first line that starts with `-- `), zero or more
 section headers can be passed. Header can be passed in two ways: `inline` and
@@ -176,7 +179,8 @@ next-foo-header: 1
 In this case the `sidebar` header to `foo` is a block header, and it ends at the
 `end: sidebar`
 
--- ds.heading-medium: `section body`
+-- eds.heading-medium-id: `section body`
+id: section-body
 
 Like header, body can be passed in two ways: `inline` and `block`
 The body is optional.
@@ -230,7 +234,8 @@ Unlike `header`, `body` doesn't accept list of sections as value.
 
 
 
--- ds.heading-large: `sub-section`
+-- eds.heading-large-id: `sub-section`
+id: sub-section
 
 A section can contain zero or more `sub-sections`:
 
@@ -261,7 +266,8 @@ In above example, `some-section` section has two `sub-section`s, with names
 and the second one has a body, `subsection2 body`.
 
 
--- ds.heading-large: Programmatic Access
+-- eds.heading-large-id: Programmatic Access
+id: programmatic-access
 
 `ftd::p11` module in `ftd` crate can be used to read `ftd.p1` files. Wrappers of
 this crate in Python and other programming languages would hopefully come soon.