




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.
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);
}
}