Text styles

Links

Duis maximus massa vitae libero imperdiet feugiat quis a sapien. Quisque sodales neque dui, a mollis justo porta eu. Nullam semper ipsum ac ante rhoncus, ac facilisis lacus posuere.Suspendisse sed sapien placerat velit pulvinar condimentum. Curabitur lacinia id metus id hendrerit. Curabitur luctus enim id nibh ullamcorper fringilla. Aenean id molestie metus. Donec vestibulum ipsum arcu, sed commodo lacus lacinia sed. Aenean vestibulum leo non condimentum vulputate.

Bold text

Nulla ultrices gravida interdum. Nam nec est quam. In porta mi in mi facilisis, in suscipit nisl dictum. Aenean sapien nibh, convallis eget faucibus sit amet, efficitur blandit odio. Vestibulum libero orci, egestas sit amet risus et, luctus tempor diam.

Lists

First item
second item

First item
Second item

Callout

Nulla ultrices gravida interdum. Nam nec est quam. In porta mi in mi facilisis, in suscipit nisl dictum. Aenean sapien nibh, convallis eget faucibus sit amet, efficitur blandit odio. Vestibulum libero orci, egestas sit amet risus et, luctus tempor diam.

Quisque mi justo, euismod ac leo nec, elementum eleifend purus.

Curabitur pulvinar magna sit amet mattis semper. Nulla interdum nunc quis turpis iaculis finibus. Donec purus leo, aliquam at malesuada sit amet, elementum vitae quam. Quisque mi justo, euismod ac leo nec, elementum eleifend purus. Etiam ut ornare velit.

Todo

You can add todo notes to your drafts using the <todo></todo> tag.

Add chart showing a sine wave.

Section breaks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales libero sed lobortis dignissim. Aenean tempor lorem eget varius maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mauris risus, vulputate ut diam molestie, consequat porta dui. Nulla sit amet justo ac eros aliquam fringilla et nec leo. Nullam ut orci sit amet elit imperdiet laoreet. Cras orci libero, eleifend non purus non, scelerisque fringilla nunc. Fusce tempor, enim non euismod ullamcorper, leo lectus tincidunt tortor, vel ornare ex lorem feugiat odio. Curabitur eu finibus nisi. Morbi vel ante ligula.

Suspendisse ac dictum orci, a efficitur justo. Quisque semper lacinia nisl at convallis. Quisque tellus lectus, rutrum eget cursus eget, tincidunt iaculis purus. Pellentesque sollicitudin nibh malesuada lacinia maximus. Mauris mollis ullamcorper mattis. Suspendisse hendrerit augue quis odio blandit convallis. Ut auctor neque diam, vel sollicitudin sapien scelerisque scelerisque. Fusce mauris odio, viverra a sem interdum, vestibulum volutpat arcu. Mauris vehicula fermentum augue, quis ultrices elit commodo in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a velit iaculis, ornare nulla sit amet, consequat orci. Curabitur non metus dui.

Maths

Inline maths

Curabitur pulvinar magna sit amet mattis semper. Nulla interdum $a = \sum x^2$ nunc quis turpis iaculis finibus. Donec purus leo, aliquam at malesuada sit amet, elementum vitae quam. This is a financial number $100 ok and this is another \$100. Curabitur pulvinar magna sit amet mattis semper.

Math blocks

$$ \left( \frac{C}{p_{\text{now}}} +m \sum_{y=\text{now}}^{\text{now}+T} \frac{(1 + \phi)^y}{p_y} \right) p_{\text{now} + T} = A $$

Code

Python

for i in range(10):
    print(i**2)

JSON

{
    "something": 6,
}

Table

Investment	Worst day return
Investment A	-0.6%
Investment B	-0.9%

Images

You can create an image with standard mardown: Example image

You can use a Hugo shortcode to create a figure with a caption:

**Example figure.** Curabitur pulvinar magna sit amet mattis semper. Nulla interdum nunc quis turpis iaculis finibus. Donec purus leo, aliquam at malesuada sit amet, elementum vitae quam. Quisque mi justo, euismod ac leo nec, elementum eleifend purus. Etiam ut ornare velit.

Pro tips

When creating charts use SVGs. These will render as crisp as possible on all devices. And, as OSQuant evolves, our style may change. SVGs are editable while other formats are not.

In python you can use matplotlib to create charts. If you want to enhance them after you’ve generated the SVGs, Figma is a great and free tool.

If you want to go for that handwritten notebook style, we use Excalidraw to create these with a consistent style.

Feature blocks

You can create feature blocks using the <feature></feature> HTML element:

Some cool feature

This is content inside a feature block. The background is a diffferent colour and is full width.

Use these to highlight important content or important small sections.

If you want more space inside the feature block, you can use the <bigfeature></bigfeature> HTML element:

A bit more space

Try not to use these too often.

Footnotes & references

Donec auctor lacus est, sit amet dapibus erat porta ac. Proin facilisis, dui quis lacinia convallis, eros nunc rhoncus orci, at tempor enim magna nec enim. Nulla facilisi ¹. Etiam ut ex dignissim, porttitor augue ac, congue ex. Ut sit amet tellus gravida, venenatis nisl et, luctus eros. Nam massa lacus, ornare ac pulvinar eget, consequat vitae nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit ². Integer ut ornare tellus.

Quisque dictum, odio a tristique pretium, velit sem egestas quam, eu ultrices ³ enim risus at leo. Nulla tortor ante, commodo et euismod consectetur, dictum ullamcorper nisi ⁴.

Footnotes

References & Notes

Cavallo, J. V., & Fitzsimons, G. M. (2012). Goal competition, conflict, coordination, and completion: How intergoal dynamics affect self-regulation. In H. Aarts & A. J. Elliot (Eds.), Frontiers of social psychology. Goal-directed behavior (p. 267–299). Psychology Press. ↩︎
If you type this phrase into Google you will get many hits. I do not know who said it first. There are many people using it without reference. I think I might have first read it in a Forbes article. ↩︎
Economist Robert J. Shiller wrote a book called Irrational Exuberance published in 2000 showing hundreds of years worth of data. He demonstrates that housing prices do not always go up. ↩︎
Vapnik, Vladimir: "Statistical learn theory" Wiley & Sons New York (1998) ↩︎

Corrections

If you see any mistakes or room for improvement, please reach out to me on Twitter @DrAdrian.

Citation

Please cite this work as:

Letchford (1900), "Visual style guide", OS Quant.

In BibTeX please use:

@article{Letchford1900,
    author = {Letchford, Adrian},
    title = {Visual style guide},
    journal = {OS Quant},
    year = {1900},
    note = {https://osquant.com/visual-style-guide/},
}