System Design

Last Updated ...  2023-02-01 00:00:00 UTC
Version ........  v.0.425—DRAFT
Notes ..........  Work In Progress — Public

Design Direction

  • Utilitarian Design first
  • Performance is design
    • Percentile 90 for slowest path is measured independently.
  • Security is design
  • Accessibility is design
    • Color contrast aim for Level AAA, and not lower than AA.
    • Following WCAG guidelines.
    • Browser’s font size preferences are respected and native zoom is working as expected.
  • Negative space is a net negative
  • Fight Minimalism
  • Embrace Industrialism
  • Make things obvious
  • No round borders
CITATION Berkeley Graphics:

Make websites dense again. Conjest the UI. You can handle the complexity. Don't hide things, but instead expose hierarchy in 2D layout, neatly organized in boxes. It's visually overwhelming because others have told you to think that way. Future is not minimalism. The future is in the intellect of organizing information, presenting it to the user in the most straightforward, functional, and unobstrusive way.

That empty space is just sitting there doing nothing, projecting nothing to the retina. Put it to use. Tactically use minimalism when attracting attention to urgency or when singular focus is required. Judge your work with extreme disregard to status quo or trends or what others are doing.

Engineer it with objectivity and self-awareness to aesthetic bias or personal taste (which can cloud your judgement). That blue button needs to be interrogated for its blueness. Why is it blue and not green? Is it personal taste? Whims? Copying other designers? Do this constantly. There should be an inner voice interrogating for objectivity at all times. Fall back to sane defaults if you cannot find a reason for something.

Question why things are done a certain way. Most of the time, there is a good reason for it. Find things that are done a certain way with no apparent justification, dissect their reason for existence. Destroy them from your repetoire if nothing is found. Now there is a space for a new, often better solution that cannot be knocked down easily. Avoid crowds where criticism is disallowed or not valued. Avoid extreme positivity/negativity spaces—they breed mediocrity.

Design is full of subjectivism and it bothers me. When there is no yard stick to measure, anything goes. When anything goes, criticism or praise has no legs to stand on. Mediocrity and immeasurability go hand in hand. Idolicize and obssess over people that are good (in your current judgement). Study their work and dig up everything they've done in life. See why others praise their work.


Typography

Heading 1 Styling

<h1>
  <span class="h1">Heading 1 Styling</span>
</h1>

Heading 2 Styling

<h2>
  <span class="h2">Heading 2 Styling</span>
</h2>

Heading 3 Styling

<h3>
  <span class="h3">Heading 3 Styling</span>
</h3>

This is a mark a highlight

This is a strong highlight

This is an em highlight

This is a link with 4 words

This is a keyboard shortcut Ctrl + R

This is an external link

<p>This is a <mark>mark</mark> highlight</p>
<p>This is a <strong>strong</strong> highlight</p> 
<p>This is an <em>em</em> highlight</p>
<p>This is a <a href="javascript:void(0)">link with 4 words</a></p>
<p>This is a keyboard shortcut <kbd>Ctrl</kbd> + <kbd>R</kbd></p>
<p>This is an <a href="#" target="_blank">external link</a></p>

Ordered List

  1. Potatoes
  2. Tomatoes
  3. Leeks Provident labore perspiciatis aperiam voluptatum quibusdam sunt atque id. Repellendus ut dolorum est rem. Dolor in similique et sequi omnis odit. Molestiae qui rerum reiciendis mollitia et.
  4. Pumpkin
<ol>
  <li>Potatoes</li>
  <li>Tomatoes</li>
  <li>
    Leeks Provident labore perspiciatis aperiam voluptatum quibusdam.
  </li>
  <li>Pumpkin</li>
</ol>  

Unordered List

  • Potatoes
  • Tomatoes
  • Leeks
  • Pumpkin
<ul>
  <li>Potatoes</li>
  <li>Tomatoes</li>
  <li>Leeks</li>
  <li>Pumpkin</li>
</ul> 

Unstyled List

  • Potatoes
  • Tomatoes
  • Leeks
  • Pumpkin
<ul class="unstyled">
  <li>Potatoes</li>
  <li>Tomatoes</li>
  <li>Leeks</li>
  <li>Pumpkin</li>
</ul> 

Buttons

<a href="#" class="btn">
  <span>Label Here</span>
</a>
<a href="#" class="btn light">
  <span>Label Here</span>
</a>
<a href="#" class="btn big">
  <span>Label Here</span>
</a>
<a href="#" class="btn small">
  <span>Label Here</span>
</a>
<a href="#" class="btn" disabled>
  <span>Label Here</span>
</a>
<a href="#" class="btn">
  <svg>...</svg>
  <span>Label Here</span>
</a>

Button Bar


Button Stack


Table

1 Dimension

Name Pinocchio
Country Narnia
Domain example.com
Allocated 2015-01-32
Multi-line Value 3, Boulevard Voltaire
75000 Paris
France
<table class="one-dim">
  <tbody>
    <tr>
        <th> Foo </th>
        <td> Bar </td>
    </tr>
  </tbody>
</table>

Forms

Forms are wraped in a <fieldset> element and use its <legend> child element to display the form purpose.

FORM PURPOSE
...

Panels

A panel is simply an elevated mini-section that wants to stand out a bit.

We usually wrap repetitive, but not numerous, elements with .panel, such as in testimonials.

...

This is a boxed panel. It is a more discreet version.

It's border thickness and lengh can be controlled via the `.long`, and `.thick` classes.

...

Code

Multi-line code blocks use the "Base16 / Grayscale Light" theme from HighlightJs.

Icons & Animations

Only when needed to: 1) attract the eyes, or 2) provide more context.

We use the icon collection from Feather: https://feathericons.com