Crimson Steel

Vernoemd naar de twee hoofdkleuren. Persoonlijke styleguide van Dinand Mentink.

Logo

Het DM logo vormt de basis voor mijn persoonlijke brand. Het zijn mijn initialen DM, in het Corda lettertype, waarbij de M een klein boogje heeft gekregen in de neerwaartse streep en de onderste schreven. Het basis logo word altijd gebruikt op de primaire achtergrond.

Er is ook een donkere variant van het logo. Deze kan gebruikt worden wanneer het logo op een lichte achtergrond dienst moet doen.

Rondom het logo moet altijd een safespace aanwezig zijn die ervoor zorgt dat het logo apart staat. Elk element waarin het logo terug komt moet zo ontworpen zijn dat er geen andere elementen in deze safespace kunnen komen. De safespace is gedefinieerd als "zo groot als de hoogte van de letter D in het logo".

Kleuren

Mijn brand bestaat uit 5 kleuren waarvan Crimson de primaire kleur is en Teal de secundaire kleur.

Crimson wordt gebruikt voor opvallende elementen die de branding moeten benadrukken. Denk aan de navigatiebalk, koptexten of app iconen. Op Crimson wordt White gebruikt als letterkleur. Op Crimson kunnen alle andere kleuren gebruikt worden voor knoppen en andere elementen.

Teal wordt gebruik als accentkleur voor onder andere knoppen en links. Op Teal wordt White gebruikt als textkleur. Op Teal kunnen alle andere kleuren gebruikt worden voor knoppen en andere elementen.

Dark-Green wordt hoofdzakelijk gebruikt voor body text. Dark-Green kรกn ook gebruikt worden als achtergrondkleur, zowel met White als Beige text.

Beige kan gebruikt worden in plaats van White als achtergrondkleur om een vlak subtiel wat meer aandacht te geven of iets warmer over te laten komen. Op Beige wordt voor titels Crimson als kleur gebruikt en Dark-Green voor body text. Beige kan ook gebruikt worden voor text, maar dit alleen op een Dark-Green achtergrond.

  • Crimson
  • #4f0b2e
  • Teal
  • #427172
  • Dark-Green
  • #132121
  • Beige
  • #e5dfda
  • White
  • #fcfcff

Lettertype

Als lettertype wordt Corda gebruikt. Corda is een betaald lettertype van de Hoftype foundry. Corda is beschikbaar in 5 diktes waarvan er 3 gebruikt worden. In body copy is het mogelijk om italics te gebruiken waar nodig.

Als vuistregel. Bold wordt gebruikt voor titels. Medium wordt gebruikt voor introductie text en Regular wordt gebruikt voor body text.

Als fallback lettertype kan Crimson gebruikt worden. Crimson is gratis beschikbaar via Google Fonts.

Bold

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Semi-Bold

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Regular

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Elementen

Deze website gebruikt enkele elementen die veelvuldig terugkomen. Hieronder worden deze zonder verdere toelichting getoond.

Titels

h1 Titel

h2 Titel

h3 Titel

h4 Titel

h5 Titel
h6 Titel

Lead Text

Paragraaf. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Body Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote met footer

Emoji's

Emoji's worden gerendered gebruikmakend van (in volgorde) Noto Color Emoji, Twemoji Mozilla, Apple Color Emoji, Segoe UI Emoji of Segoe UI Symbol.

