From the beginning, we decided to pass on the vintage hacker standard of bright text on a black background: it's definitely a look, but it's hard to do something exceptionally legible with it that has any character at all. Gynophage came up with the idea of something that looked like a Japanese game show. There's tons of reasons to love it: clips from Japanese game shows have been favorites for the distraction screens in previous years, so it's not unfamiliar, there's a wide variety of motifs and colors to be used, and we don't know of other games that used this visual style.
Within hours of this suggestion I'd cooked up a rough draft in HTML: a weird salmon background, Katakana at a weird angle, parchment behind text, and an intent to have both English and Japanese text for most of the body copy.We were also using the "Ubuntu" font family from said Linux distribution: it's a readable but distinctive sans-serif font, is available in a shit-ton of different weights, has condensed and monospaced variants, and is available on Google Web Fonts to make it work on your web browser.
I spent a little time in Photoshop farting around with colors, and came up with this ghastly mix of a strawberry linen texture, yellow, and parchment that stuck with us.
Astute readers will notice the nonsense Japanese text for our logo. We hemmed and hawed about it, and I spent a lot of time punching synonyms of "Legitimate Business Syndicate" into Google Translate, until landing on "true company," which turns into four glyphs. I felt that four glyphs worked the best visually.
The grey login box kinda sucked, as did the copyright bullshit at the bottom.
I made a salmon and white striped texture and used that on the login box. Here you can see it in its native habitat, aliasing poorly when rotated at a small angle because I hadn't figured out the difference between 2D and 3D rotation in browser-land.
We also had screens for the full "Create Account" flow, and a dashboard where you could create or join teams, but they were relatively simple.
I spiked out the quals gameboard on January 4. The huge overbearing logo didn't last, but the Jeopardy board, message box, and the actual scoreboard did.
Having played on a university team, I also knew the importance of having the scoreboard fit on a low-resolution (800x600) projector, and that I could do it pretty easily with a media query.
On March 7, 2013, we found out we won the bid to host DEF CON Capture the Flag.
We went public with an announcement on March 23, and a schedule on April 1, as is tradition. For our schedule, we designed another kind of box, the blue grid, for the schedule and other calendar-y things. Part of the schedule was a list of other CTF events happening in June, because we love you.
During the run-up to quals, I spent a lot of time dithering about challenges (and not much time writing them), and only in the last month or so polished up the scoreboard to be ready to go live.
Revisiting the gameboard, we loved the angled leaderboard, decided we didn't want to wear out the logo, and absolutely hated my awful colors.
Consider the quals game flow: all problems are locked at the beginning, solved problems are solved, unsolved but unlocked problems are open, and the most recently unlocked problem is "hot." The "hot" problem has a special status. We need to communicate all four states clearly.
The first thing I did was get rid of the old terrible colors, and replace them with a flat strawberry color.
Then I added an absolutely vile green for the solved problems.
I hooked up some data, toned down the pink and green, textured the green with check-marks (solved!), and started work on the challenge window. The "hot" visual showed up here for the first time, being a crimson.
I wanted to bring back some fun to the style without being as retina-burning as the neon green and pink atrocities previously committed. The obvious treatment for "hot" challenges is something hot, like fire.
Animated fire.
We added a couple more textures: pink hearts for unlocked problems, dark cherry 'X' marks for locked problems.
The only changes after that were cutting the number of categories down to five, putting a clock at the top of the leaderboard, and actually running the damn game.
Quals Statistics
| Lines of Sass | 583 |
|---|---|
| Bytes of minified CSS | 10865 |
| CSS "float" declarations | 11 |
| Inline style attributes | 0 |
| Favorite CSS declaration | tie between "padding" and "width" |