The Great, White, North!
HTML + CSS, 487 + 189 = 676

The compass rose is constructed from CSS borders using the triangle technique and some basic transformations. The letters are just given fixed positions, so that turned out quite long :/

The snippet below is scaled down so that it all fits. You can check out the JSFiddle here. Also, I'm not sure how well the letters will line up on different browsers (with different fonts, default styles, etc.).



html{transform:scale(0.2)}body{margin:5em}hr{margin:0;float:left;border:250px solid transparent;border-right:58px solid #E5E5E5;border-bottom:58px solid #9999FF}a{position:fixed;width:616px;font-size:4em}#a{transform:rotate(90deg)}#b{transform:rotate(270deg)}#c{transform:rotate(180deg)}#d{transform:rotate(45deg)scale(.8)}#n{top:20px;left:365px}#e{top:356px;left:700px}#s{top:700px;left:370px}#w{top:356px;left:10px}#N{top:150px;left:550px}#E{top:560px;left:550px}#S{top:560px;left:140px}#W{top:150px;left:140px}
&lt;a id=n&gt;N&lt;/a&gt;&lt;a id=e&gt;E&lt;/a&gt;&lt;a id=s&gt;S&lt;/a&gt;&lt;a id=w&gt;W&lt;/a&gt;&lt;a id=N&gt;NE&lt;/a&gt;&lt;a id=E&gt;SE&lt;/a&gt;&lt;a id=S&gt;SW&lt;/a&gt;&lt;a id=W&gt;NW&lt;/a&gt;&lt;a id=d&gt;&lt;hr&gt;&lt;hr id=a&gt;&lt;hr id=b&gt;&lt;hr id=c&gt;&lt;/a&gt;&lt;a&gt;&lt;hr&gt;&lt;hr id=a&gt;&lt;hr id=b&gt;&lt;hr id=c&gt;&lt;/a&gt;