๐ŸŽญ๐Ÿค ๐Ÿ˜Ž๐Ÿ™„๐Ÿค™๐Ÿ˜€๐Ÿ˜๐Ÿ˜‚๐Ÿ˜ƒ๐Ÿ˜„๐Ÿ˜…๐Ÿ˜†๐Ÿ˜‡๐Ÿ˜ˆ๐Ÿ˜‰๐Ÿ˜Š๐Ÿ˜‹๐Ÿ˜Œ๐Ÿ˜๐Ÿ˜Ž๐Ÿ˜๐Ÿ˜๐Ÿ˜‘๐Ÿ˜’๐Ÿ˜“๐Ÿ˜”๐Ÿ˜•๐Ÿ˜–๐Ÿ˜—๐Ÿ˜˜๐Ÿ˜™๐Ÿ˜š๐Ÿ˜›๐Ÿ˜œ๐Ÿ˜๐Ÿ˜ž๐Ÿ˜Ÿ๐Ÿ˜ ๐Ÿ˜ก๐Ÿ˜ข๐Ÿ˜ฃ๐Ÿ˜ค๐Ÿ˜ฅ๐Ÿ˜ฆ๐Ÿ˜ง๐Ÿ˜จ๐Ÿ˜ฉ๐Ÿ˜ช๐Ÿ˜ซ๐Ÿ˜ฌ๐Ÿ˜ญ๐Ÿ˜ฎ๐Ÿ˜ฏ๐Ÿ˜ฐ๐Ÿ˜ฑ๐Ÿ˜ฒ๐Ÿ˜ณ๐Ÿ˜ด๐Ÿ˜ต๐Ÿ˜ถ๐Ÿ˜ท๐Ÿ˜ธ๐Ÿ˜น๐Ÿ˜บ๐Ÿ˜ป๐Ÿ˜ผ๐Ÿ˜ฝ๐Ÿ˜พ๐Ÿ˜ฟ๐Ÿ™€๐Ÿ™๐Ÿ™‚๐Ÿ™ƒ๐Ÿ™„๐Ÿ™…๐Ÿ™†๐Ÿ™‡๐Ÿ™ˆ๐Ÿ™‰๐Ÿ™Š๐Ÿ™‹๐Ÿ™Œ๐Ÿ™๐Ÿ™Ž๐Ÿ™๐Ÿค๐Ÿค‘๐Ÿค’๐Ÿค“๐Ÿค”๐Ÿค•๐Ÿค–๐Ÿค—๐Ÿค˜๐Ÿค™๐Ÿคš๐Ÿค›๐Ÿคœ๐Ÿค๐Ÿคž๐ŸคŸ๐Ÿค ๐Ÿคก๐Ÿคข๐Ÿคฃ๐Ÿคค๐Ÿคฅ๐Ÿคฆ๐Ÿคง๐Ÿคจ๐Ÿคฉ๐Ÿคช๐Ÿคซ๐Ÿคฌ๐Ÿคญ๐Ÿคฎ๐Ÿคฏ ๐Ÿคฐ๐Ÿคฑ๐Ÿคฒ๐Ÿคณ๐Ÿคด๐Ÿคต๐Ÿคถ๐Ÿคท๐Ÿคธ๐Ÿคน๐Ÿคบ๐Ÿคผ๐Ÿคฝ๐Ÿคพ๐Ÿฅ€๐Ÿฅ๐Ÿฅ‚๐Ÿฅƒ๐Ÿฅ„๐Ÿฅ…๐Ÿฅ‡๐Ÿฅˆ๐Ÿฅ‰๐ŸฅŠ๐Ÿฅ‹๐ŸฅŒ๐Ÿฅ๐ŸฅŽ๐Ÿฅ๐Ÿฅ๐Ÿฅ‘๐Ÿฅ’๐Ÿฅ“๐Ÿฅ”๐Ÿฅ•๐Ÿฅ–๐Ÿฅ—๐Ÿฅ˜๐Ÿฅ™๐Ÿฅš๐Ÿฅ›๐Ÿฅœ๐Ÿฅ๐Ÿฅž๐ŸฅŸ๐Ÿฅ ๐Ÿฅก๐Ÿฅข๐Ÿฅฃ๐Ÿฅค๐Ÿฅฅ๐Ÿฅฆ๐Ÿฅง๐Ÿฅจ๐Ÿฅฉ๐Ÿฅช๐Ÿฅซ๐Ÿฅฌ๐Ÿฅญ๐Ÿฅฎ๐Ÿฅฏ๐Ÿฅฐ๐Ÿฅณ๐Ÿฅด๐Ÿฅต๐Ÿฅถ๐Ÿฅบ๐Ÿฅผ๐Ÿฅฝ๐Ÿฅพ๐Ÿฅฟ๐Ÿฆ€๐Ÿฆ๐Ÿฆ‚๐Ÿฆƒ๐Ÿฆ„๐Ÿฆ…๐Ÿฆ†๐Ÿฆ‡๐Ÿฆˆ๐Ÿฆ‰๐ŸฆŠ๐Ÿฆ‹๐ŸฆŒ๐Ÿฆ๐ŸฆŽ๐Ÿฆ๐Ÿฆ๐Ÿฆ‘๐Ÿฆ’๐Ÿฆ“๐Ÿฆ”๐Ÿฆ•๐Ÿฆ–๐Ÿฆ—๐Ÿฆ˜๐Ÿฆ™๐Ÿฆš๐Ÿฆ›๐Ÿฆœ๐Ÿฆ๐Ÿฆž๐ŸฆŸ

Syntax highlighting


namespace Tests\Unit;

use Carbon\Carbon;
use App\Models\Article;
use Tests\TestCase;
use Illuminate\Foundation\Testing\WithFaker;
use Illuminate\Foundation\Testing\RefreshDatabase;

class ArticleTest extends TestCase
{
  use RefreshDatabase;

  public function testSetPublishAtOnCreated()
  {
      $now = now()->toDateTimeString();
      $article = Article::factory()->create(["created_at" => $now]);
      $this->assertEquals($now, $article->publish_at);

      $yesterday = now()->yesterday();
      $article = Article::factory()->create(["publish_at" => $yesterday]);
      $this->assertEquals($yesterday, $article->publish_at);
  }
}